Countdown Block

[JPDeni]

What exactly do you want to do? Something like counting down every week to Monday at 8pm? If so, I think I know of a way to do it, combining a different javascript and php.

[PowerPyx]

I'm using the following one (scriptbox) and to update it takes 15 secs... not more.

to reset the date you just have to change the date in STEP 1

Code Select Expand


<script language="JavaScript1.2">

/*
Dynamic countdown Script- Ã...  Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit http://www.dynamicdrive.com
*/


function setcountdown(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}

//////////CONFIGURE THE COUNTDOWN SCRIPT HERE//////////////////

//STEP 1: Configure the countdown-to date, in the format year, month, day:
setcountdown(2006,12,24)

//STEP 2: Change the two text below to reflect the occasion, and message to display on that occasion, respectively
var occasion="Weihnachten!"
var message_on_occasion="Frohes Fest euch allen!"

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countdown area
var countdownwidth='360px'
var countdownheight='20px'
var countdownbgcolor=''
var opentags='<font face="Verdana"><center>'
var closetags='</font></center>'

//////////DO NOT EDIT PASS THIS LINE//////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown


function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Occasion already passed! "+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"Occasion already passed! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>

<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>




Demo on : http://rad.hrsv.de/forum/index.php


Pyx

[Shane84]

What exactly do you want to do? Something like counting down every week to Monday at 8pm? If so, I think I know of a way to do it, combining a different javascript and php.

Yes that is precisely what I would love to do.

I'm using the following one (scriptbox) and to update it takes 15 secs... not more.

to reset the date you just have to change the date in STEP 1

If all else fails I will try this, but I'd really like to find a script because I there are times where I won't be online at the exact moment or perhaps even hours from when the timer would expire.

Background...I'm working on this for a game site that has challenges every week, the challenge times expire at 11pm Pacific USA time.  The following morning the new weeks challenges begin at 7am Pacific USA time.

In a perfect world I'd love a script that would allow for the time to expire at 11pm Pacific USA time on Tuesday and reset the countdown timer at 7am Pacific USA time on Wednesday morning.  I realize that would be much more difficult so I'm not picky or expecting miracles, even a simple reset at the expire time of 11pm Tuesday would work out great for us.

[JPDeni]

Well, I think I can do pretty much what you want.

First, go to this site and download the countdown.js script. Put it in the root directory of your SMF/TP setup. You might want to bookmark that site, too, because it's got all the stuff for formatting and such.

Then, put the code below into a php block.

Code Select Expand


$dayofweek = 'Tuesday';
if (date('l') == $dayofweek)
  $targetdate = date('m/d/Y');
else
  $targetdate = date('m/d/Y',strtotime('next '. $dayofweek));
$targettime = '11:00 PM UTC-0800';
echo '
<script language="JavaScript">
TargetDate = "', $targetdate , ' ' , $targettime, '";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="countdown.js"></script>';

The FinishMessage should display for about an hour, from 11pm to midnight on Tuesdays. You may have to do a little bit of adjustment, though, when you're determining which day it is. I'm never sure whether the time is actually server time or GMT. But we can likely work that out.

If this is in general what you want, I can share with you the alterations I've done on the javascript, so it might actually do exactly what you have in mind. I haven't tested any further than this, though. And in my tests, it's been the same day where I am and in Greenwich. I'll be interested to know how it works in a few hours.

[Shane84]

I'm glad you responded

I was working with that one this morning because already have a countdown timer for christmas and it appears we can't have two countdowns running at the same time.  I'm working on a solution and so it my other admin, she came up with this but I haven't used it yet.

Code Select Expand

<?
function next_week($target_week_day)
         {         
         $date = getDate();
           
         $day = $date["mday"];
         $week_day = $date["wday"];
         $month = $date["mon"];         
         $year = $date["year"];
         
         //This assumes that if today is a target week day,
         //today's date will be used and not next week's.
         //To change that, just make
         //if($week_day <= $target_week_day)
         //if($week_day < $target_week_day)
         if($week_day <= $target_week_day)
            $days_left = $target_week_day - $week_day;
         else
            $days_left = 7 - ($week_day - $target_week_day);
         
         //This script works by finding out the number of days separating
         //the current date and the next target week day.
         $next_week = getDate(mktime(0, 0, 0, $month, $day + $days_left, $year));
         
         $next_week_html = $next_week["month"] . " " . $next_week["mday"] . " , " . $next_week["year"];
                                             
         return($next_week_html);
         }
?>

EDIT:  Scratch that, it doesn't work.

[JPDeni]

You could probably have another copy of countdown.js and rename it to countdown2.js. And then change the name of the file in the code. I just really like that countdown script. Looks like you do, too.

I set up mine to have a start and stop. We have events that last a weekend or more, so I wanted to be able to count down to the start of the event, have a message for when the event was happening and then a message for when the event was over. It was really easy to alter the code, and I'd never done any javascript before.

[Shane84]

You could probably have another copy of countdown.js and rename it to countdown2.js. And then change the name of the file in the code.

We tried that in Firefox it stalls one of the counters and in IE it doesn't even show one of the counters.  Both are in seperate folders on the server and named differently, one is countdown.js and the other is countdown1.js.  I do like this code also, it's great and I hope we can get it to work but it won't be the end of the world if we don't

[JPDeni]

I see. I hadn't tried, it so, I wasn't sure.

So you don't really need a countdown, right? Would it be enough for the counter to update when the person reloads the page? We could do that completely in php.

[sburke930]

I'm glad you responded

I was working with that one this morning because already have a countdown timer for christmas and it appears we can't have two countdowns running at the same time.  I'm working on a solution and so it my other admin, she came up with this but I haven't used it yet.

Code Select Expand

<?
function next_week($target_week_day)
         {         
         $date = getDate();
           
         $day = $date["mday"];
         $week_day = $date["wday"];
         $month = $date["mon"];         
         $year = $date["year"];
         
         //This assumes that if today is a target week day,
         //today's date will be used and not next week's.
         //To change that, just make
         //if($week_day <= $target_week_day)
         //if($week_day < $target_week_day)
         if($week_day <= $target_week_day)
            $days_left = $target_week_day - $week_day;
         else
            $days_left = 7 - ($week_day - $target_week_day);
         
         //This script works by finding out the number of days separating
         //the current date and the next target week day.
         $next_week = getDate(mktime(0, 0, 0, $month, $day + $days_left, $year));
         
         $next_week_html = $next_week["month"] . " " . $next_week["mday"] . " , " . $next_week["year"];
                                             
         return($next_week_html);
         }
?>

EDIT:  Scratch that, it doesn't work.

It only had an error because you left the <? ?> on it.  HAd you removed those the parsing error would have disappeared.

I think it still needs an echo statement in order for it to give the proper feedback in the block though.  Maybe JPDeni can help with that?

[JPDeni]

I'm happy to help. I just need to know what exactly you want it to do. Do you need a second-by-second countdown? Or do you need something that refreshes when the user reloads the page? Or...?