Toggling Play/Pause button

I’ve been wracking my brain looking for a way to do this, but can’t quite figure it out.

Ihave a scripty slideshow that I’d like to add a Play/Pause buton to. No problem so far. But is there a way to ad a ttoggling effect to the button so that, upon clicking on it, the button itself changes from Pause to Play and vice versa. Think the iTunes Play button and how it changes back and forth to Pause after every click. That’s what I’m after!

Is there a way to make this work in Freeway? Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You should be able to do this with CSS and JavaScript. Can you post a link to the page in question?

Walter

On Oct 30, 2013, at 10:35 AM, derekzinger wrote:

I’ve been wracking my brain looking for a way to do this, but can’t quite figure it out.

Ihave a scripty slideshow that I’d like to add a Play/Pause buton to. No problem so far. But is there a way to ad a ttoggling effect to the button so that, upon clicking on it, the button itself changes from Pause to Play and vice versa. Think the iTunes Play button and how it changes back and forth to Pause after every click. That’s what I’m after!

Is there a way to make this work in Freeway? Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the quick reply, Walt! The page is question is here:

http://www.annesivfp.com/recent_exhibitions.html

Cheers!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, can you put a Start button on it? I don’t usually use this Action, so I don’t know what its button code looks like off the top of my head.

Walter

On Oct 30, 2013, at 10:42 AM, derekzinger wrote:

Thanks for the quick reply, Walt! The page is question is here:

http://www.annesivfp.com/recent_exhibitions.html

Cheers!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oops, sorry about that. Have another look. I’ve added a Play/Pause button just above the images.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Did you take this page down or rename it?

I get a 404 on the previous URL.

Walter

On Oct 30, 2013, at 11:07 AM, derekzinger wrote:

Oops, sorry about that. Have another look. I’ve added a Play/Pause button just above the images.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ack! So sorry. I guess I’ve reached my multitasking limit today. The hyphen has changed and the URL is now:

http://www.annesivfp.com/recent-exhibitions.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, here’s what I would do. First, take the button you have created and edit it in an external image editor. Make the canvas twice the height of the original image, and put the pause button on the top half and the play button on the bottom, so it looks like this:

[    ||    ]
[    >     ]

Make note of the height of one half of this button graphic (make sure it’s an even number over all), and save the image in a Web-friendly format like PNG or GIF. Make one more graphic that is entirely clear (so save it as a GIF) that is the exact dimensions of the original combined button (half this height, original width). You should now have two images, one with visible graphics exactly twice the height of the clear one.

Now back in Freeway, replace your button graphic with an HTML box, and import the clear graphic into it (this makes it a pass-through image). Apply the Play/Pause Sequence Timer Action to the new button, and set everything up the way it was before. Make note of the Name/ID value for this graphic (case-sensitive!), as we’ll be using it later.

In the Styles palette, click on the cog icon and choose New Style. In the Tag field, enter a # followed by the Name/ID you wrote down, as in #item42. Tab into the Name field and delete whatever is there, then tab back out. In the Character picker, select Background Image, and choose your doubled-up button image. Set the background position to left/top + no-repeat.

Create a second style, just like the last one, with the Tag set to #item42.paused and the name blanked out as before. (Obviously, make the Tag match the real ID of the button.) Click on the Extended button, then New, then enter the following in the Name and Value fields, respectively:

  • Name: background-position
  • Value: `0 -30px’

(Adjust that vertical move to match the exact height of the clear button image. You are shifting the background up to reveal the play icon here.)

Finally, apply Protaculous 2 to your page, and in the DOM Loaded Observer editor, enter the following (again, adjust for the actual name of your clear button graphic).

$('item42').observe('click', 'toggleClassName', 'paused');

Yes, this is a long bridge out into the unknown, and it will not look like much of anything in Freeway’s design view, but if you have followed these instructions explicitly, you should now have a button that appears initially to show the pause icon, and when you click it, toggles back to the play icon and vice-versa.

Walter

On Oct 30, 2013, at 2:49 PM, derekzinger wrote:

Ack! So sorry. I guess I’ve reached my multitasking limit today. The hyphen has changed and the URL is now:

http://www.annesivfp.com/recent-exhibitions.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that sounds great. I’ll sink my teeth into it, and let you know how it goes. Thanks, Walt!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Evrything is very clear, but there is one thing that I haven’t been able to find:

“Set the background position to left/top + no-repeat.”

I’m not seeing this option. I have Freeway 6, but am in 5.5 for this site. Could that be the reason I’m not seeing these background position options?

All I have in my Background Image menu is:
Repeat, No repeat, Repeat X, Repeat Y. Is there another way to add the left/top + no repeat?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yup, that’s probably it. Okay, add to that step he following:

Click the Extended button, then New, and then enter:

  • Name: background-position
  • Value: left top

No-repeat is the right choice as far as the other goes.

Walter

On Oct 30, 2013, at 5:39 PM, derekzinger wrote:

Evrything is very clear, but there is one thing that I haven’t been able to find:

“Set the background position to left/top + no-repeat.”

I’m not seeing this option. I have Freeway 6, but am in 5.5 for this site. Could that be the reason I’m not seeing these background position options?

All I have in my Background Image menu is:
Repeat, No repeat, Repeat X, Repeat Y. Is there another way to add the left/top + no repeat?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Gotcha.

OK, all set. The Play-Pause functionality is there, but the image itself isn’t switching betwen Play and Pause. Looking at the code, the # styles that I’ve created aren’t showing up, neither on the page, nor in the stylesheet. Odd. The background image is present (displaying the || Pause button), but without the # styles, I wonder where it’s coming from??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s absolutely nothing in the Name field next to either of those styles? If that’s true, then that’s a first for me. By the way, I don’t see the button at the last URL, have you moved it again while testing? I see the JavaScript in place correctly. Try holding down the Control key and choosing Publish Everything (hidden option) from the File menu. That style should be showing up in the sheet1.css page, but it’s not there, which means maybe that Freeway didn’t notice the changes and publish that. Just to confirm, you are using Freeway to upload, right?

Walter

On Oct 30, 2013, at 8:00 PM, derekzinger wrote:

Gotcha.

OK, all set. The Play-Pause functionality is there, but the image itself isn’t switching betwen Play and Pause. Looking at the code, the # styles that I’ve created aren’t showing up, neither on the page, nor in the stylesheet. Odd. The background image is present (displaying the || Pause button), but without the # styles, I wonder where it’s coming from??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh, I see the problem now. (The image did show up.) But there’s a JavaScript error:

$('ssButtonClear').observe('click', 'toggleClassName', 'paused');

should be

$('ssButtonClear').observe('click', function(){ this.toggleClassName('paused'); );

See how that works for you.

Walter

On Oct 30, 2013, at 8:07 PM, Walter Lee Davis wrote:

There’s absolutely nothing in the Name field next to either of those styles?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Walt. I’ve inserted the new code and uploaded, but unfortunately no luck.

Safari’s source code inspector is highlighting that line in red. Could there be something there that’s not quite right?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Derek,
It looks like you are missing a closing brace in that line of code (at the end of the line after the semi-colon and before the closing bracket/parentheses). It should be;

$('ssButtonClear').observe('click', function(){ this.toggleClassName('paused'); } );

Regards,
Tim.

On 31 Oct 2013, at 09:14, derekzinger wrote:

Thanks, Walt. I’ve inserted the new code and uploaded, but unfortunately no luck.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hurrah! That solved the issue, Tim. All is as it should be, and we have a nice toggling Play/Pause button to show off.

Thanks to both of you for your help and patience.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options