Show/Hide multiple elements on same page

[Slinky82 (Sarah)]

Hi DBear, Thanks so much for these uploaded file… I’m new to Hype and trying replicate what you’ve done with the timeline sample in this example.

How did you change the inner HTML text to be different on each timeline? Everytime I change it in the document I’m working on, it seems to be reflected across all the different timelines?

[JimScott]

@Slinky82

I’m going to step in here for a second or so… (referencing @DBear’s example: “changeTextBoxOnClick.hype” a few posts above.)

Each timeline (“reveal1”, “reveal2”, “reveal3”) has its own “innerHTML” property for the “Description” text element. Please see “Fig.1” below.

Note that the “Main Timeline” does not have the “innerHTML” property set for the “Description” element.

Clicking on a button in @DBear’s example triggers the corresponding timeline.
(e.g. “Button 1” plays timeline “reveal1”.)

Fig.1

[Slinky82 (Sarah)]

Thanks Jim! Will you look at that - I hadn’t even thought to look in that section - a whole new world of possibilities has opened up!!

[MaxZieb (Loves Hype)]

You can avoid all the problems using classes instead of IDs because they can be reused across Alle layouts and scenes without changing the ID all the time. ID's have the downside that they have to be unique across the whole page ... and hype even though it has scenes lives on only one page only .

Have a look at hypeDocument.setInnerHtmlByClass

Extend Tumult Hype with JavaScript: hypeDocument.extensions

↑ extension index hypeDocument.setInnerHtmlByClass Sets all the all elements of a given class to the content one provides. Usefull to update content across scenes and layouts all at once. Elements that want to subscribe to content updates only need to be assigned the associated class Reasons for using class based targeting over ID based targeting: Hype has a unique approach when it comes to responsive layouts. As with scenes themselves it keeps them in own HTML braches. Meaning when you ha…

[Slinky82 (Sarah)]

Thanks Max, I’ll take a look!

[AEVolucion (Angel Velazquez)]

Getting back into things and this is exactly what I was looking for. Thank you

[AEVolucion (Angel Velazquez)]

Hey @DBear I figured out how to change text. How about adding an image as well?

[MaxZieb (Loves Hype)]

hypeDocument.setElementProperty would be the command using the background-image option. Have a look at

Tumult Hype Documentation

[AEVolucion (Angel Velazquez)]

Thank you @MaxZieb I do want to learn JS and this might help. I'll build a second version when I get it.

[MaxZieb (Loves Hype)]

I just saw that in the documentation they don't show the background-image option. That seems to be an oversight from Tumult. In the app on the other hand the documentation is complete:

[jonathan (Jonathan Deutsch)]

Thanks, fixed!

[AEVolucion (Angel Velazquez)]

Thanks again @MaxZieb I do want to combine what @DBear did here with his JS code but also trigger another element to appear by simply adding a small amount of code is possible. Kind of like this: Hide and show images (or other) by javascript - Using JavaScript with Hype - Tumult Forums

[AEVolucion (Angel Velazquez)]

@MaxZieb @DBear Here is an idea of what I had in mind. Click on the 3 colors to see what I mean. damon-demo.zip (509.8 KB)

[MaxZieb (Loves Hype)]

Rewritten to use additional attributes:
damon-demo.hype.zip (538,2 KB)

[AEVolucion (Angel Velazquez)]

@MaxZieb This looks so much simpler. And I see you made the ID's to Classes. Hype is really powerful. Would this part of Javascript be more of Event Listeners? Gonna study this! Thank you amigo.