Countdown on Forum Home Page

[rhondairv]

I would love a countdown window i can put on my home page.

I am using this....


//CountDown in Sig - DregondRahl
//donot edit this copyright or repost this code


But it is for the siggy. I would like it to be able to be place above the forum board.
The ability to put text in explaining what the countdown is counting down to and colorize it all.


Man, that sounds like a whole lot.

An easier version is greatly appreciated also. ;D

[Wormopolis]

interesting...

[Wormopolis]

preliminary tests are located at the bottom of this page
www.wormocodes.com/index.cgi?board=graphreqaswell

[rhondairv]

very cool, coming right along wohooooo!

[Wormopolis]

what I currently have it doing:

the code creates a countdown object. you can either put that object into something that lready exists (like a cell or div further up the page) using appendChild, or you can write the object directly to the page with innerHTML using a document.write message (if you wanted to write it specifically into somewhere without having to go back and find that place later)

a global footer portion however is still going to have to be responsible for actually scanning the page for coundown objects and doing the time decrement part.

I have given the countdown boxes 2 classes. countdown_default is what it looks like while it is counting down. if you look at my examples, I have it as plain white text on a black box with a white border. When the event is reached, it changes the class to countdown_reached. in my examples it puts an animated graphic into the background. It also changes the text where the countdown was to "IT IS HERE!". if someone looks at the countdown box more then a day later, it simply puts the date that the event happened (look at lower boxes). ignore my descriptions on each countdown for now since they were only really accurate when I was testing.

I was observing a bunch of these on a page, and decided that it seemed kinda ridiculous to have it accurate down to the second (which perfect accuracy is difficult for more then a month - Ill explain next) for anything that was more then a month away. So what I did was:

event > 1 month away = dont show minutes or seconds
event > 1 day away = dont show seconds
otherwise it shows the seconds.

now accuracy. In order to keep the code less complex, I calculated months as being 30.42 days. now we all know this isnt really true, since some months have 31 and Feb has 28. leap years will also be a bit off because of that. so in the instance of an event being more then 1 month left in the countdown, it might be off by a day. As the event gets to less then 30 days the accuracy will get better and better since it wont be dealign with months anymore anyway.

The function call I made as easy as possible. You give the countdown a title, a date and time, and a brief description. You can see where stuff gets put in the examples. the "title:" and "desc:" wont be in the final version of the code, they are just there for testing purposes.

If you have any suggestions while I am still in the development stage, and they arent nigh impossible to implement, feel free to post them out.


I am also going to implement something into the global footer, so that you can type UBBC into a post and get a countdown inside there as well. the UBBC will have a similar format to the function call.. perhaps

[countdown:'TITLE','month day year time am/pm']description[/countdown]

I want to get all the kinks worked out of the main system first.

also, as you can see, you can have as many countdown boxes as you want. you just have to make a call for each of them. I will be including your name into the code header for the idea inspiration.

[rhondairv]

How about a size option? Like the ability to make the box a certain width and height? Or color the inside of the box and the frame to match your forum?

When the event is now can there be a way to input what we want it to say? Like if i am counting down a birthday and the even is happening,can it say ''Happy Birthday Wormo!'' for example.

What if you are counting down more than one event ( like certain contests ending) could the countdown box hold more than 1 event instead of having multiple boxes? I guess like the news fader does with news.

That is all i can think of lol

I love what you've come up with so far. Great job!


Awww, thanks for the name add to the code header. That is sweet. That's as close to my name ever being on a code as it will get lmao

[Wormopolis]

size option: That is controlled through the CSS. currently its set at 590x110 because that is the size of the animated image I was using as a default. if you change the CSS it will change the size of the countdown.

event reached text: we could do 1 of two things: a) we could make the description text not show until the event is reached, or b) we could add another paramter to the function call to replace the description text with different text. option b is going to make the UBBS version more difficult to accomplish however.

multiple events: Currently, each event is its own object so that it can keep all the time settings from interfering with each other. merging them into 1 box is going to be more difficult then you think. you COULD however, put them into a marquee I guess since they are objects, and it could scroll the countdown boxes like an affiliate box would.

[rhondairv]

Size option: Since i am dense as hell about this stuff, CSS is? And if i change it does it change anything else?

Event Reached: Whatever is easiest is just fine with me

Mulitple Events: I get what your saying

What about the ability to color the box so it matches the forums?

[Wormopolis]

Size option: the CSS is the stuff contained in <style> tags. example


<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);}
</style>


that is what I have for styling the countdown boxes as they look currently. you will notice you can change size, background, borders. With CSS you can pretty much anything. fonts, colors, positioning. which pertains to your last question.

[Wormopolis]

I messed around a bit more with time settings so it SHOULD be a bit more accurate, but there will always be exceptions. as it gets down to less then a month it will hone in to be more correct. its those "months" that throw things off a bit.

I also got it working in posts
www.wormocodes.com/index.cgi?board=graphreqaswell&action=display&thread=568

[rhondairv]

Very cool! I can't wait to try this out.

[Wormopolis]

ok.. give this some testing...

Global header


<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);}
</style>

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


//  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.42);
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' : '');
       elapsetime=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 {
       elapsetime=(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.parentNode.parentNode.nextSibling.style.display='';
       tmrs[t].id='end';
       tmr_endcheck=true;  tmr_count--;
     }
     tmrs[t].parentNode.getElementsByTagName('span')[0].innerHTML=elapsetime;
   }
 }
 var CDtimer=(tmr_endcheck && tmr_count==0 ? '' : setTimeout('begin_countdown()', 1000));
}

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

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();
if (!timestampArray[2]) timestampArray[2]=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";

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;
break;
}
}
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();
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 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>";

return nwdv;


}

begin_countdown();

// -->
</script>



global footer


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

/* --------------  example uses for countdown object   ---------------------------------- */
//  countdownAddEvent(event title, event date/time, text description)
//  function will return div object.  you can use innerHTML to write to document:
document.write('<center>'+countdownAddEvent("Wormo's Birthday","Aug 26 2010 1:00 PM","Happy Birthday Wormopolis!").innerHTML+'</center>');

//  or you can embed the object directly:
pn=document.getElementById('forumjump').parentNode;
pn.appendChild(countdownAddEvent("Christmas","Dec 25 2010 12:01 AM","Merry Christmas!"));

/* --------------  end example uses  (erase after understanding) --------------------- */

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

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\]/)) {
       cd_title=RegExp.$1;
       cd_timestamp=RegExp.$2;
       cd_message=RegExp.$3;
       rpl_stuff=countdownAddEvent(cd_title, cd_timestamp, cd_message).innerHTML;
       tds[cd].innerHTML=tds[cd].innerHTML.replace(/\[countdown:(.*?)=(.*?)\](.*?)\[\/countdown\]/, rpl_stuff);
     }
   }
 }
}


// -->
</script>


[rhondairv]

I'm a bit confused how to do it. If i am trying to put the box below the navigation bar and i'm not really sure what to edit.

[Wormopolis]

the nav bar that is right above the boards?

wormocodes :: Code Repository :: Requests :: Thread title


?

[rhondairv]

yes, at the top. It would then be placed below my nav menu and above my chat box.