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.

[isman]

I'm having trouble incorporating this with the Signature-Editor hack by Fryzid, link to sig editor.

I get java script errors and then can't use any of the buttons on the page.

Is anyone else using these together? Here's a link to my board where you can see first hand what the problem is. Go the edit your signature and then click "Preview Signature". You'll see none of the buttons work after that.

Link to my test board

[isman]

This is the line I'm having trouble with but I don't see anything wrong.

eval("document.forms.form" + rndNum + ".elements.countdown.value = thisoutput;");

Anyone see anything with this?

[Erwin]

Originally posted by isman
This is the line I'm having trouble with but I don't see anything wrong.

eval("document.forms.form" + rndNum + ".elements.countdown.value = thisoutput;");

Anyone see anything with this?

It's the signature preview bits - remove the signature preview section of the code and you will be fine.

[Buddha]

tried to install this, and followed the instructions all the way through the thread. got errors in IE, the bottom Post Reply didn't work, and the text didn't appear for the countdown or countup.

very disappointing, seeing as this would have been very useful.

[InnerSelf]

is there a way to just implant this in your own startpage instead of in a post?

i would like to add it in my page without anyone can use it

[mismatch]

hi I love this hack and got it set up with no probs whatsoever a few weeks ago.
My members are well chuffed with it too - however my hosting comapny aren't - it isn't just the countdown my members use massive signatures for no apparent nor sensible reason

It has increased my bandwidth and the more members that have the countdown the more bandwidth that gets eaten up - some of them aren't satisfied with one countdown they have to have 2 or 3!!

someone mentioned earlier in the thread about moving it into a showthread instead of header template - is this easy? would it solve the problem? what other files/templates etc... would I need to change? Do i just drop the js that is in the header into showthread in the admin panel and what about new reply does this need attention too?

can you give me some more info on this please I love the countdown and really want to keep it but as my hosting company suspended my account due to using 10gb (how??) I need to start addressing some of these bandwidth munching monsters on my site.

Also does anyone know how I can restrict signatures to x characters? It is nay on impossible reading some posts now due to stupidly long signatures.

I have verbally requested a restriction but this of course is ignored!

TIA

[mismatch]

I think this is too old a thread for a reply I'll give it a go myself and let you know if I destroy my board in the process

________________

....no I don't trust myself after peering into the files I shall have to remove the hack for a day to see if it is the bandwidth culprit - my members will be gutted if they lose it altogether :ermm:

[ryancooper]

Anychance we can get this for VB3?

[mismatch]

seriously I wouldn't bother unless it is out of the header_inc my site isn't huge (80,000) posts although a fair few attachments but it has used 20gb bandwidth so far this month and it isn't over yet. My hosting bill more than doubled when I put this hack on.

VB3 has the event reminder system built into the calendar - I am hoping for a countdown from calendar event that could maybe be displayed in profiles for example....does that sound do-able anyone??

[subu1]

cool Hack, click install thxxx, but *g*

i have a problem.

it happen can I that as Threadstarter a field empty would have (Countdown mode)?????

if I goes answer it however, only as Threadstarter have I often problem.

greetz subu1