When the countdown is done (JS)


#1

HI , I’d like to use the countdown timer code snippet written by Jonathan, published here:

The countdown timer is for an upcoming Fair event. I am just getting my feet wet with JavaScript, so I am asking for a helping hand from JavaScript gurus of this amazing HypeForum Community.

The challenge I have with this countdown timer is to get some js code that would hide the timer element when the countdown is done (the value is 0)
and would show some other scene element instead (e.g Picture or Text: The Fair is open! Welcome to the Fair!).
This is my first question post ever and I hope it lands in the right category (JavaScript category) to get attention. Hoping somebody knows a solution !


#3

Hi Ed!

Here is a demo that follows along with your request - based on Jonathan’s example:
FlexibleCountdownTimer_JHSv1.hype.zip (24.2 KB)

The “Counter Timer Example 1” and “Fair Open” element names in the “Timeline” layers are given an unique ID in the “Identity Inspector”:

Fig.1 - “Fair Open” text field and matching “Unique Element ID” field




In the code below (found in the “Head HTML” tab of Hype’s interface) the element IDs mentioned above are assigned to a variable (var) :

var timerDisplay = document.getElementById('timerDiv'); var fairBanner = document.getElementById('fairOpen');

When the timer hits zero the element group named “Counter Timer Example 1” (timerDisplay) is hidden (display = “none”); and the hidden text element “Fair Open” (fairBanner) is made visible (display = “block”).

timerDisplay.style.display = "none";
fairBanner.style.display = "block";

Fig. 2 - Code in the “Head HTML” section


#4

Hooray for Jim! You saved my day with your answer. For a non-JavaScript speaker like me it is a very BIG thing. Thank you so much for taking time and explaining who-is-who in this JavaScript function snippet, otherwise I would be LOST in this jungle of code language. But now I can finally layout the visuals for the Fair Countdown in Hype and present the complete package to my client.


#5

Hi Ed!

Thank You for your appreciative note - glad I could help.