Javascript countdown clocks using HTML iframe

iframe

(Nick ) #1

Thought the group might like this.
Simple countdown clock Hype Recipe using the inner HTML widget within Hype.

Enjoy, restyle tear apart and re-use!

Nick
countdown timer.hype.zip (143.7 KB)


How easily create an animated number counter?
Countdown Timer for an animation built with Tumult hype
(Mark Hunte) #2

Hi Nick really like the idea.

Here is where I am at with it so far. Its a bit organic in how I put it together. But was fun playing with it.

I have taken it out of the widget and put the main code in the head html. Not ideal as that does give a bit of an headache with some access but it is working how I got it. The code can be place in a .js file but it is easier to edit in the head.

I will play some more when I get some time. I have called this v2 more for my reference.

Thanks for the great idea.

(update fixed a couple of bugs found shortly after first posting)

countdown timer_v2.hype.zip (53.2 KB)


(Nick ) #3

Glad you liked it!
I like the idea of posting “recipes” it is a great way to kick start creativity :slight_smile:


(Greg) #4

Here’s a javascript to get the current day of the week…

var d=new Date();
var weekday=new Array(7);
weekday[0]=“Sunday”;
weekday[1]=“Monday”;
weekday[2]=“Tuesday”;
weekday[3]=“Wednesday”;
weekday[4]=“Thursday”;
weekday[5]=“Friday”;
weekday[6]=“Saturday”;

document.getElementById(“day”).innerHTML=("Today is " + weekday[d.getDay()]);


(Nick ) #5

Awesome Greg!!
@Daniel, @jonathan
We should have a category for Javascript Recipes and challenges on the forums.
As much as I am a Hype Fanatic. The documentation and resources for learning how to integrate javascript into a Hype document is a little on the slim side.

I have found that while there are several sites that offer javascript lessons and advice they really speak to code warriors rather than visual learners.
Since many folks that are gravitating toward Hype are designers, illustrators and animators there will be several levels of coding experience.
With Hype opening up a great avenue for some really solid content creation let’s capitalize on how to teach using examples, and learning challenges.

Nick


#6

Love this code and am using it as we speak.

The only thing I’ve ben trying to figure out is how to have the scene change once the timer gets to zero. I tried using a timeline action, but it never seems to go on exactly zero. Sometimes it’s 20 seconds early, or 2 seconds late.

Anyone have any suggestions on how to get the scene to change from inside the html widget?


(Nick ) #7

Please upload your hype document and we will take a look at what is going on.
Thanks,
Nick


(Mark Hunte) #8

Here is a new take on this.

It uses a Timeline as the timing. The timeline has a Jump to scene right at 00:00 seconds and a pause at 20.00mins ( adjust to where you want it.

The 20min timeline action is so the timeline has duration if not it will never start. ( as far as I found)

The start timer button fires a JS similar to the old one but it uses the timeline current time.

I will be honest , this is bit of a hack as I am rushing out the door so hopefully not too many bugs… :smile:

newTimer.hypetemplate.zip (26.9 KB)


#9

A post was split to a new topic: Recreating a Countdown Clock in Hype


(david legg) #10

can I start and stop the html widget in your timer with button click?
I’m obviously new at this.
thanks Dave


(Nick ) #11

This one should help

Continuing the discussion from Recreating a Countdown Clock in Hype:


(david legg) #12

Thanks. Just what I needed.