Converting Universal Countdown Script to external .js

**Tygr** · 02-23-2008, 10:11 PM

Universal Countdown Script
http://www.dynamicdrive.com/dynamici...lcountdown.htm

I'm converting to an external js file, so I've taken all script code that should appear in the <head> tag and put it into a .js file and referenced it as an include file instead. This is a countdown that appears in the header of my website which is an include file pulled into all pages on the site. It's been working fine inline/embedded and I haven't changed any of the code other than moving it and referencing the new .js file but all that displays is:

NaN days NaN hours NaN minutes

Here's the pertinent code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/countdown.js">
/***********************************************
* Universal 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.
***********************************************/
</script>
</head>

and the external js file:

// JavaScript Document

function cdLocalTime(container, servermode, offsetMinutes, targetdate, debugmode){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.targetdate=new Date(targetdate)
this.debugmode=(typeof debugmode!="undefined")? 1 : 0
this.timesup=false
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
}

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

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

cdLocalTime.prototype.showresults=function(){
var thisobj=this
var debugstring=(this.debugmode)? "<p style=\"background-color: #FCD6D6; color: black; padding: 5px\"><big>Debug Mode on!</big><br /><b>Current Local time:</b> "+this.localtime.toLocaleString()+"<br />Verify this is the correct current local time, in other words, time zone of count down date.<br /><br /><b>Target Time:</b> "+this.targetdate.toLocaleString()+"<br />Verify this is the date/time you wish to count down to (should be a future date).</p>" : ""

var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=debugstring+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=debugstring+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 cdLocalTime.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 cdLocalTime.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

//1) Display countdown using plain text
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring="<span class='cdtext'>"+arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes</span>"
}
else{ //else if target date/time met
var displaystring="It's here!"
}
return displaystring
}

//2) Display countdown with a stylish LCD look, and display an alert on target date/time
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until launch time"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Launch time!") //Instead, perform a custom alert
}
return displaystring
}



and the inline/embedded code in the header include:

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="344"><a href="../index.php"><img align="right" id="logo" src="../includes/images/header/08logo.jpg" border="0" /></a></td>
      <td ><div class="cdcontainer" id="cdcontainer"></div>
	  <script type="text/javascript">
//cdLocalTime("ID_of_DIV_container", "server_mode", LocaltimeoffsetMinutes, "target_date", "opt_debug_mode")
//cdLocalTime.displaycountdown("base_unit", formatfunction_reference)

//Note: "launchdate" should be an arbitrary but unique variable for each instance of a countdown on your page:

var launchdate=new cdLocalTime("cdcontainer", "server-php", 0, "April 2, 2008 08:00:00")
launchdate.displaycountdown("days", formatresults)
</script></td>
          </tr>
        
  </table>

Any help would be appreciated.. I'm sure it's something really simple I'm missing.

Thanks.

Edit: Wrapped code in [code] tags.

**ddadmin** · 02-25-2008, 08:06 AM

The problem is that part of the code in the script is dynamically parsed by the server (ie: SSI, ASP etc) based on the extension of your pages. If you're saving the file as .js, the server won't know to parse that file. Try saving it with the extension of the server side language you're using instead, for example, countdown.php. See this tutorial for more info: http://www.javascriptkit.com/javatut...ernalphp.shtml

**Tygr** · 02-25-2008, 06:37 PM

Thanks for the feedback.. I'm sure that would work but that means I have to convert the entire script to php doesnt it? Because: Just changing the extension on the .js file doesnt fix it - in fact it caused it not to display anything at all. So I followed the 2 suggestions in the tutorial and added the <? and ?> at beginning and ending, added the Header info that tells the php file it's outputting javascript and then also went and added the echo command in the format results output section which I think it won't read because I believe php variables are in the form of $variable (meaning all variables would have to have this added I think). Again, here's a sample of the changed code in countdown.php:

<?
// JavaScript Document
Header("content-type: application/x-javascript");
function cdLocalTime(container, servermode, offsetMinutes, targetdate, debugmode){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '' : '<%= Now() %>'
this.localtime=this.serverdate=new Date(servertimestring)
this.targetdate=new Date(targetdate)
this.debugmode=(typeof debugmode!="undefined")? 1 : 0
this.timesup=false
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
}

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

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

cdLocalTime.prototype.showresults=function(){
var thisobj=this
var debugstring=(this.debugmode)? "<big>Debug Mode on!</big> Current Local time: "+this.localtime.toLocaleString()+" Verify this is the correct current local time, in other words, time zone of count down date. Target Time: "+this.targetdate.toLocaleString()+" Verify this is the date/time you wish to count down to (should be a future date)." : ""

var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=debugstring+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=debugstring+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 cdLocalTime.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 cdLocalTime.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

//1) Display countdown using plain text
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=""+arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes"
}
else{ //else if target date/time met
var displaystring="Mud Nationals is here!"
}
//return displaystring
echo "document.write( displaystring )";
}

//2) Display countdown with a stylish LCD look, and display an alert on target date/time
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring=""+arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until launch time"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Launch time!") //Instead, perform a custom alert
}
return displaystring
}
?>

**Tygr** · 02-25-2008, 07:07 PM

I can't believe this but again I think I resolved my own issue. (I have a habit of doing that)

So here's what I've done... let me know if you see any potential problems or issues with this. Any normal page references a separate header.php file as an include so that the same header is on all pages. This is also where the countdown appears. In order to make the countdown work I either had to have the Universal countdown script listed on all pages or have the header.php file have a normal xhtml layout with head and body tags (doesnt validate as proper xhtml).

Instead of converting the javascript to php or making this an external .js file that also wasn't working, this seems to be the simplest fix I've found so far...

In all pages on the site (that end in .php anyway) I can add this in the <head> tag:

<?php include ("../js/countdown.php"); ?>

countdown.php is just a simple include file that has the entire script code in it that would normally be in the <head> tag.

Now with this... the header include file can just be a normal simple include that also includes the necessary code to display the countdown without needing the <html><head><body> tags to hold the full countdown script since each indivdual page will automatically call the script as well with the php include listed above.

Any comments, questions, suggestions, feedback? See any major issues with doing it this way? Feedback is appreciated!

**ddadmin** · 02-25-2008, 10:14 PM

In all pages on the site (that end in .php anyway) I can add this in the <head> tag:

<?php include ("../js/countdown.php"); ?>

countdown.php is just a simple include file that has the entire script code in it that would normally be in the <head> tag.

Yep, that will work as well.

**tgruen** · 11-23-2008, 02:10 AM

I need this functionality in a CFM application. This is a very nice solution. Can the script be modified to take the time from a local variable?

I can get the server time with CFMX and create the date/time variable but I do not know how to get it into the script.

**ddadmin** · 11-23-2008, 08:45 AM

Tgruen:
In the future please start a new thread when asking your question. Regarding it, I assume you mean coldfusion? As long as your page is able to retrieve the current server time and output it at the time of the page's generation, it will work. The crucial line in the script is this:

Code:

var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'

If your pages are in ColdFusion, you should modify the above to something like:

Code:

var servertimestring='#cold fusion code here to generate complete current date and time'

I found this tutorial on generating the current date/time in ColdFusion.

Thread: Converting Universal Countdown Script to external .js

Thread Tools

Search Thread

Converting Universal Countdown Script to external .js

Coverting this to CFMX?

Bookmarks

Bookmarks

Posting Permissions