That because the layout elements can not share the same id, so the mobile one is never controlled by the code.
Give me a min…
A little longer than a minute…
So just to explain your problem.
When you create a layout, you are effectively creating a new scene. The elements in the scenes/layouts just like any other normal scene must have unique ids.
So with your new layout only the website element has an id and you cannot give the same one to the mobile layout.
We need to code around this problem.
Lets name the mobile element’s id mobileCounter
And name the Website’s id websiteCounter
Now with the Mobil layout selected, Go to the Scene inspector.
1, Change the On Layout Load 'Run Javascript ’ Action to Trigger custom Behavior type in the name : mobileCounter in the text field.
2, Still in the Scene inspector. scroll down to Custom Behaviors** and Add a new Custom Behavior.
3, Name the Custom Behaviour mobileCounter and set its Action to 'Run Javascript ’ and select the runTimer().
Repeat the steps above for the web site layout and use the name websiteCounter.
Now in the runTimer().
At the very top of the function ( as first line) add this code.
window.customBehaviorName = event.customBehaviorName;
Then change the line:
hypeDocument.getElementById('countTimer2').innerHTML = days +':' + hours+':' + minutes +':' + seconds;
to
hypeDocument.getElementById(window.customBehaviorName).innerHTML = days +':' + hours+':' + minutes +':' + seconds;
Hopefully that should be it and I have not missed anything out…
This is why I wanted the iframe code responsive
Then would solve for me all these complex processes. Every time I’m stuck trial and error.
Anyway, thank you very much for taking the time to do so.
I appreciate it. (:
thank you friend.
Hi Marc! your countdown is great, but I can’t set the correct time.
No problem with the days but the HH:MM:SS always start from 23:59:00 going down…
I need tu set days and hours, like 03/18/2017 at 18:00 GTM +1.00
I fallow the semple here but I can’t…
Can u help me please?
It’s Mark.
Not sure which one you are using so will assume you mean Time to_countdown timer_v2.hypetemplate.zip
It has been a while since I played with this but I think you can just adjust the picker time when the run timer button is clicked.
In the runTimer() function just after the two lines at the top :
var today = new Date();
_ window.d1 = $(’#datepicker’).datepicker(‘getDate’_)
Add these two lines
window.d1.setHours(18);
window.d1.setMinutes(00);
1 Like
PERFECT!!!
Thank u so much!!!
1 Like
Hi Nick
Thanks for your example it helps a lot.
Can I just ask you, how can I get in the datepicker the date+time. I d’ like to be able to choose the day and the time when countdown stops
THx
Philippe
Philippe,
Not sure I fully understand…
Do you want to count down from a specific date and time?
or
Do you want a user to enter a date and time and then the script will countdown from today’s date to that date and time?
Thanks,
Nick
Hi Nick
Thanks for your help.
I’m looking for a way to allow user to pick in a calendar a date and time and then the script will countdown from today’s date to that date and time the user selected.
The project contains also J-query plugins as j-query datetimepicker or flipclock. I also tried with those modules…and nothing
PS : To people using this project, it comes with J-query-3.2.1 library imported(local) and also with a local font imported as example. Hope it can helps.
TIMER-Hype_with_Jquery.zip (2.0 MB)
If you look near the top of this thread there is a version that does that. It should be enough to show you how to dod it.
Hi Mark
Every example I found in the Forum has the date+time in the countdown but not in the datepicker.
what I’m looking for is something like the screenshot
Thanks
Hi ,
It was a long time since I posted the post i linked to but I do seem to explain how to add the time.
I would think all you need to do is include the UI and pick up the time value from a users selection.
Then update time of the future date using the value
Seems to work.
On my version.
I added a new option form with times.
<form>
<select id="timepicker">
<option id="00:00" selected="">00:00</option>
<option id="01:00">01:00</option>
<option id="02:00">02:00</option>
<option id="03:00">03:00</option>
<option id="04:00">04:00</option>
<option id="05:00">05:00</option>
<option id="06:00">06:00</option>
<option id="07:00">07:00</option>
<option id="08:00">08:00</option>
<option id="09:00">09:00</option>
<option id="10:00">10:00</option>
<option id="11:00">11:00</option>
<option id="12:00">12:00</option>
<option id="13:00">13:00</option>
<option id="14:00">14:00</option>
<option id="15:00">15:00</option>
<option id="16:00">16:00</option>
<option id="17:00">17:00</option>
<option id="18:00">18:00</option>
<option id="19:00">19:00</option>
<option id="20:00">20:00</option>
<option id="21:00">21:00</option>
<option id="22:00">22:00</option>
<option id="23:00">23:00</option>
</select>
</form>
Then
at the top of the runTime();
window.timePicker = $('#timepicker').val().slice(0, 2);
and changed the timer to
window.countdownTimer = setInterval(function() {
runTime = true;
window.d1.setHours(window.timePicker );
pickedDate = window.d1;
secondPassed();
}, 1000);
This is all a quick look and adaption for you so you will have to work out any other changes/bugs…
Time to_countdown timer_v3.hype.zip (51.3 KB)
1 Like
Oh Wait do you mean all as one UI.
You probably would need to search for a jquey plugin.
Thanks Mark
Your reply respond 100% of the problem for me. I shows me where and how I have to go to have this function 
100 thanks
Ph
1 Like