Countdown Event Object

[Wormopolis]

Browser tested: IE and FF
placement: global header and footer

This code will allow you to call upon a countdown object that you can embed in an existing HTML element via appendChild or insertBefore, or that you can write directly to the document using innerHTML.

Global Header function must be present to work. The event has 2 styles for the box, one for before the event, and one for after.

The event is fairly accurate, but long term events might be off by a day due to months not being even and leap years. I tried a bunch of math mthods to make it as accurate as possible and it will get more accurate the closer you get to the event.

if event is more then a month away, it drops off minutes and seconds. And if the event is more then a day away it drops off seconds.

the countdown object is called by:

countdownAddEvent(title, date&time, message)

where title is event title, date and time is of the event (if time is omitted it assumes noon, and if year is omitted it assumes current year). month and day are required. currently there are no provisions for repeating events since you cant really countdown to them. message is what is revealed when event is reached.

NEW to v1.1: timezone offsets. if you want to have the countdown hit at the same time for all timezones, put the GMT modifier after the AM/PM, like 4:00 PM -8 (for PST)
Global Header portion:

<style type="text/css">
.countdown_default {width: 590; height:110; background-color: #000000; border: 1px #FFFFFF solid}
.countdown_reached {width: 590; height: 110; background-color: #000000; background-image: url(http://i197.photobucket.com/albums/aa250/WORMOPOLIS/Animated-Border-Marquee.gif);}
.countdown_title {text-align: left; font-size: 12px;}
.countdown_timer {text-align: center; font-size: 16px;}
.countdown_message {text-align: right; font-size: 14px;]

</style>
<script type="text/javascript">
<!--
// event countdown v1.2
// by Wormopolis - [url]www.wormocodes.com[/url]
// inspired by rhondairv
// keep header intact - do not repost
// GLOBAL HEADER FUNCTION
// REQUIRED TO CREATE COUNTDOWN OBJECTS

var eventReachedMessage="It Is Now!"; //what box will have in place of countdown when event is reached

var clearTitleOnEvent=true;  //set true to hide the event title when event has been reached

var invalidDateMessage="Invalid date for countdown"; //message when month and day are missing
// if year is missing it assumes current year
// if time is missing it assumes noon

var popAlertWhenEventIsReached=true;
var popAlertTimeoutWindow='3 days';  //format: number (minutes|hours|days|months)

// DO NOT EDIT - unless you know what you are doing. Im not responsible for your mistakes.

var m_y=(1000*60*60*24*365.2425);
var m_m=(1000*60*60*24*30.436875);
var m_d=m_y/365.2425;
var m_h=m_d/24;
var m_mins=m_h/60;
var m_s=1000;

var tmr_endcheck=false;


function begin_countdown() {
 tmrs=document.getElementsByTagName('stamp');
 tmr_count=tmrs.length;
 for (t=0; t<tmrs.length; t++) {
   eTime=tmrs[t].id;
   if (eTime!='end') {
     sTime=new Date(); eTimeDisp=new Date(parseInt(eTime));
     elapsetime=parseInt(eTime) - sTime.getTime();
     if (elapsetime>0) {
       elapsetime_y=Math.floor(elapsetime/m_y); elapsetime-=(elapsetime_y*m_y);
       elapsetime_y=(elapsetime_y>0 ? elapsetime_y+' Year'+(elapsetime_y!=1 ? 's' : '') +' ' : '');
       keep_elapsetime=elapsetime;
       elapsetime_m=Math.floor(elapsetime/m_m); elapsetime-=(elapsetime_m*m_m);
       elapsetime_m=(elapsetime_m>0 ? elapsetime_m+' Month'+(elapsetime_m!=1 ? 's' : '') +' ' : '');
       elapsetime_d=Math.floor(elapsetime/m_d); elapsetime-=(elapsetime_d*m_d);
       elapsetime_d=(elapsetime_d>0 ? elapsetime_d+' Day'+(elapsetime_d!=1 ? 's' : '') +' ' : '');

       elapsetime_d2=Math.floor(keep_elapsetime/m_d); keep_elapsetime-=(elapsetime_d2*m_d);
       elapsetime_d2=(elapsetime_d2>0 ? elapsetime_d2+' Day'+(elapsetime_d2!=1 ? 's' : '') +' ' : '');

       elapsetime=keep_elapsetime;
       elapsetime_h=Math.floor(elapsetime/m_h); elapsetime-=(elapsetime_h*m_h);
       elapsetime_h=(elapsetime_h>0 ? elapsetime_h+' Hour'+(elapsetime_h!=1 ? 's' : '') +' ' : '');
       elapsetime_mins=Math.floor(elapsetime/m_mins); elapsetime-=(elapsetime_mins*m_mins);
       elapsetime_mins=(elapsetime_mins>0 ? elapsetime_mins+' Minute'+(elapsetime_mins!=1 ? 's' : '') +' ' : '');
       elapsetime_s=Math.floor(elapsetime/m_s);
       elapsetime_s+=' Second'+(elapsetime_s!=1 ? 's' : '');
       var elmessage =elapsetime_y+elapsetime_m+elapsetime_d+elapsetime_h+ (elapsetime_y==0 && elapsetime_m==0 ? elapsetime_mins : '') + (elapsetime_y==0 && elapsetime_m==0 && elapsetime_d==0 ? elapsetime_s : '');
     } else {
       var elmessage=(elapsetime<(-24*60*60*1000) ? eTimeDisp.toDateString() : '<font size="5">IT IS NOW!</font>');
       tmrs[t].parentNode.parentNode.parentNode.parentNode.parentNode.className='countdown_reached';
       tmrs[t].parentNode.getElementsByTagName('span')[0].innerHTML="";
       tmrs[t].parentNode.parentNode.parentNode.nextSibling.style.display='';
       if (clearTitleOnEvent) tmrs[t].parentNode.parentNode.parentNode.previousSibling.previousSibling.style.display ='none';
       if (clearTitleOnEvent) tmrs[t].parentNode.parentNode.parentNode.previousSibling.style.display ='none';
       if (popAlertWhenEventIsReached) popAlertEndEvent(tmrs[t].id, elapsetime);
       tmrs[t].id='end';
       tmr_endcheck=true; tmr_count--;
     }
     tmrs[t].parentNode.getElementsByTagName('span')[0].innerHTML=elmessage;
   }
 }
 var CDtimer=(tmr_endcheck && tmr_count==0 ? '' : setTimeout('begin_countdown()', 1000));
}

function popAlertEndEvent(eventID, eltime) {
 if (popAlertTimeoutWindow.match(/(\d+?) (min|hour|day|month)/i)) {
   var tnum=RegExp.$1;  var tdiv=RegExp.$2; var chktime='';
   switch(tdiv) {
     case 'min':   chktime= -1*eltime / m_mins; break;
     case 'hour':   chktime= -1*eltime / m_h; break;
     case 'day':   chktime= -1*eltime / m_d; break;
     case 'month':   chktime= -1*eltime / m_m; break;
   }
   if (chktime) {
     var evnt=document.getElementById(eventID);
     var evmsg='The event: "' + evnt.parentNode.parentNode.parentNode.parentNode.firstChild.innerHTML + '" has occured!';
     if (chktime<tnum && !document.cookie.match(new RegExp('CD_'+eventID,''))) {
       var exptime=new Date();  exptime.setFullYear(exptime.getFullYear()+1);
       document.cookie='CD_'+eventID+'=true; expires='+exptime;
       alert(evmsg);
     }
   }
 }
}

function countdownAddEvent(title, timestamp, desc) {
nw_cd=createCountdownEvent(title, timestamp, desc);
keep=nw_cd.id+'_outer';
ospn=document.createElement('span'); ospn.id=keep;
ospn.align='center';
ospn.appendChild(nw_cd);
return ospn;
}

function createCountdownEvent(title, timestamp, desc) {
var monthArray=['january','february','march','april','may','june','july','august','september','october','november','december'];

timestampArray=timestamp.split(' ');
tmpDt=new Date(); tmpYear=tmpDt.getFullYear();

monthCheck=false;
if (timestampArray[0]) {
for (ti=0; ti<monthArray.length; ti++) {
if (timestampArray[0].toLowerCase() == monthArray[ti] || timestampArray[0].substr(0,3).toLowerCase() == monthArray[ti].substr(0,3) ) {
timestampArray[0]=ti;
monthCheck=true;
break;
}
}
}

if (!timestampArray[1] || !monthCheck) {
nwdv=document.createElement('div'); nwdv.id='countdown_box_invalid'; nwdv.align='center';
nwdv.className='countdown_default';
nwdv.innerHTML="<div style='width: 96%; padding: 12px'><div align='left'><font size='3'>"+title+"</font></div><br><center><font size='4'><b><span>"+ invalidDateMessage +"</b></font></center><div align='right' style='display: none'>"+desc+"</div></div>";

} else {
if (!timestampArray[2] || timestampArray[2].match(':')) timestampArray.splice(2,0,tmpYear); //assumes current year if missing
if (!timestampArray[3]) timestampArray[3]="12:00"; //assumes noon if time is missing
if (!timestampArray[4]) timestampArray[4]="PM";
timestamp_hour=timestampArray[3].split(':')[0];
timestamp_min=timestampArray[3].split(':')[1];
timestamp_hour= (parseInt(timestamp_hour)%12)+(timestampArray[4].toLowerCase()=='pm' ? 12 : 0);
timestamp_OBJ=new Date(timestampArray[2], timestampArray[0], timestampArray[1], timestamp_hour, timestamp_min);
curstamp_OBJ=new Date();
if (timestampArray[5]) {
 var tzoffset=(curstamp_OBJ.getTimezoneOffset()/-60) - parseInt(timestampArray[5]);
 timestamp_OBJ.setHours(timestamp_OBJ.getHours()+tzoffset);
}
jsm=0;
while (document.getElementById('countdown_box_'+jsm)) {
jsm++;
}
timeElapse=timestamp_OBJ.getTime() - curstamp_OBJ.getTime();

nwdv=document.createElement('div'); nwdv.id='countdown_box_'+jsm; nwdv.align='center';
nwdv.className='countdown_default';
nwdv.innerHTML="<div style='width: 96%; padding: 12px'><div class='countdown_title'>"+title+"</div><br><center><font class='countdown_timer'><b><stamp name='timecounter' id='"+timestamp_OBJ.getTime()+"'><span>getting time...</span></b></font></center><div class='countdown_message' style='display: none'>"+desc+"</div></div>";

}

return nwdv;


}

begin_countdown();
document.write('<center>'+countdownAddEvent("WormoCodes 4 year Anniversary","Nov 16 2012","Happy Birthday WormoCodes!").innerHTML+'</center>');

// -->
</script>


the global footer portion is if you want to be able to use countdowns in posts (and it has some examples for making countdown boxes anywhere on the page).

the format for UBBC countdown is:

[countdown:Title=Date&time]message to be revealed[/countdown]

global footer portion:

<script type="text/javascript">
<!--
//  event countdown  v1.01
//  by Wormopolis
//  keep header intact - do not repost
//  global footer section if you want to use in posts
//  requires accompanying header function to run

//  UBBC section - do not erase.  if you want to disable, use the variable.
// format:   [countdown:TITLE OF COUNTDOWN=DATE & TIME]Text to reveal when event is reached[/countdown]
// example:  [countdown:Math Final Exam=June 12 2010 1:00 PM]Hope you studied![/countdown]

// omitting the time will assume noon of that day
// example:  [countdown:Tricia's baby due=January 12 2011]Congratulations Tricia![/countdown]

// adding a timezone modifier will make the event happen simultaneously in all timezones:
// example:  [countdown:Combat Arms Fight=March 2 2012 3:00 PM -8]Prepare to fight![/countdown]
// the modifier is based off GMT, so -8 would be PST

var enableCountdownInPosts=true;

//  do not edit unless you know what you are doing

if (enableCountdownInPosts && pb_action.match(/(display|search2)/)) {
 for (tds=document.getElementsByTagName('td'), cd=0; cd<tds.length; cd++) {
   if (tds[cd].width=='80%' && tds[cd].className.match(/windowbg/) && tds[cd].vAlign=='top') {
     while (!tds[cd].innerHTML.match(/\[norunubbc\]/) && tds[cd].innerHTML.match(/\[countdown:(.*?)=(.*?)\](.*?)\[\/countdown\]/)) {
       var holdthis=tds[cd].innerHTML.match(/\[countdown:(.*?)=(.*?)\](.*?)\[\/countdown\]/);
       cd_title=holdthis[1];
       cd_timestamp=holdthis[2];
       cd_message=holdthis[3];
       rpl_stuff=countdownAddEvent(cd_title, cd_timestamp, cd_message).innerHTML;
       tds[cd].innerHTML=tds[cd].innerHTML.replace(/\[countdown:(.*?)=(.*?)\](.*?)\[\/countdown\]/, rpl_stuff);
     }
   }
 }
}


// -->
</script>




Preview:
most likely the countdown events will have already expired but you can see some of the default styles in this thread:
www.wormocodes.com/index.cgi?board=graphreqaswell&action=display&thread=568

[norunubbc]

[rhondairv]

Been away for a few days or i would have responded already

What do i have wrong? It's not showing up at all and i am sure i have my info in wrong.

redacted

edited: i just added the code you gave me so it will be above my chat. This is what it looks like....




Just a snippit of the outline and now says lottery system and no countdown.

What do i need to do?

[Wormopolis]

thos evariables in the global header are the generic messages that EVERY countdown would see. those are to be edited if you wanted to customize how a countdown responded to errors and events.

if you want to create an actual event,
see the part about examples in the footer portion?

add this into your main header right above the chatbox code:

<script type="text/javascript">
document.write('<center>'+countdownAddEvent("Wormo's Birthday","Aug 26 2010 1:00 PM","Happy Birthday Wormopolis!").innerHTML+'</center>');
</script>

[rhondairv]

I didn't add the footer because i was just gonna use it on the home page. Do i need it anyway?

Also, maybe because i have been sick for 3 days and still foggy but i am not getting it.

This is what i have....

above my chat script in main header is...


<script type="text/javascript">
document.write('<center>'+countdownAddEvent("MyPogoHookup's 3rd Anniversary","July 12 2010 12:00 aM","Happy Anniversary Hookup!").innerHTML+'</center>');
</script>

In global header is....

<style type="text/css">
.countdown_default {width: 300; height:55; background-color: #000000; border: 1px #4BA6FF solid}
.countdown_reached {width: 300; height: 55; background-color: #000000; background-image: url(http://i197.photobucket.com/albums/aa250/WORMOPOLIS/Animated-Border-Marquee.gif);}
</style>

redacted

It no longer says lottery system with it anymore , so that is progress.

It's not centering either and i know it's whatever i am doing wrong.
I'm sorry and don't mean to be so dense.

[Wormopolis]

it isnt you. apparently something I changed right before I submitted it is causing an error in Firefox. in IE it looks perfect.

I am investigating it right now.

[rhondairv]

oh ok,

[Wormopolis]

recopy the header portion from the first post. I fixed the bug I caused. I was trying to make a span work instead of a div, but apparently it gets mad at span tags in firefox.

you can still use the CSS stuff you had above the script however, so be sure to just grab the script part.

[rhondairv]

works great! Thanks again wormo!!!!

[kek]

Thanks, this works nice.

Just wondering if how can you make the Title centered?
If you wanted to center "WormoCodes 2 year Anniversary" in your countdown clock, how do you do that?
Just would look a lot neater for us.

Here's our countdown

document.write('<center>'+countdownAddEvent("UFC 122","Nov 14 2010 6:00 AM","UFC 122 LIVE ON FUEL TV!").innerHTML+'</center>');

[Wormopolis]

find this line in header code:

nwdv.innerHTML="<div style='width: 96%; padding: 12px'><div align='left'><font size='3'>"+title+"</font></div><br><center><font size='4'><b><stamp name='timecounter' id='"+timestamp_OBJ.getTime()+"'><span>time: "+timeElapse+"</span></b></font></center><div align='right' style='display: none'>"+desc+"</div></div>";


change that align='left' to be align='center'

[kek]

document.write('<center>'+countdownAddEvent("","January 1 2011 12:00AM]","from the Asylum!").innerHTML+'</center>');

seems to come up as invalid date for me.
Strange

[Wormopolis]

put a space between time and AM

[Wormopolis]

version upgrade 1.1: timezone offsets and more CSS
timezone offsets can be added with a GMT modifier after the time, like 4:00 PM -8 (for PST)
that will make it so the countdown hits at the same time for all timezones
I also added in some more classes for the event title, event timer, and event message in case you wanted to do more with them.

[Wormopolis]

version update 1.11: added in a variable to turn off event title when event is reached

[Wormopolis]

version update 1.2 (gheader) 1.01 (footer): adding popup alerts that will trigger when event is reached. you can set for how long after events popups will still occur. once a member sees the alert, a cookie is set so they wont see it again (or they clear cookies). I also had to redo part of footer because the regexp was being overwritten by the timeout. box will now show "getting time..." instead of a large number initially until a countdown is grabbed.