Toggle Button using innerHTML

1

Hello,
This is an extension of the thread where MarkHunte helped get a working button to toggle sound:

I had to make the button smaller so that the video could be accessed on an iOS device.

Screenshot050.jpg1832×670 94.7 KB
CeliaDava2.zip (1.8 MB)

I noticed that even in the example returned from Mark the button was sensitive to it's length on the timeline.

In the current iteration the button text shows initially but not later like example from the original thread.
What am I missing?

The goal is to have the following JS show the "Click to Mute" and "Click for Sound" as the toggle occurs.

NOTE: the mute and unmute part IS working so it seems some issue with the text.

    var audio2 = document.getElementById("celiamovie");
       var initialText = document.getElementsByClassName('initialText')[0] ;
    console.log(actionButton.innerHTML);
 
  audio2.muted  ? (
    audio2.muted = false ,
  initialText.innerHTML = "Click to Mute"
   ) : (
      audio2.muted = true ,
    initialText.innerHTML = "Click for Sound"
   );
2

Part od the problem you had there was you forgot to add the class and span html to the innerHTML of the button.

But if you remember I was never really happy with my solution.

This gets its InnerHTML changed when Muted. annoyingly even though this is in the hover. It then only appears on Click.

There was also the problem of the text sticking on the button, which I reported as a bug and is now raised :

If you have timeline animation where a buttons text changes via innerHTML,

and you mouse over the button before the animation on the timeline completes, the Text Sticks in place.

if you do not mouse over the button before the animation on the timeline completes. the Text is changed as expected.

So taking all of that in mind I re-thought things through.

What happens now.

1, Your Main time does not change the innerHTML anymore. see below..
2, There are now two buttons. 'Click for Sound' which is no top of the 'Click for Mute' button
3, Both buttons are linked to fire a new timeline, 'swapSoundMuteButtons' and also linked to fire the 'toggleMute()' function.

4,When the 'Click for Sound is clicked, the timeline swapSoundMuteButtons is told to continue timeline hides the 'Click for Sound' using the Display property.
It then uses the same property to unhide the 'Click for Mute' button that is underneath the 'Click for Sound button. Then pauses at the end.

As this is all happening the 'toggleMute()' function has fired and mutes the sound.
5, When the 'Click for Mute button is click the timeline is told to continue timeline in reveres and not Can restart the timeline

This hides the mute button and shows the Sound button. We use the Display properties because this stops the hidden button from being interactive while not visible. Using Opacity would not do this.

The above solves the messing about with innerHTML.

But not the sticky text bug . Which was a Which was explained to me after I reported it as:

Definitely a correctness issue - what is happening is that buttons have to store the state that they need to go back to, and this essentially is winning over the timeline change.

and now filed as a bug by Tumult. :smile:

So I just realised the only reason I was still getting the bug was you have the initial 'Click to Sound' innerHTML change.

Which is never used again once the innerHTML is removed as we rely on the hovers. But because of the bug the innerHTML is not really removed and sticks around annoying every one. :smiling_imp:

So a simpler work around is to get rid of the innerHTML change completely and take advantage of another Hype 3.5 addition. Colour Opacity

The main timeline now changes that text's colour. But all we do is drop the chosen colour's opacity to 0.

CeliaDava3.hypetemplate.zip (1.8 MB)

3

MarkHunte,
Awesome Thanks!!

I’ll have to start learning more about additional Timelines. And I still do not understand why Color Opacity came into play.

4

When the timeline starts, the 'normal' innerHTML of the button 'Click for Sound' is shown. You then have it removed. But because of the bug it does not fully go and can show up getting in the way.

Having it show up in the button makes sense. So rather than find another method of show the first text. ( that is only ever used at first load) I simply took advantage of changing its colour to 0 opacity. This hides it and we do not run into the bug.
:smile:

1 Like
5

Hi guys,

Sorry to throw a spanner in the works. But this document shows a working solution which is what I believe you wanted in the first place. Of course I’m not saying that Mark’s solution is bad or anything. This is just for reference maybe.

live version

muteBtnOverVideo.zip (665.9 KB)

2 Likes
6

As always I like your solutions :smile:

Works good on Desktop/Laptop but is missing the initial Text that Steve wanted. Looks like a simple fix to add a start timeline for the button to show/hide at the start.

@Burndog Steve,

The video on your site is not working on iPad . When you click to play it does nothing, also stays with the blurred image…

7

I’ve run out of spanners so I’m gonna throw a hammer this time.

@Burndog Just to add that on IOS (mobiles) video behaves differently. It will not autoplay so you must be able to see / touch the big play button or be able to access the controls. So, a little redesign would be needed for mobile devices.

1 Like
8

Agreed, I would forget about displaying any text or button for iOS. Because you always have a play button splat in the middle of the video and you then have them open in the built in player where you have to use it’s controls.