When the countdown is done (JS)

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 !

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 Likes

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.

1 Like

Hi Ed!

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

Dear Jim Scot
i would like to use your flexible countdown timer.
When your timer is at zero, it gives the message "Fair open". What I'm actually looking for is the timer that opens a website with a specified URL after it reaches zero. Do you know if this is possible?
Thanks in advance for your reply.

This counter is based on the same code and includes an example to trigger a custom named behavior. In the original example @jonathan added a comment into the code to signify the place where to trigger an action. If you don't want to code you can just trigger a custom behavior and then use it in Hype to open an url using the IDE.

var deltaTimeInterval = targetTimeInterval - currentTimeInterval;
if(deltaTimeInterval < 0) {
	// do something when the timer is expired (add the following line)
	hypeDocument.triggerCustomBehaviorNamed('timerExpired');
	// default is to just set it to 0
	deltaTimeInterval = 0;
}

Then wire it up:
image

There is also a mechanical clock version of @jonathan example.

2 Likes

Dear Max Zieb,
thanks for the option offered.