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

[KevinG]

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, and .
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

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.


<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(de limiter)+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
-----------------------------------------------------

<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
-----------------------------------------------------
My Countdown to Disney World

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

<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

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.

[RDX1]

demo or screen?

[Sweet Cheeks]

OMG Kevin you are SO awesome! :cheeky: Thank you SO much, I will give you full credit on my site, You are too cool. :rambo: Thank you so much!!

[MrLister]

wow great job. this is awsome.

[Velocd]

I'm too lazy to install this unless I know what it actually looks like. Please post a demo or screenshot ;)

[Neo]

Nice man. Here is a image.

[JulianD]

ummsmm... Seems very interesting and useful! Thanks Kevin!

[Floris]

Uhm, the countdown is managed by the javascript? Not client-side? - little bit disappointing.. but I most surely LIKE this .. would be very cool to have this on vB3 in the calendar in many ways I can think of :)

[Logician]

It's a very useful hack and idea is very nice either, congratulations! :)

Just one tiny concern in my side: You (and your members) will use the vbcode for a few messages only, however the java code in the header will be loaded with every page (not just for messages either, with even in calender or user CP pages) in your board.

Maybe it could be nice to check the message inside "showthread.php" before displayed whether vbcode exits or not and if it exits, make the neccessary parsing inside the same script again.

This method both saves you from the java header and it could also be possible to count down according to thread reader's local time ;) Even if you wouldnt regard this method, adding the java code to a relevant template (which is related to thread displaying only) can help to get rid of it for at least unrelevant pages. Just my 0.2 cents.

Congratulations again! :)

Logician

[Sparkz]

Originally posted by xiphoid
Uhm, the countdown is managed by the javascript? Not client-side? - little bit disappointing..

Not that it has anything to do with the hack but javascript IS clientside :)

Oh, and for changing the field in the DB to LONGTEXT... Why on earth would you need to be able to fit 4 GB in there? Changing it to text should be MORE than sufficient, unless you plan on having replacements bigger than 64kb, which I doubt anyone would ever need...

Not that the field itself will end up bigger by the change, (unless you actually fill it, that is) but I was just wondering why it had to be LONGTEXT and not just text...

http://www.mysql.com/doc/n/o/node_368.html

[Floris]

I meant server-side.
I hate client-side stuff. It gives complaints, because every system if different.

[Wildthinks]

@kevinG
Hi KevinG,

looks beautiful, but don't work with European time Format?

Could you explain me, how must I write the Statement that works with European Time? I have try so many, doesn't work...

The next one, works with Opera?
I don't know exactly...

The last ist, you should replace the
<SCRIPT?LANGUAGE="JavaScript">

with

<script type="text/javascript">
,
because I get errors in my IE5.5....

[KevinG]

Thanks for the compliments folks and thank you neo for the screenshot. :) If we apply some css to it, they can come out looking mush better.

Originally posted by Sparkz


Not that it has anything to do with the hack but javascript IS clientside :)

Oh, and for changing the field in the DB to LONGTEXT... Why on earth would you need to be able to fit 4 GB in there? Changing it to text should be MORE than sufficient, unless you plan on having replacements bigger than 64kb, which I doubt anyone would ever need...

Not that the field itself will end up bigger by the change, (unless you actually fill it, that is) but I was just wondering why it had to be LONGTEXT and not just text...

http://www.mysql.com/doc/n/o/node_368.html
I really do not know why I used LONGTEXT. I could have used something smaller but as you said, it will not use any more than what you fill into that field. I just needed to increase that default to fit this one in. TEXT would give us more than enough for this one. Maybe we can use the LONGTEXT for My Song - LOL


Originally posted by Logician

Just one tiny concern in my side: You (and your members) will use the vbcode for a few messages only, however the java code in the header will be loaded with every page (not just for messages either, with even in calender or user CP pages) in your board.

Maybe it could be nice to check the message inside "showthread.php" before displayed whether vbcode exits or not and if it exits, make the neccessary parsing inside the same script again.

Ever seen a Disney site? These countdowns are wanted in their sigs :)
I just stuck it into the header so every page would have the ability to use the JS. By making it available in the header, the main code would not have to be repeated on every post that is using it. Like you said, I could have modified showthread but that would make installation of this a little bit harder and also make it just another re-mod when updates from vB come along again.
In other words, I was lazy :D

Originally posted by Wildthinks

@kevinG
Hi KevinG,

looks beautiful, but don't work with European time Format?

Could you explain me, how must I write the Statement that works with European Time? I have try so many, doesn't work...

The next one, works with Opera?
I don't know exactly...

The last ist, you should replace the


<SCRIPT LANGUAGE="JavaScript">


with


<script type="text/javascript">

,
because I get errors in my IE5.5....

I do not get any errors with my IE5.5 here. I'll try what you suggested. Can you tell me about "European time Format"? I do not know this and would like to get it working for you. The only browser I have is IE 5.5 and IE 5.0 here so I can not test the others but would appreciate anyone that can for us.

Kevin

[Mr. Slugworth]

This is exactly what I have been waiting for. Thanks for your work! Just one problem, it isn't working for me. I followed all of the instructions, even typed the scripts in the right place, since if I copy them, it just messes everything up. They are exactly as they are shown above, but I can't get it to work. Isn't it supposed to show up along with the other vbcodes so that I can just click on it when replying or making a new post? Or, is it not supposed to show up?

Any help would be appreciated.

[KevinG]

Thanks for trying it out.

I did not change anything on whether it shows up or not (buttons or help) when posting. They are just there to use.

I'm going to your site now to try them out.

[KevinG]

After trying it out on your site, I found a small typo in your script. I then checked this with what I posted and it seems that it got changed (not sure how as I copy/pasted this from my AdminCP).
The typo is the second line of both countdown and countup function. The line that fails is

y2k = new date(date);


The lowercase d in the first date is causing your problems.

This is part of the code that goes into your Head Insert section.

Below is the correct line for both functions.

I will fix the first post here. Maybe PHP tag is doing this ???


Edit: I just tried the [ code ] tag to post the correct line and it did it again :(
Both PHP and CODE tags are making this line appear incorrect.

y2k = new Date(date);

Admins/Mods,

I'm not sure how I can fix this so the members can see the code.
Help Please.

Kevin

[KevinG]

The first post is all fixed now. I separated the date parameter in
y2k = new Date(date);
into
y2k = new Date( date );

so PHP does not change it to
y2k = new date(date);

[KevinG]

Here's a style that removes the input box look.

Change the line for the input field to;

document.writeln("<input type=text value='' size=40 name='countdown' border-style='none' style='border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid'>");

[KevinG]

Here another one, transparent background instead of the white box.

Change the line for the input field to;

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'>");

[Ruth]

KevinG... very nice hack :)

i'm thinking to use this as a gradutation count down....

users can choose the year from a drop down menu during registration

then the count down appears in their profile

is this possible to hack it even more for that purpose ?

thanks :)

[Sweet Cheeks]

Kevin I installed the hack on my site, everyone LOVES it!! http://www.belliesandbabies.com/boards/images/smilies/clap.gif I was wondering if you had a site link or something we could give your credit for? Thank you! :D

[KevinG]

Originally posted by Ruth
KevinG... very nice hack :)

i'm thinking to use this as a gradutation count down....

users can choose the year from a drop down menu during registration

then the count down appears in their profile

is this possible to hack it even more for that purpose ?

thanks :)

Thanks Ruth. We could hack it some more if you'd like but that one would get away from it's simplicy :D

We can discuss via PM here to get your version. Sound good?
(or do others want this as well?)

Originally posted by ~*Julie*~

Kevin I installed the hack on my site, everyone LOVES it!! I was wondering if you had a site link or something we could give your credit for? Thank you!
You're welcome. I did this and then searched here to see if anyone else already did it. During the search, you name popped up so I just decided to post it. I don't need to have my credit linked from your site. Mine is a private site for family members and strangers might freak them out - LOL. Just tell them it's from the baby stork :D
If my wife is expecting again ( oh I hope not ), we'll stop by. Deal?

[KuraFire]

Kevin, nice hack, but I really suggest you turn it into a Showthread hack. As it is, being put in the head of _all_ pages on the board, it's quite a bandwidth-impact for no reason. The part for in <head> is, imo, rather huge, and loading that when it's not necessary is just diminishing your bandwidth for nothing.

showthread.php hack shouldn't be too hard...

[KevinG]

Thanks KuraFire.

I'll check that out. I would also have to modify newreply.php as well then. Also, the PM display code in private.php as these can also be used in sigs.

Thanks for the suggestion.

[Sweet Cheeks]

Congratulations on the baby coming Kevin! Thanks again for everythign!! Woohoo!

[BigJohnson]

How can we make the changes in our board so that the button that we make for it will give you the correct java script pop up to insert all the right stuff in the correct places because it isnt a simple hey thing. You need to add like font color and all the type of stuff. Is there anyone here with this type of knowledge to tell us how we can do this. Thanks you so much.

[BigJohnson]

bump

[KevinG]

Maybe you can try something like this?

Add this to the vbcode.js file in your forum directory

// ************************************

function countdownup(theform,thetype) {
// inserts countdown or countup
maintext = prompt("Enter Top Message for " + thetype,"");
coloredtext = prompt("Enter the color to use for the Top Message","BLUE");
datetext = prompt("Enter Date for " + thetype,"");
var prompttext;
if (thetype == "countdown") {
prompt_text = "Enter text to display when Countdown reaches zero";
}
else {
prompt_text = "Enter text to display before Countup starts (future date)";
}
expiredtext = prompt(prompt_text,"");
if ((datetext != null) && (datetext != "")) {
cdcode = "";
if ((maintext == null) || (maintext == "")) {
if (thetype == "countdown") {
maintext = "My Countdown";
}
else {
maintext = "My Countup";
}
}
if ((coloredtext == null) || (coloredtext == ""))
coloredtext = "BLUE";
if ((expiredtext == null) || (expiredtext == "")) {
if (thetype == "countdown") {
expiredtext = "Blast Off!";
}
else {
expiredtext = "Waiting to Start";
}
}
theform.message.value += "["+thetype+"="+datetext+";"+expiredtext+";"+coloredtext+"]"+maintext+"[/"+thetype+"] ";
}
theform.message.focus();
}

// *************************************


Then add the buttons to your vbcode_buttons template:
My template looks like this after adding them after the "quote" button. This was added after the <BR> tag which puts them on the third line of buttons.


<input type="button" class="bginput" value="countdown" title="Insert Countdown" onclick="countdownup(this.form,'countdown')" >
<input type="button" class="bginput" value="countup" title="Insert Countdown" onclick="countdownup(this.form,'countup')" ><br>

[rcooper7]

Great looking hack will do good on my Disney Page! :) thanks!

Ryan C.

[rcooper7]

One Question, How do you Modify the database.

Can someone walk me through this? I have phpmyadmin. . .

Thanks

[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/showthread.php?s=&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:

<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:

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

[isman]

I'm having trouble incorporating this with the Signature-Editor hack by Fryzid, link to sig editor (https://vborg.vbsupport.ru/showthread.php?s=&threadid=12282).

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 (http://www.aparentsheart.com/bbtest)

[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 :p

[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

[Stu]

Anychance we can get this for VB3?

This works for vB3 as it is

[DWard]

OK, the script worked once for me, then never again. I have put the code at the bottom of my header_include and also tried with the code at the top of the body tag, however it shows the text and a blank white box below, what do I do, this is the code it outputs:

<Script language='Javascript'>
var rndNum = Math.floor(Math.random() * 10000);
var tempString="May 4, 2005;Currently At WDW Now;BLUE";
tempArray=explodeArray(tempString,";");
document.writeln("<form name='form" + rndNum + "' action='javascript<b></b>:void(0);'>");
document.writeln('<font size=2 color="'+tempArray[2]+'">My Countdown to Disney World</font><BR>');
document.writeln("<input type=text value='' size=40 name='countdown'>");
document.writeln("</form>");
countdown(tempArray[0], rndNum, tempArray[1]);
</script>

[TruckMuddr]

Umm, is there a way to add years also???? when you get like 2450 days, it looks alittle weird.

[rex_b]

This works for 3.0.7 Kevin you may want to rerelease as such.

[Mum]

Could anyone in the know tell me if i could use this for current vB, as i really want this BBcode, but not sure if it's completely different now?