Changing appearance of persistent buttons

[beemerbiker]

I am building a Hype slide presentation with audio narration. I need three buttons: PAUSE/PLAY (to pause/resume both video animation and audio narration), NEXT SLIDE (next scene in Hype) and PREVIOUS SLIDE. The audio narrations I can deal with by loading an array of Howls in the "On prepare to display" slot, and I was hoping to accomplish as much as possible by repeatedly duplicating the first slide/scene and editing the active content.

I appreciate that, by using buttons that are persistent symbols, I can make the NEXT SLIDE and PREVIOUS SLIDE buttons automatically copy over from one slide to the next and that is great but, for the PAUSE/PLAY button, I need the displayed image of the button to flip according to whether its next action will be PAUSE or PLAY. I would normally do that inside a Pause/Play JS function with a style.display based on a getElementById. But how can I do that without having to write a different JS function for each slide? The problem is this button loses its unique ID in moving from slide to slide.

Any advice much appreciated.

[MarkHunte]

If you can post a small example project that would help understand what you are doing.

But since you mention id.

Target by class name instead.

[beemerbiker]

Thanks, Mark. Great tip.

I have tried a quick experimental project along the lines you suggest.

In the JS function called by tapping the button, I obtained the current scene object dynamically with

hypeDocument.getElementById(hypeDocument.currentSceneId());

Then I obtained the unique persistent button object within that scene to which I had assigned the CSS class .ppBut with

querySelector('.ppBut');

I was then in a position to fiddle with the innards of the button object, which is what I want.

AND THE SAME JS FUNCTION WORKED FOR ALL SCENES, so no repeated functions are needed.

I still have to apply it to the actual case, but I'm confident it will work.

Many thanks.

[MarkHunte]

Glad you found a solution.

There are probably many ways of doing what you want.

You can even set up a custom css var and target that in your code thus saving having to Digg around for the actual elements.

In the Head file

	<style>
	
	:root {
  --playPause-content: "PlayPause";
}
</style>

<style>
	.playPause::before{
	
	
	content: var(--playPause-content);
	
	
	}
	
	 
	</style>

The button uses the class name playPause

And its content value id what ever the custom var value --playPause-content is.

In your JS you change the custom var value --playPause-content to what ever you need at the time.

	let root = document.documentElement;
 	
	let sceneName = hypeDocument.currentSceneName()
	 
	switch(sceneName) {
	
	  case "scane1":
			root.style.setProperty('--playPause-content', '\"Play\"');
 
	 		break;
	  case "scene2" :
	  		root.style.setProperty('--playPause-content', '\"Pause\"');
	    	break;
	  case  "scene3":
	   
	     	root.style.setProperty('--playPause-content', '\"Play\"');
	     	break;
}

side bar:

Note the \". escaping of the quote in the text values. This is a must for the text to work, custom vars can be anything so you need to include quotes.

of example if you wanted to use the text value Pink and did
root.style.setProperty('--playPause-content', 'Pink');

The value would be a colour of Pink

---

So if you do not escape quote text i.e Play

root.style.setProperty('--playPause-content', 'Play');

you will get the text play as the value but not quoted as needed.

--

Correctly done

root.style.setProperty('--playPause-content', '\"Play\"');

playPauseCssVar.hype.zip (38.3 KB)