Click to Turn Display On & Off?

Using JavaScript with Hype
1

I have a really simple problem (I hope). There is a photo with “dangers” you have to find. The user clicks on items in the photo to guess what the “dangers” are in the photo. If they click correctly the danger is highlighted with blue. So the blue highlight is a .PNG that has Display set to Hidden and when you click it Display should change to Visible. How do I do that without having to make a different Timeline for each element? There are 6 of them. Thanks!

2

Hi gthroop!

Skip the timeline - use code.

Example:

When the invisible (opacity ‘0’) “correct danger” element is clicked on its opacity is changed from ‘0’ to ‘.3’ (30%) and animates over 2.0 seconds using an ‘easeout’ animation transition.

This function is activated by a mouse click on the invisible PNG element (please see attached example “RevealDemo.hype.zip”). You do not need to use element IDs in this scenario.

function reveal(hype document, element, event) {
    	hypeDocument.setElementProperty(element, 'opacity', .3, 2.0, 'easeout')
}

RevealDemo.hype.zip (19.9 KB)

1 Like
3

cool - and how do i toggle this? if, else doesn´t work for me?

4 
var theElement = hypeDocument.getElementById('theElement');
	 
  hypeDocument.setElementProperty(theElement, 'opacity',(hypeDocument.getElementProperty(theElement, 'opacity') ? 0 : 0.3))
2 Likes
5

thank you!:flushed:

6

Nice use of the ternary operator Mark!

1 Like