Show/Hide multiple elements on same page

Using JavaScript with Hype
#17

The plan is to have an image on the left half of the screen. A map.
On the right half I would have a list of buttons.
When the user taps on a button from the list, the corresponding location on the map is highlighted.
I was planning on having a hidden rectangle overlaid on those locations so when the user taps the button on the list, the rectangle will appear on top of the location highlighting it at 50% opacity.

Sorry it’s hard to describe things when a 1 yr old and 3yr old are fighting :slight_smile: .

#18

No Worries. Having more information means the code may or may not have to change and it would be more specific to whatever the problem that needs to be solved. And also whether or not you need code.

UPDATE: revealOverlayedElements.zip (72.9 KB)

@petesavva it's easier to show with an example :wink:

1 Like
#19

Thank you Sir. Much appreciated.

#20

awesome!!! you rock!

1 Like
#21

is it possible to make the overlay that’s visible disappear when the new button is pressed? (in lieu of pressing hide)

Thanks again!

#22

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?

#23

@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
revalTimelines

1 Like
#24

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!!

1 Like
#25

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

1 Like
#26

Thanks Max, I’ll take a look!

#27

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

#28

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

#29

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

1 Like
#30

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

#31

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:

CleanShot 2021-05-25 at 10.48.32@2x
CleanShot 2021-05-25 at 10.48.32@2x2564×1834 475 KB

2 Likes
#32

Thanks, fixed!

#33

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

#34

@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)

#35

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

3 Likes
#36

@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.

1 Like