Recreating a Countdown Clock in Hype

A little longer than a minute…

So just to explain your problem.

When you create a layout, you are effectively creating a new scene. The elements in the scenes/layouts just like any other normal scene must have unique ids.

So with your new layout only the website element has an id and you cannot give the same one to the mobile layout.
We need to code around this problem.

Lets name the mobile element’s id mobileCounter

And name the Website’s id websiteCounter

Now with the Mobil layout selected, Go to the Scene inspector.
1, Change the On Layout Load 'Run Javascript ’ Action to Trigger custom Behavior type in the name : mobileCounter in the text field.
2, Still in the Scene inspector. scroll down to Custom Behaviors** and Add a new Custom Behavior.

3, Name the Custom Behaviour mobileCounter and set its Action to 'Run Javascript ’ and select the runTimer().

Repeat the steps above for the web site layout and use the name websiteCounter.


Now in the runTimer().

At the very top of the function ( as first line) add this code.

 window.customBehaviorName = event.customBehaviorName;

Then change the line:

 hypeDocument.getElementById('countTimer2').innerHTML =  days +':' + hours+':' + minutes  +':' +  seconds; 

to

hypeDocument.getElementById(window.customBehaviorName).innerHTML =  days +':' + hours+':' + minutes  +':' +  seconds; 

Hopefully that should be it and I have not missed anything out…