March 19, 2018, 5:26pm
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
March 19, 2018, 5:35pm
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.
revealOverlayedElements.zip (72.9 KB)
@petesavva it's easier to show with an example
March 19, 2018, 5:37pm
Thank you Sir. Much appreciated.
March 20, 2018, 4:06am
is it possible to make the overlay that’s visible disappear when the new button is pressed? (in lieu of pressing hide)
October 10, 2018, 4:16am
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?
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”.)
October 10, 2018, 5:29am
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!!
October 10, 2018, 8:37am
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
↑ extension index
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…
October 11, 2018, 1:04am
Thanks Max, I’ll take a look!
May 24, 2021, 8:21pm
Getting back into things and this is exactly what I was looking for. Thank you
May 25, 2021, 4:44am
@DBear I figured out how to change text. How about adding an image as well?
May 25, 2021, 6:43am
hypeDocument.setElementProperty would be the command using the background-image option. Have a look at
May 25, 2021, 7:12am
@MaxZieb I do want to learn JS and this might help. I'll build a second version when I get it.
May 25, 2021, 8:49am
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:
May 25, 2021, 10:00pm
May 25, 2021, 10:06pm
@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)
May 25, 2021, 11:35pm
Rewritten to use additional attributes:
damon-demo.hype.zip (538,2 KB)
May 25, 2021, 11:50pm