PDA

View Full Version : Universal Countdown Script Problem



vern17
10-13-2006, 07:20 AM
1) Script Title: Universal Countdown Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex6/universalcountdown.htm

3) Describe problem: I have pasted this script exactly like it describes and have not changed anything. It shows up on the page, but the time and countdown numbers just show 'NaN'. How do I correct this so that the time is actually showing up and coming from the server like it's supposed to be?

jscheuer1
10-13-2006, 09:06 AM
From the Demo:
Requirement: The page running this script must either be PHP, SSI (server side includes), or ASP enabled, as the script needs to rely on one of these technologies to access your server's time.

Do you have one of these available and did you give your page the appropriate extension?

vern17
10-13-2006, 03:53 PM
So just having http://www.mydomain.com/forum as the page would not be able to access the server's time? I also tried the page by adding /index.php and it still doesn't work. My website is run with php, so I'm lost on this one. Any ideas?

Also, how would I change this script so the days, hours, etc. labels are under the digits on the countdown as opposed to on the right of them?

jscheuer1
10-13-2006, 04:19 PM
As long as the extension of the page at that address is .php and PHP is active for that page, it should be OK. However, that brings up another consideration. The script itself must be configured to use whatever type of server side language you have chosen to use for it. Did you do this?

Also, if not using debug, the syntax is like so:


var launchdate=new cdLocalTime("cdcontainer", "server-php", 0, "April 23, 2010 15:53:00")
launchdate.displaycountdown("days", formatresults2)

With the:

, "debugmode"

including the comma removed entirely.

As for the second part of your question, yes. But, let's get this working first.

vern17
10-13-2006, 04:49 PM
yes, i have changed the script so that it is configured the way it should be, but it still doesn't work. i have debug mode on for now to make sure the time is correct, but I don't have any time showing like I mentioned before. any other ideas?

vern17
10-13-2006, 04:54 PM
i just went to my vBulletin control panel and noticed this:

Server Type: Linux
Web Server: Apache (cgi)

could this be the problem?

jscheuer1
10-13-2006, 05:19 PM
If other PHP is working on the page, no.

vern17
10-13-2006, 05:21 PM
how do i fix this then and make it work?

jscheuer1
10-13-2006, 05:29 PM
Is other PHP working on the page?

vern17
10-13-2006, 05:44 PM
yes, everything is working but this.

jscheuer1
10-13-2006, 05:54 PM
As a test then, save the below as test.php and upload it to your server and see what happens:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

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

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

.count_table {
float:left;
background-color: #CFEAFE;
padding:3px;
}

.count_table td {
padding: 0 3px;
text-align:center;
}

</style>

<script 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
}

//3) Display countdown using plain text
function formatresults3(){
if (this.timesup==false){//if target date/time not yet met
var displaystring="<table class='count_table'><tr><td>"+arguments[0]+"</td><td>"+arguments[1]+"</td><td>"+arguments[2]+"</td><td>"+arguments[3]+"</td></tr><tr> <td>days</td><td>hours</td> <td>minutes</td> <td>seconds</td></tr></table><br>&nbsp; left until launch time<span style='clear:left;'></span>"
}
else{ //else if target date/time met
var displaystring="Launch time!"
}
return displaystring
}
</script>
</head>
<body>
<div 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 23, 2010 15:53:00")
launchdate.displaycountdown("days", formatresults3)
</script>
</body>
</html>

vern17
10-13-2006, 06:05 PM
ok, i ran http://www.mydomainname.com/test.php and this is what came out:

/*********************************************** * Universal Countdown script- &#169; 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")? 'October 13, 2006 14:00:18' : (servermode=="server-ssi")? '' : '

it doesn't look like it completed the script. would it be that my server doesn't allow this script?

jscheuer1
10-13-2006, 06:22 PM
Could be that your server is adding code to the page or perhaps it is your HTML/PHP editor. If you provide a link to the actual test page, I may be able to tell.

vern17
10-13-2006, 06:25 PM
here you go:

http://www.fogpog.com/test.php

vern17
10-13-2006, 06:34 PM
would it be that my host (powweb.com) doesn't allow scripts that rely on their server time?

jscheuer1
10-13-2006, 06:48 PM
The time is being resolved, there is some other problem.

OK, I see what you mean. Either you didn't paste the entire script into the test.php test page (unlikely but, had to ask) or there is something about this line that is throwing the server into server-side mode:


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() %>'

From looking at the output, I'd vote for the red part. Since that isn't required for PHP (it's asp) it could be made an empty string:


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" -->' : ''

and that should take care of it. Perhaps your server does asp as well as PHP or is just sensitive to <% for some reason. Give it a shot, it should at least give a different result.

vern17
10-13-2006, 07:07 PM
ok, the test.php works now, but when I apply what you said to my site, nothing changes. any other ideas?

jscheuer1
10-13-2006, 07:15 PM
Perhaps you made some typo or otherwise mangled the script's insertion into your page. Or, there could be other problems. I would need a link to the problem page to help much more. I did correct the script's style section a little and added code to get the formatting you were talking about. Perhaps if you insert the entire test.php code into your main page (in the appropriate places), that would do it.

vern17
10-13-2006, 07:33 PM
i put the script in right the first time, but to be sure i went ahead and put the code in that you gave me (with the 'now' function removed like you said) and added the "debugmode" that you took out to keep an eye on things. the script itself comes up in Opera (but still 'NaN' for the time) and now the script doesn't even show up in IE when you add 'index.php'. Here is the site. Hope you can help me figure this out. I really appreciate the help so far.

http://www.fogpog.com/forum/

jscheuer1
10-13-2006, 09:56 PM
Well, that shows that the script is working in Opera but that the time isn't being resolved and that there may be some additional script conflict in IE. One reason that the time isn't being resolved might be that the page is configured not to accept <? as the designation to start PHP interpretation. This can be done in a header that I cannot see once the page is served to my browser. However, you could check by looking at the raw code that produces this:


<div class="smallfont" align="center">All times are GMT -5. The time now is <span class="time">04:19 PM</span>.</div>

Which appears at the bottom of your page like so:

All times are GMT -5. The time now is 04:50 PM.

If I could see the raw code for that, it should tell me what the page requires to turn on PHP interpretation.

vern17
10-13-2006, 10:21 PM
ok, hope i can help here. this is the code the line you mentioned comes from:


<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>


when I looked up the varname that is between the DIV tags, this is the text that is supplied:


All times are GMT{1}. The time now is <span class="time">{2}</span>.

now i'm not sure where to go from here and how to provide you with anything more. got any ideas?

jscheuer1
10-13-2006, 10:33 PM
All this is leading me to believe that your server is also asp/VBasic capable and that this is what your forum package is using. Try restoring the:

<%= Now() %>

and using:


var launchdate=new cdLocalTime("cdcontainer", "server-asp", 0, "April 23, 2010 15:53:00")

Remove the php extension from the page.

Added Later:

If worse comes to worse, we've already seen that this can work on a stand-alone .php page, so we could include it wherever you want it via an iframe.

vern17
10-13-2006, 10:46 PM
i don't know why i would do that, since my forum package is php, not asp. i tried it anyway and it didn't work. anything else?

jscheuer1
10-13-2006, 11:10 PM
I think you will need help from folks familiar with the forum you are using as to why it isn't resolving:


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" -->' : ''

Or, you could use an iframe to show the test.php page that we got working onto your main page(s).

vern17
10-13-2006, 11:15 PM
how would i go about using an iframe for it?

jscheuer1
10-14-2006, 06:22 AM
Something like:


<iframe src="test.php" width="200" height="90" scrolling="no" frameborder="0"></iframe>

Just put it in your page(s) where you want the countdown to appear. On the page with the script on it (test.php - you can call it whatever you like and include a path to it if it is in a different directory) it would probably be good to add this to its style section:


body {
margin:0;
padding:0;
overflow:hidden;
}

Some further minor tweaking to the page, the iframe and/or the script might be desirable.

vern17
10-15-2006, 04:18 PM
ok, i put the script in with an iframe like you mentioned and tweaked it a bit and it works great. the only problem is it shows up in IE like it's supposed to but not Opera (and I haven't tried it in any other browser like FireFox so I'm not sure about how it looks there). Is there a way I can fix this so that it shows up right in all browsers?

jscheuer1
10-15-2006, 04:53 PM
For starters, this is invalid but, apparently IE doesn't mind:


font: bold 8 pt verdana;

It should be:


font: bold 8pt verdana;

If that takes care of it, you can stop there but, using verdana is a poor choice though. If it is unavailable - fall back fonts will have different default sizing, throwing off the layout:


font: bold 8pt arial, sans-serif;

is a much safer choice. The point size would probably need to be adjusted.

You can stop there but, a nice touch is to use a % for the font size and em's for the dimensions of the iframe and table (style, not attributes, must be used to have em dimensions). This allows the layout to resize with user initiated font size changes. However, unless your entire page (or at least the critical for layout portions of it) are done in this manner, it isn't worth worrying about for one feature.