Countdown NaN problem, but only for IE.

**Bushdoctor** · 08-03-2007, 03:14 AM

1) Dynamic Countdown Script.

2) http://www.dynamicdrive.com/dynamici...dhtmlcount.htm

Good day,

I have adjusted the Dynamic Countdown Script, but aparantly have made a mistake
because in IE the page shows no calculated dates, times, etc but instead the letters NaN.
My adjustments do seem to work on most other browsers such as Firefox and Opera.

This is the website where the script is running. It's under construction.
Please click the Enter button to see the countdown timer.
Http://deloterij.googlepages.com/

Here is the html i've used:

Code:

<HTML>
<HEAD>
<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>
<center>
<IMG SRC="loterij-header2.jpg" ALT="">
<br>
<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring="<span class='lcdstyle'> <font size=3>Nog:</font> "+arguments[0]+" <sup>dagen</sup> "+arguments[1]+" <sup>uren</sup> "+arguments[2]+" <sup>min</sup> "+arguments[3]+" <sup>sec</sup> <font size=3>tot aan de trekking.</font></span> "
}
else{ //else if target date/time met
var displaystring="<span class='lcdstyle'> De trekking heeft plaatsgevonden.<br> De winnende lotnummers worden zsm gepost.</span> "
}
return displaystring
}

</script>

</HEAD>

<BODY BACKGROUND="" BGCOLOR="#000000" TEXT="#ffffff" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "August 31, 2007 24:00:00")
futuredate.displaycountdown("days", formatresults)

</script>
</BODY>
</HTML>

Help is much appreciated since my guess is that most of my visitors use IE.
Greets and thanks,
Bushdoctor.

**Bushdoctor** · 08-03-2007, 03:26 AM

Hm. I believe a friend solved the problem for me while I was posting the above.
He found out that IE has a problem with the 24:00:00 time setting that I've used.
He suggested to substract a minute, or use 0:00:00 instead.
The latter would make it go off by a day which could be corrected by adding a day in the days-settings.
(With the 0:00:00 setting, it ends a day too early).

Still I'm curious if this was the 'official' solution.
Reactions are welcome.
Greets,
Doc.

**jscheuer1** · 08-03-2007, 03:51 AM

Yep. That's absolutely right.

Thread: Countdown NaN problem, but only for IE.

Thread Tools

Search Thread

Countdown NaN problem, but only for IE.

Bookmarks

Bookmarks

Posting Permissions