When the countdown is done (JS)

[Ed_Sager]

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

A Flexible Countdown Timer

Creating a countdown timer clock is a fairly common task, and often used in timed promotions. There’s a lot of solutions on the internet and even on these forums. I wanted to try creating one that would give content creators a lot of flexibility with the goal being able to use your own styling on the various time components. Here’s my solution for a flexible countdown timer. You can see it in action with this document: FlexibleCountdownTimer.hype.zip (65.8 KB) First, copy this code to the …

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 !

[JimScott]

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

[Ed_Sager]

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.

[JimScott]

Hi Ed!

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

[tumulthenk]

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.

[MaxZieb (Loves Hype)]

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:

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

[tumulthenk]

Dear Max Zieb,
thanks for the option offered.