PDA

View Full Version : Universal Countdown Script



Pete2008
08-07-2008, 05:30 PM
http://www.dynamicdrive.com/dynamicindex6/universalcountdown.htm

Hi,

I'm having troubles using this Universal Countdown Script. Just copied it and it always says (in Debug Mode): "Current Local Time: Invalid Date".
I've checked the code repeatedly and cannot find differences.
What can be the problem?

Thanks, Pete2008

jscheuer1
08-07-2008, 06:21 PM
Please post a link to the page on your site that contains the problematic code so we can check it out.

This script does require availability and configuration of the server side date and time as per the instructions on the demo page. The page must have the server side language extension (.php, .asp, etc.) - also as mentioned on the demo page. And (not mentioned on the demo page), if your server doesn't use the standard US English format for dates and/or times, some tweaking of the code may be required.

It is to be understood that, unless your computer is a server or has a localhost server with one of the server side languages this script can use, the page will only work on a live server that does.

Pete2008
08-13-2008, 01:07 PM
Thanks jscheuer1!

You pinpoint exactly my problem. I copy the code from DynamicDrive and put the html page to my php-enabled webserver (I use other php-script there succesfully).
But no, it always says (in Debug Mode): "Current Local Time: Invalid Date".
The only thing I can think of, is your remark on changing the format for dates and/or times. If I'm correct please help me:
In de HEAD section of the HTML-file I think I need to change (the bold red part):
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() %>'

Am I correct? If so, where can I find the meaning of the variables. If not, what do I need to change?

The link to my example is http://www.datspreektvanzelf.nl/ (please click 'test' in the upper left corner)

Thanks in advance for your time!
Pete2008

jscheuer1
08-13-2008, 01:55 PM
Well, that would be the spot where a change would be required, if you were using the script on a .php page, and the format was different than expected. We may still need to change that format. However, your test page isn't being parsed by the server as PHP. First change the name of the page to:

COUNTDOWN-TEST.php

That might be all you need to do. If you still need help on formating the date/time, see:

http://us3.php.net/manual/en/function.date.php

Or, give me a link to the .php version of your test page, there in its generated source code I will see what the server is outputting.

Pete2008
08-13-2008, 11:38 PM
Again: thanks jscheuer1.
As you can see now renaming tot php worked. But this was only the testfile: the only code in it is this (original) script according to the manual on DynamicDrive (head-part and body-part). Do I need to rename every html-file where I want to use this countdown script? That's not a normal procedure isn't it?
I don't know what you mean by giving you a link to the php-version of the testfile, but you can view and copy the code when you're on that page.
Thanks for your patience and willingness to help.

Pete2008

jscheuer1
08-14-2008, 12:05 AM
If you want to use this combo client-server side script on a number of pages, yes - each page that it is on would need the the .php extension. Or you could configure (if you have the access to your server to do so) all .html and .htm pages to be parsed as PHP. An alternative to that would be to make the main script external and give it the .php extension. Name it - say, countdown.php. If you do that, you could use an external script tag on each .htm or .html page you wish to use it on. This tag would reference the external file by its path and filename. If the external file is in the root of your domain, a network path of / would do:


<script type="text/javascript" src="/countdown.php">

/***********************************************
* 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>

The above would go in the head of your page(s) that use this script, and substitute for the script section of Step 1 from the demo page.

The countdown.php file should look basically like so (you can still customize the various formatresults functions if you choose to do so):


<?php
header('Content-type: text/javascript');
?>

/***********************************************
* 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.
***********************************************/

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 style='background-color: #CFEAFE'>"+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds</span> left until launch time"
}
else{ //else if target date/time met
var displaystring="Launch time!"
}
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
}


The part of the script that goes in the body of the page(s) would remain unchanged.