View Full Version : Dynamic Countdown Script

03-02-2010, 11:16 PM
Morning all,

I've been using the Dynamic Countdown script, which i find awesome for what I need.


There is one instance however where I have the countdown displaying in a div, and i need to reset/change to countdown time for that div.

e.g The page loads and the timer displays with the Countdown date of;
March 14, 2010 20:00:00
I then click a button and this time/date stamp needs to change to say;
May 16, 2010 20:00:00

the problem i have is that it now displays both cdtime functions in that one div tag. rotating between both timers.

Is there anyway i can 'get' the current function and change the variable? or can i kill the current timer and replace it with my new one.

Not heaps familiar with Javascript so not sure how to do this. With vbScript i would set the object to nothing and create a new one.

Any help would be greatly appreciated.


03-03-2010, 04:54 AM
Your best bet might be to take advantage of this script's ability to display more than one countdown. If you follow the instructions on the demo page exactly, you will have two countdowns. Configure each as you want it to be as far as formatting and date go, but set one to be display none (example using the code from the demo page, addition highlighted):

<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2" style="display: none;"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)


Then have your button simply toggle the display value of your two countdowns:

<input type="button"
onclick="var c1 = document.getElementById('countdowncontainer').style,
c2 = document.getElementById('countdowncontainer2').style;
c1.display = c1.display === 'none'? 'block' : 'none';
c2.display = c2.display === 'none'? 'block' : 'none';"
value="Toggle Dates">