New vBCode Tags: [Countdown] and [Countup] timers for users

Have you or any of your members ever had the need or desire to post a countdown or countup in a post?
Something that automatically shows the remaining days, hours, minutes and seconds of that upcoming Walt Disney World trip?
Or want to show everyone how many days, hours, minutes and seconds that the user has gone without a cigarette, drink, sex? - LOL

I came up with this one here. It basically gives your users two new vB Code Tags, [countdown] and [countup].
Now there is no need to worry that the user will mess up your threads with incorrect JavaScript.
All they have to do is use these tags, just like most other tags.

For counting down, they would just have to do the following:
[countdown=May 21, 2002 12:32 PM EST;We are off to see Mickey Mouse;RED]My Walt Disney World Trip Begins in [/countdown]

Same for counting up with just different text of course.

I guess this would qualify as a hack as you do need to change one field in the database to store this.
Luckily, it's in a very small table so it should not slow anything down in theory.


Modify the database
Modify the field bbcodereplacement in the bbcode table to increase the storage size.
Change the field properties from varchar(200) to LONGTEXT. This is needed for the new vB Code replacement to follow.
I used phpMyAdmin which is very easy to use for this change.

Add new JavaScript
Add the following JavaScript code to your Style under Head Insert preferrably at the bottom.
Be sure to do this for every style that you defined in your database.

PHP Code:

<SCRIPT LANGUAGE="JavaScript">
function countdown( date, rndNum, outtext ) {
now = new Date();
y2k = new Date( date );
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
if ((days < 0) | (hours < 0) | (minutes < 0) | (seconds < 0)) {
   thisoutput = outtext;
   if (thisoutput == "") thisoutput = "Countdown Finished";
} else {
   sec = (secondsRound == 1) ? " second." : " seconds.";
   min = (minutesRound == 1) ? " minute, " : " minutes, ";
   hr = (hoursRound == 1) ? " hour, " : " hours, ";
   dy = (daysRound == 1)  ? " day, " : " days, ";
   thisoutput = daysRound  + dy + hoursRound + hr + minutesRound + min + secondsRound + sec;
}
eval("document.forms.form" + rndNum + ".elements.countdown.value = thisoutput;");
thisclock = "countdown(\""+date+"\",\""+rndNum+"\",\""+outtext+"\");";
window.setTimeout(thisclock, 1000);
}

function countup( date, rndNum, outtext ) {
now = new Date();
y2k = new Date( date );
days = (now - y2k) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (now - y2k) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (now - y2k) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (now - y2k) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
if ((days < 0) | (hours < 0) | (minutes < 0) | (seconds < 0)) {
   thisoutput = outtext;
} else {
   sec = (secondsRound == 1) ? " second." : " seconds.";
   min = (minutesRound == 1) ? " minute, " : " minutes, ";
   hr = (hoursRound == 1) ? " hour, " : " hours, ";
   dy = (daysRound == 1)  ? " day, " : " days, ";
   thisoutput = daysRound  + dy + hoursRound + hr + minutesRound + min + secondsRound + sec;
}
eval("document.forms.form" + rndNum + ".elements.countup.value = thisoutput;");
thisclock = "countup(\""+date+"\",\""+rndNum+"\",\""+outtext+"\");";
window.setTimeout(thisclock, 1000);
}

function explodeArray(item,delimiter) {
  tempArray=new Array(1);
  var Count=0;
  var tempString=new String(item);

  while (tempString.indexOf(delimiter)>0) {
    tempArray[Count]=tempString.substr(0,tempString.indexOf(delimiter));
    tempString=tempString.substr(tempString.indexOf(delimiter)+1,tempString.length-tempString.indexOf(delimiter)+1);
    Count=Count+1
  }

  tempArray[Count]=tempString;
  return tempArray;
}

</script> 


Add the new vBCodes
Using the Admin CP, add the following;

vB Code tag
-----------------------------------------------------
countdown


vB Code replacement
-----------------------------------------------------

PHP Code:

<Script language='Javascript'>
var rndNum = Math.floor(Math.random() * 10000);
var tempString="{option}";
tempArray=explodeArray(tempString,";");
document.writeln("<form name='form" + rndNum + "' action='Javascript:void(0);'>");
document.writeln('<font size=2 color="'+tempArray[2]+'">{param}</font><BR>');
document.writeln("<input type=text value='' size=40 name='countdown'>");
document.writeln("</form>");
countdown(tempArray[0], rndNum, tempArray[1]);
</script> 


vB Code example
-----------------------------------------------------
[countdown="May 4, 2002;Currently At WDW Now;BLUE"]My Countdown to Disney World[/countdown]

vB Code explanation
-----------------------------------------------------
Enter any text you would like to say to your members here.

Use {option} ?
-----------------------------------------------------
Select YES


Add the [countup] tag next;
vB Code tag
-----------------------------------------------------
countup

vB Code replacement
-----------------------------------------------------

PHP Code:

<Script language='Javascript'>
var rndNum = Math.floor(Math.random() * 10000);
var tempString="{option}";
tempArray=explodeArray(tempString,";");
document.writeln("<form name='form" + rndNum + "' action='Javascript:void(0);'>");
document.writeln('<font size=2 color="'+tempArray[2]+'">{param}</font><BR>');
document.writeln("<input type=text value='' size=40 name='countup'>");
document.writeln("</form>");
countup(tempArray[0], rndNum, tempArray[1]);
</script> 


vB Code example
-----------------------------------------------------
[countup="May 4, 2002;Waiting for my last cigarette;RED"]Smokefree Days[/countup]

vB Code explanation
-----------------------------------------------------
Enter any text you would like to say to your members here.

Use {option} ?
-----------------------------------------------------
Select YES



There are many variations that can be use here for how the text field looks.
We can post suggestions here for everyone to share

I can post a screenshot tomorrow if you would like.
It's really just a text field containing the days, hours, minutes and seconds of the timers with the {param} text over it.

Edit:
Reformatting some of the text as the PHP blocks are very wide.
Also fixed a case conversion that the PHP code tag is making in my post.

[Mr. Slugworth]

Ryan, get into your phpmyadmin, and click on your database. Find the bbcode listing and hit properties. Then you will see the listing for bbcodereplacement, click Change. Then, chang the Type to LONGTEXT in the dropdown box. Hit save, and you are done. That is it.

Mickey :bandit:

[rcooper7]

Thanks Mickey! Much Appreciated

[rcooper7]

Is it possabel to make this work like a birthday box in the control panel?. Let the user pick the date and what it should say and then show the countdown in the sig!

I have no clue how to do this. . .

[rcooper7]

OK one more question,
everything seem t owork amazing But when I add it to my Sig, the message does not appear above the countdown
http://www.talkdisney.com/forums/sho...&threadid=1821

Did I miss something?

[KevinG]

I just checked that thread you posted and viewed it's source.

Looks like you missed a line in your vbcode replacement

Here is the original code that I posted on page one:

PHP Code:

<Script language='Javascript'>
var rndNum = Math.floor(Math.random() * 10000);
var tempString="{option}";
tempArray=explodeArray(tempString,";");
document.writeln("<form name='form" + rndNum + "' action='java script:void(0);'>");
document.writeln('<font size=2 color="'+tempArray[2]+'">{param}</font><BR>');
document.writeln("<input type=text value='' size=40 name='countdown'>");
document.writeln("</form>");
countdown(tempArray[0], rndNum, tempArray[1]);
</script> 


The missed line is:

PHP Code:

document.writeln('<font size=2 color="'+tempArray[2]+'">{param}</font><BR>'); 


This code is for the countdown vbcode, not the countup vbcode. Since you have not tested that one in your thread, I'm not sure if that also has the same problem (if it has a problem).

[rcooper7]

BEAUTIFULL! Thanks!

[jamoss]

Wooo! Finally got it to work. I found out it REALLY DOESN'T LIKE PUNCTUATION!!!

So you can't put:

[ countdown="May 10, 2003;The Big Three-O;BLUE" ]until my birthday![ /countdown ]

anyway, it's awesome. Just what I was looking for.

Jennifer Moss
BabyNames.com
http://www.babynames.com/boards/

[Slynderdale]

i cant get the countdown to work, but the count up works good, does any one know whats wrong?

[php]
<Script language='Javascript'>
var rndNum = Math.floor(Math.random() * 10000);
var tempString="{option}";
tempArray=explodeArray(tempString,";");
document.writeln("<form name='form" + rndNum + "' action='java script:void(0);'>");
document.writeln('<font size=2 color="'+tempArray[2]+'">{param}</font><BR>');
document.writeln("<input type=text value='' size=40 name='countdown' border-style='none' style='background-color:transparent; border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid'>");
document.writeln("</form>");
countdown(tempArray[0], rndNum, tempArray[1]);
</script>
[php]

[KevinG]

Slynderdale,

Can you post, or PM me, the website where you installed this?
I can take a look and tell you why the countdown is not working.

Also, double check the added code to the header.

[Slynderdale]

hmm weird, i placed a count down under it and it worked