Dynamic Countdown Script

[game]

1) Script Title: Dynamic Countdown Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...dhtmlcount.htm

3) Describe problem: I am trying to use this code on my forum for auctions where it will be updating database field for 3 days -> close = time() + 86400*3;

but when the topics are created it shows 3 hours +

example: 3 days 3 hours 59 minutes 28 seconds

[jscheuer1]

How are you formatting that? It needs to be in a format that the javascript Date() object can accept and correctly interpret. PHP's time() outputs seconds from 0hr 1/1/1970. The javascript Date() object requires either milliseconds as an unquoted number or a string in a few specific formats. Fortunately it also calculates from the same starting date (0hr 1/1/1970). The easiest would be milliseconds, so something like:

var futuredate=new cdtime("countdowncontainer", <?php echo $close; ?> * 1000)
futuredate.displaycountdown("days", formatresults)

That's assuming the PHP variable $close contains the generated close date in seconds.

If that doesn't do any better than what you have now, or is what you're already doing, there could be a time differential between the server and the computer viewing the page. In fact, if the two computers are in different timezones, it might not be accurate at all anyway.

Because of that, you should record the server side close date, but when the page loads, the present server side date should be subtracted from the close date and that amount of seconds used to create a target date in javascript, something like (again assuming $close is the close date expressed as seconds in the database):

var closeDate = new Date().getTime() + <?php echo $close - time(); ?> * 1000;
var futuredate=new cdtime("countdowncontainer", closeDate);
futuredate.displaycountdown("days", formatresults);

That way it should be accurate regardless of any time differentials between the server and the viewing computer.

[game]

$close = time() + 86400*3;

is what i am using to store to the database

and to get the data i am using:

<php>$data['timer'] = date('F d, Y H:i:s', $data['close_time']);</php>
<div id="countdowncontainer{$data['tid']}"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer{$data['tid']}", "{$data['timer']}")
futuredate.displaycountdown("days", formatresults)
</script>

is there a way to make it use the server side time and what is stored on the database and not the computer viewing like you stated?

[jscheuer1]

Yes, that's what my second example demonstrates.

However, the code in your post doesn't look like valid PHP, javascript or HTML to me. It looks like some kind of a hybrid.

But the principle is the same. You don't have to convert time to a string for javascript. You just have to convert it to milliseconds. If time() gives you seconds from 0hr 1/1/70 as it appears to since you are adding 3 x 86400 (3 days in seconds) for three days, then all you have to do at run time is (assuming I'm following your syntax correctly as demonstrated in your post):

<div id="countdowncontainer{$data['tid']}"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer{$data['tid']}", new Date().getTime() + {$data['close_time'] - time()} * 1000)
futuredate.displaycountdown("days", formatresults)
</script>

That way it will use the difference between the timestamp $data['close_time'] which I'm assuming is a UNIX style timestamp in seconds, the difference between it and the current time() timestamp of the server. That difference (which takes initial precedence because its on the server side):

{$data['close_time'] - time()}

is converted to milliseconds by the trailing:

 * 1000

which (being multiplication) takes precedence before it's added on the client side to the user's computer current date, resulting in a date/time on the user's computer that's exactly as far in the future on the user's system as the $data['close_time'] is in the future on the server.

So essentially it's using the server's time.

[game]

tried your code but then it wont show

[jscheuer1]

Please post a link to a demo with my code, so I can check it out.

But, as I said, I'm unfamiliar with that syntax. I tried to follow the same usage as shown in your post. If you or I made a typo, or I misunderstood what's allowed in the {} brackets and the syntax required in there, that would explain it. What CMS are you using?

Another approach you could take is trying to use the concept as I've explained it to you in my previous two posts, only with the correct syntax for your system.

Here's a working all javascript version of most of the concept that might assist you in that effort (requires no server side code):

<!DOCTYPE html>
<html>
<head>
<title>CountDown - 3 Days from Now - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<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=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until Thread Close: " + this.targetdate.toLocaleString()
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

</script>
</head>
<body>
<div id="countdowncontainer"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", new Date().getTime() + 86400 * 3000)
futuredate.displaycountdown("days", formatresults)

</script>
</body>
</html>

Notice in particular this line:

var futuredate=new cdtime("countdowncontainer", new Date().getTime() + 86400 * 3000)

In general terms, to make that work with server side code, it would be:

var futuredate=new cdtime("countdowncontainer", new Date().getTime() + [token to open server side code] [any required command like echo, if any in this context to get the following to become part of the document] [token for unquoted integer representing server side timestamp in seconds for closing time] - [token for unquoted integer representing current server side time in seconds][required terminus like ; if any] [token to close serverside code] * 1000)

Or, using valid PHP code, one could change:

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

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", new Date().getTime() + 86400 * 3000)
futuredate.displaycountdown("days", formatresults)

</script>

to:

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

<script type="text/javascript">
<?php
$close = time() + 86400 * 3;
?>
var futuredate=new cdtime("countdowncontainer", new Date().getTime() + <?php echo $close - time(); ?> * 1000)
futuredate.displaycountdown("days", formatresults)

</script>

Which also works, provided it's on a regular PHP enabled server.

[game]

url is: http://yahoo-inside.net/index.php?showforum=25

seems to be working with:

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

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", new Date().getTime() + 86400 * 3000)
futuredate.displaycountdown("days", formatresults)

</script>

but the only problem every time you refresh it starts the timer again, if there a way to set the start date {$data['start_date']} and close date {$data['close_time']} i think it will work just fine

[jscheuer1]

That's why we have to figure out how to get the raw UNIX timestamp of the close time from your database into the page.

Again, what CMS are you using?

Could you write code in it that would display on the page for each thread:

Close Time in Seconds:

Current Time in Seconds:

with those values?

If so, show me that code and I can probably write what we need to get this thing working.

[game]

I am using invision power board 3, i will attach the code since its to big to post here

[jscheuer1]

Thjat's not really what I asked for. I'll have a look at it when I have more time. But if you could simply write out the code as I asked for:

Could you write code in it that would display on the page for each thread:

Close Time in Seconds:

Current Time in Seconds:

with those values?

What that would look like, using those exact words and printing out to the page those values, is what I need to know.

Even in what you've sent me, I see that you did not follow my instructions. You have:

<div id="countdowncontainer{$data['tid']}"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer{$data['tid']}", new Date().getTime() + {$data['close_time']} - time() * 1000)
futuredate.displaycountdown("days", formatresults)
</script>

I had:

<div id="countdowncontainer{$data['tid']}"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer{$data['tid']}", new Date().getTime() + {$data['close_time'] - time()} * 1000)
futuredate.displaycountdown("days", formatresults)
</script>

We could also try:

<div id="countdowncontainer{$data['tid']}"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer{$data['tid']}", new Date().getTime() + ({$data['close_time']} - {time()}) * 1000)
futuredate.displaycountdown("days", formatresults)
</script>

I know this will work, we just need the syntax to be in a form that the server will parse as required to give the javascript what it needs.

If neither of those work, try to answer the question about:

Close Time in Seconds:

Current Time in Seconds:

with those values?

How would you write that?