The Arcive of Official vBulletin Modifications Site.

New vBCode Tags: [Countdown] and [Countup] timers for users · **Released**: 05-02-2002

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.

Floris · #12 05-03-2002, 09:14 AM

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

Wildthinks · #13 05-03-2002, 10:43 AM

@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

Quote:

<SCRIPT?LANGUAGE="JavaScript">

with

Code:

<script type="text/javascript">

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

KevinG · #14 05-03-2002, 12:40 PM

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.

Quote:

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 [mp3=song.mp3]My Song[/mp3] - LOL

Quote:

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

Quote:

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

Code:

<SCRIPT LANGUAGE="JavaScript">

with

Code:

<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 · #15 05-03-2002, 05:16 PM

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 · #16 05-03-2002, 05:25 PM

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 · #17 05-03-2002, 06:18 PM

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

PHP Code:


			
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 · #18 05-03-2002, 06:29 PM

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 · #19 05-03-2002, 06:50 PM

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 · #20 05-03-2002, 07:26 PM

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 · #21 05-04-2002, 04:46 AM

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05540 seconds Memory Usage 2,389KB Queries Executed 25 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (3)bbcode_code (4)bbcode_php (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!