Recreating a Countdown Clock in Hype


(Eden) #1

Hello friends

I am looking html code allowing Time & Date Display back

Would appreciate help

Thank you.


Javascript countdown clocks using HTML iframe
(Nick ) #2

Posted this sometime back… hope it helps.
It would give you the basics and then there are several javascript tutorials out there so you can add to the timer function to display more or less.

countdown timer.hype.zip (143.7 KB)timer.hype.zip (143.7 KB)


(Eden) #3

Hey friend,
Thank you for your response … but unfortunately that’s not what I’m looking for.
It is indeed something I’ve checked my help before referral.
I’m looking for something simple … I just have to enter the date, then the time will be shown back to my date.
I would be happy if someone can share this file here.
Thank you.


(Mark Hunte) #4

Hi,

I had a lot of this code and bits and pieces in other projects. It has not taken to long to put together so here it is.

Time to_countdown timer_v2.hypetemplate.zip (51.2 KB)


Note : the datepicker’s time is returned as ‘00:00:00’ so the count down is midnight when the next day starts.

If you want it work as literal 24hours. i.e from 10pm today to 10pm tomorrow, add this to the setInterval call.

window.d1.setHours(today.getHours(), today.getMinutes(),today.getSeconds());

This gets the time from the today’s date and sets that as the time for the future date.

Shown in use here:

 window.countdownTimer = setInterval(function() {
  runTime = true;
  
  window.d1.setHours(today.getHours(), today.getMinutes(),today.getSeconds());
 
 secondPassed();
 
 }, 1000)

Javascript countdown clocks using HTML iframe
(Eden) #5

wow that’s exactly what I was looking for (:

There is an option to set the date in a different way …? Within the software hype? Rather than using the browser …?

So that the surfer can see the date of the event only.

Thank you very much


(Mark Hunte) #6

Just:
remove the onload function for the datepicker.
remove the date picker element.

in the runTimer() function code simply change the line:

window.d1 = $('#datepicker').datepicker('getDate') ;

to use a new date and set your date:

window.d1 = new Date('02/05/16');

Thats feb 2. in my format. Yours maybe reversed.
you can also do things like :
window.d1 = new Date('January 25 2016');

window.d1 = new Date('Fri Mar 25 2016 09:56:24 GMT+0100 (W. Europe Standard Time)');

Look at New Date() formats.


(Eden) #7

excellent (:

Thank you very much for your help.

I appreciate it a lot.


(Eden) #8

Hey,

I have another little question.
How do I make it to be responsive …?


(Mark Hunte) #9

In what way?


(Eden) #10

responsive design
Not out of the screen on mobile phones


(Mark Hunte) #11

responsive-layouts :smile:


(Eden) #12

I tried it there, but the timer is not working!


(Eden) #13

You have to iframe code …?


(Mark Hunte) #14

You really need to explain in more than one sentence to what you are trying to do, what changes you have made that stops the timer working and possibly post an example of where you are at.


(Eden) #15

I try to make it work look good even on mobile devices
But for some reason it does not work on mobile … remains action.
Attachment of work.Test_timer.hype.zip (56.1 KB)


(Mark Hunte) #16

I have not played too mush with this but try


(Eden) #17

Still does not work well on mobile.


(Mark Hunte) #18

Unfortunately I am some where where I cannot test using Hype reflect but doing the above seemed to work when viewed through Safari’s Developer -> Enter Responsive Design mode. menu.


(Mark Hunte) #19

Ok, Realised I could create a network between my MacBook and Devices to get Hype Reflect working .

My changes worked in Landscape on 5s and both orientations on iPad ,

Test_timer_leos.hypetemplate.zip (57.4 KB)


(Eden) #20

It does not work when it comes to resolution 320
He stuck to the text of loading and the clock will not start running.