Changing appearance of persistent buttons

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.

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.

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


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


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.


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

	:root {
  --playPause-content: "PlayPause";

	content: var(--playPause-content);

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":'--playPause-content', '\"Play\"');
	  case "scene2" :'--playPause-content', '\"Pause\"');
	  case  "scene3":
	 '--playPause-content', '\"Play\"');

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'--playPause-content', 'Pink');

The value would be a colour of Pink

So if you do not escape quote text i.e Play'--playPause-content', 'Play');

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


Correctly done'--playPause-content', '\"Play\"'); (38.3 KB)

1 Like