Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns)

[Gemma]

Someone PM'd me last week asking for the code I use for my countdown sideblock. So here is the basic countdown (doesn't include the images/blurb that screenshots/demo show)

This countdown uses the users PC clock and calendar to count down to a time and date.

What is it?
A sideblock on your forum index to countdown to a specific date/event.

1. Upload the contents on the zip archive to your server. Keeping the file structure as is.

countdown/js/jquery-1.4.1.js
countdown/js/jquery.lwtCountdown-1.0.js
countdown/js/misc.js
countdown/style/main.css

Change the settings of the countdown/js folder to CHMOD 775

2. Go to AdminCP > Forums and Moderators > Forum Block Manager > Add Block

Title - Countdown
Description - whatever you want
Content Type - HTML
Content - <div></div>
Template to use - block_countdown

3. Go to AdminCP > Styles and Templates > Style Manager > Add New Template

Title - block_countdown
<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
}
});
});
</script>
<div>
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>Change this part to set the countdown target date

'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,Save the block.

4. Go to AdminCP > Style and Templates > Style Manager > StyleVars > forum_sidebar_width and change the width to atleast 270px

You can change the colour of the digits/text to suit your forum by changing references to #5C7099 in the main.css file

If you are using vBOptimise go to AdminCP > vBOptimise > Flush Cache

To have more than one countdown

Create a new template called block_countdown2

<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});
</script>
<div>
<div id="countdown2">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>Set the targetDate data and save

For reference if making more blocks - (jq('#countdownX').countDown({ and <div id="countdownX"> are used to call additional countdowns).

Create a new forum block in the same way as before but make the template to use: block_countdown2

To Display on vB Advanced CMPS - https://vborg.vbsupport.ru/showpost.php?p=2258359&postcount=122

To show multiple countdowns on forumhome (screenshots (https://vborg.vbsupport.ru/showpost.php?p=2278149&postcount=156)) - https://vborg.vbsupport.ru/showpost.php?p=2278166&postcount=158

If you want to add images/videos etc to your countdown all you need to do is add some basic code to the template. Search for </script><div> and after that you would add something like.
<img alt="" title="" src="URL TO YOUR IMAGE" width="150" height="225"><br/><br/>
<iframe width="240" height="160" src="EMBEDDED YOUTUBE VIDEO LINK" frameborder="0" allowfullscreen></iframe><br/><br/>
</div>
If you are upgrading from a previous version, upload the contents of the zip file and replace the template(s) you are using (ie block_countdown, block_countdown2, adv_portal_countdown etc). Set the targetDate.

History
1.0.4 - Reverted back to using jquery-1.4.1.js
1.0.3 - Now using jquery-1.6.1.min.js and added noConflict to script
1.0.2 - Cleaned up code, added instructions to zip. Also instruction within thread on how to make CMS widget or have more than one countdown.

If anyone wants to further develop any of my addons, you are free to do so.

[sadaar]

Thanks for the mod, it looks great. However, I cannot seem to set it to display anything other and 0's. I tried eliminating the cache time, I tried entering the year in both 2011 and just 11 format. Can you please post an example of a functioning time?

[Gemma]

targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,

[sadaar]

Thanks for the quick reply, unfortunately I still am not getting the countdown, just 0's

[sadaar]

Again, I appreciate your support.

I downloaded the zip, upload and overwrote. I verified the directory structure. I deleted the forum block and created a new with a direct cut and paste of your's. Then pasted the sample date and time.

I still get nothing but 00's

Is it just me? Or is anyone else having this issue?

[K4GAP]

Uninstalled, would not display anything but 0's.

[un? in?]

Oh, don't work.
Please fix
Demo: http://raovat.vn-news.org/forum.php
Thanks

[Gemma]

I don't know, it works fine on every site I've installed it on and I've used the same code on them all.

<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 2,
'month': 9,
'year': 2011,
'hour': 17,
'min': 0,
'sec': 0,
'utc': true
}
});
});
</script>

<div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>

Replace the target date data with your own.

If no-one can confirm it working then I'll get one of the mods to delete this. Sorry :(

edit: Confirmed as working

[Taurus1]

Works and looks awesome. Thank you so much!

[Gemma]

Works and looks awesome. Thank you so much!

If you are looking to add an image above the countdown, add something like this below </script>

<div align="center"><img src="LINK TO YOUR IMAGE"><br/><br/>
<span class="digit">BLURB YOU WANT TO DISPLAY</span><br/><br/></div>

If you want to link the image to something, ie when clicking on the image it would go to a forum post or external site use this format instead, replace the <img src="LINK TO YOUR IMAGE"> with something like this - <a href="http://www.yourlink.com"><img src="http://www.yourimagelink.com/image.jpg" alt="hover over title" width="x" height="x" /></a>

[Taurus1]

OH cool! Thank you Gemma. Is there a way for me to use a longer title? When the title is too long it overlaps the box, it is not broken into 2 sentences or so.
And did you release this as widget somewhere?

[Gemma]

OH cool! Thank you Gemma. Is there a way for me to use a longer title? When the title is too long it overlaps the box, it is not broken into 2 sentences or so.
And did you release this as widget somewhere?

I'll look at the title part and see what's up.

You should be able to use the same code to make a cms widget but you would need to be using a sidebar of 270px or more for it to display properly

[Gemma]

I'll look at the title part and see what's up.

You should be able to use the same code to make a cms widget but you would need to be using a sidebar of 270px or more for it to display properly

Actually, I take that back :o

You'd need to use something like this for a CMS Widget

<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
</div>
<div class="cms_widget_content_restore_widget_content">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'utc': true
}
});
});
</script>
<center>
<div>
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div></center>
</div>
</div>
</div>

[Kulham]

FIXED:

1.- Add before..

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>

2.- Check folder permission #0775

3.- Clear Cache sideblock.

[Gemma]

Thanks. I removed the jquery-1.4.1.js lines from the code because it wasn't needed for all the installs I'd made (but I left the script in the zip file). Any time you make a new widget/sideblock it is always recommended to clear or purge the cache.

[Taurus1]

That unfortunately don't work for me Gemma. The widget just remains on 00. I was also trying to center in with <center></center> tags wrapped around it, but it wont center. Sorry for the trouble. And thank you so much for your help and effort!

[TheChief]

Added and working fine - Exactly what i was after

Thanks

[un? in?]

I don't know, it works fine on every site I've installed it on and I've used the same code on them all.

<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 2,
'month': 9,
'year': 2011,
'hour': 17,
'min': 0,
'sec': 0,
'utc': true
}
});
});
</script>

<div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>

Replace the target date data with your own.

If no-one can confirm it working then I'll get one of the mods to delete this. Sorry :(

edit: Confirmed as working

FIXED:

1.- Add before..

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>

2.- Check folder permission #0775

3.- Clear Cache sideblock.

I don't know.
My site don't work.
I did 2 you in on
Please: help me

[Gemma]

That unfortunately don't work for me Gemma. The widget just remains on 00. I was also trying to center in with <center></center> tags wrapped around it, but it wont center. Sorry for the trouble. And thank you so much for your help and effort!

vBulletin's CMS is a pile of poo! It really needs an overhaul. Try this (based on a sidebar of 300px)

Upload the contents of the attached zip, CHMOD the coutdown/js folder to 775

Create a new template called vbcms_widget_countdown and copy this code

<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3><img src="{vb:raw vboptions.bburl}/countdown/style/countdown.png" alt="" /> {vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content_restore_widget_content">
<br/>
<div>
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/countdown_cms.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'utc': true
}
});
});
</script>
</div></div>


Change the targetDate info and save the template.

Go to vBulletin CMS > Widgets > Create New Widget

Widget Type - Static HTML
Title - whatever
Save.

Configure the new widget
Enter Static HTML - <div></div>
Template Name - vbcms_widget_countdown
Save

Then go to Layout Manager and place the widget in the sidebar you want it to appear.

Clear the CMS Cache and Flush Cache on vBOptimise (if applicable)

[Gemma]

I don't know.
My site don't work.
I did 2 you in on
Please: help me

Can you PM me a link to your site and I'll have a look :)

[un? in?]

Can you PM me a link to your site and I'll have a look :)

Thank you.
My site: http://raovat.vn-news.org/forum.php
Please tell me with Fix
Thanks alot

[un? in?]

Thank for support but my site don't still working.
Haizzzzzzzzz

[Gemma]

Delete the current block and I'll post up instructions on how to create a template based block and see if that works.

[Gemma]

Go to AdminCP > Styles and Templates > Style Manager > Add New Template

Title - block_countdown
<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'utc': true
}
});
});
</script>
<div>
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>

Save the template.

Go to Forums and Moderators > Forum Block Manager > Add Block > Choose Custom HTML/PHP

Title - Countdown
Content Type- HTML
Content - <div></div>
Template To Use - block_countdown

Save. Purge Cache

[Taurus1]

Hey Gemma, I am so sorry, but that did not work either. (widget) Still remains on 00. It is no biggie. I can leave it out from the my cms. Thanks again for everything! You ROCK!

[sadaar]

It doesn't work for me either. I appreciate the mod and your work in trying to sort it out. I just wonder if there is some other mod that interfears with it? Like I use vBOptimize, and I wonder if it could cause an issue?

[Gemma]

Sorry guys, it must be conflicting with something else. I couldn't possibly say what without testing out on someone's site that is having issues.

One final thing for you both to try, make sure you have uploaded the jquery-1.4.1.js file to the countdown/js folder.

Find:
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>

Above it add:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

Save the block/template

CHMOD the countdown/js folder to 775

And if you're using vBOptimise go back to your AdminCP > vBOptimise > Flush Cache

See if that works

[Taurus1]

That did it Gemma!! Woooweeee! Thank you so much!

Now please don't kill me for asking this, but is it possible to make the letters itself a bit smaller? On my non-default skins it is too big for the 300px siderbar. (The seconds part goes to the bottom) I suppose the skins itself adds some padding or something.

EDIT: I managed to get it working and looking great now. I edited the .css file. Thanks again for everything Gemma!

[Gemma]

Hallelujah. It's all been a bit messy, I better go back and redo the first post :rolleyes:

Updated to v1.0.1

[sadaar]

I tried the template method, verified the file placement and permissions, even turned off the entire pllug-in system temporarily to see if there was a conflicting mod.... still nothing but 00's.

I wish I could get it to work, it's a nice mod and something my community really needs.

[Gemma]

@sadaar

Can you PM me a link to your site?

[keithyboy1]

very nice,thank you for this.worked first time no probs :)

[weave]

Tried on a vanilla install and all I get is 00000 too.

Will mess with it more later

[Gleedo]

Very nice mod Gemma.

Is it possible to have more than one countdown in the forum sidebar? I tried creating two, and created another template 'block_countdown2' which my 2nd block is set to use in 'Template to Use', but only one of the countdowns works.

Any thoughts appreciated. :)

[Gemma]

I've not tried but I think the scripts would clash. I'll have a play around later :)

edit: Not as difificult as I thought.

Create a new template called block_countdown2
<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
'utc': true
}
});
});
</script>
<div>
<div id="countdown2">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>

Set the targetDate data and save

($('#countdown2').countDown({ and <div id="countdown2"> are used to call the second countdown).

Create a new forum block in the same way as before but make the template to use: block_countdown2

[Macgiber]

oh the reason the reason is that zeros out only when editing the date the current staff oh oh forum member city.

[Gleedo]

edit: Not as difificult as I thought.


Thank you very much Gemma - great mod, great support :)

[Gemma]

oh the reason the reason is that zeros out only when editing the date the current staff oh oh forum member city.

Sorry, that makes no sense to me :erm:

[thetgc]

I cant seem to get this working either. Even after trying everything that has been posted :(

[Gemma]

Sorry for the delay, was at work :(

Not really sure why it isn't working for some, only thing I can think of is a conflict somewhere. Try removing this from the block_countdown template and add it to your headinclude or footer (footer is my own preference)

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>

If anyone wants to PM me a link to their site I'll have a look, it is hard to try find a solution because it has worked on every site I've installed it on :confused:

[Hiks]

Installed and working a treat, 4.1.2 Thanks. http://www.baja-forum.co.uk/index.php

[kylek]

Question on where to put the files.

For the sidebar countdown zip - do these go in forum root?

And the zip for the cms countdown - where should these go also?

[Gemma]

Question on where to put the files.

For the sidebar countdown zip - do these go in forum root?

And the zip for the cms countdown - where should these go also?

Upload the countdown folder to your forum root.

[kylek]

Thanks Gemma.

The cms countdown worked right away but the forum sidebar one has not been the same way.

Tried everything suggested in the posts and just got the countdown with all zeros.

Decided to try the second forum sidebar countdown, created it and it works, and the weird part is as soon as the second one started, it made the first one start to work also.

So only needing one I deleted the first one and kept the second and all is good.

[MagicTallGuy]

Hi Gemma,
i have installed the modification and it works well :)

Small problem:
how do i make the widget appear on the main page of the CMS

thanks for the mod !

[Gemma]

Small problem:
how do i make the widget appear on the main page of the CMS!

Did you see this post? https://vborg.vbsupport.ru/showpost.php?p=2219991&postcount=19

[MagicTallGuy]

yes, I believe that I followed those instructions properly, but the countdown is showing up inside some of the section widgets - not on the home page.

[Gemma]

Ah got you, you will need to add the widget to the 'Home' layout.

Go to AdminCP > vBulletin CMS > Layout Manager

Choose edit 'Home', add the countdown from the widget selections then drag it to where you want it on the grid layout. Save.

[MagicTallGuy]

works perfect now - Thanks alot Gemma :)

[westy543]

Works fantastic, looks great on my forums. :)

[K4GAP]

In my admin cp under Styles & Templates, there is no selection to create new template.

I'm running 4.1.5

[Gemma]

In my admin cp under Styles & Templates, there is no selection to create new template.

I'm running 4.1.5

Sorry GaryT, I missed a bit out :o

Go to AdminCP > Styles and Templates > Style Manager > Add New Template

[Scalemotorcars]

Curious if this could be adapted to work with the poll forum block having the settings taken automatically from when the poll ends....

I'm using this one here. https://vborg.vbsupport.ru/showthread.php?t=266481&highlight=poll

[Gemma]

Curious if this could be adapted to work with the poll forum block having the settings taken automatically from when the poll ends....

I'm using this one here. https://vborg.vbsupport.ru/showthread.php?t=266481&highlight=poll

Sorry, not something I've looked at or considering.

[Scalemotorcars]

Thanks Gemma. Ill put in a mod request. Maybe someone can figure it out.

[tidus78]

Hi Gemma.

Countdown is working on my 4.1.5. but not the content....
I would like to display an image on the countdown, but nothing appears by inserting the contents between the tags <div></div>

[Gemma]

Hi Gemma.

Countdown is working on my 4.1.5. but not the content....
I would like to display an image on the countdown, but nothing appears by inserting the contents between the tags <div></div>

Add it to the block_template after </script>

So you would have something like -

<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 23,
'month': 8,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'gmt': true

}
});
});
</script>
<div align="center"><img src="http://www.imageurl.com/image.gif" alt="Image Title" width="XXpx" height="XXpx" /></div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>

[tidus78]

Ok now it's working :)

Just another little question : I installed the second countdown, is it normal that line you see in the picture attached?

https://vborg.vbsupport.ru/

[Gemma]

Ok now it's working :)

Just another little question : I installed the second countdown, is it normal that line you see in the picture attached?

http://img801.imageshack.us/img801/4301/catsqnx.jpg

No it shouldn't have a line.

Try adding a <div> tag above you image code so it looks like

<div>
<div align="center"><img src="http://www.imageurl.com/image.gif" alt="Image Title" width="XXpx" height="XXpx" /></div>

[tidus78]

It doesn't work :erm:

[basilrath]

nice one works good :)

kudos

[Gemma]

It doesn't work :erm:

Can you send me a link to your site so I can check the source?

[Gemma]

Just to confirm that the countdown should also work in any modification that has a sidebar. I've added it to my arcade sidebar and it works perfectly.

[SPEEDKILLZ]

This is very nice but im getting all 0's.. i did exactly as explained? any suggestions? thanks

[basilrath]

Have you the correct paths to the src files?

[SPEEDKILLZ]

Have you the correct paths to the src files?

plz explain. this is what i put in . thanks

<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 23,
'month': 8,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'gmt': true

}
});
});
</script>
<div align="center"><img src="<a href="http://s1081.photobucket.com/albums/j356/stanmanr1/?action=view&amp;current=Call-of-Duty-MW3.png" target="_blank"><img src="http://i1081.photobucket.com/albums/j356/stanmanr1/Call-of-Duty-MW3.png" border="0" alt="Photobucket"></a>"><br/><br/>
<span class="digit">Modern Warfare 3</span><br/><br/></div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>


and in the block manager i put block_countdown and <div></div>

everything appears and shows up nice but numbers are all on 0

[basilrath]

Make sure you have the paths to relevant src in red correct in bold


<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>

[SPEEDKILLZ]

Make sure you have the paths to relevant src in red correct in bold


<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>

sry new at this, do i need to add something? or change something? thanks

[basilrath]

whats your forum path

[SPEEDKILLZ]

is there something i have to add to the folder of the template i added to?

[SPEEDKILLZ]

chronicgamerz.com/forum.php

/public_html/countdown

[Gemma]

Did you change the target date?

$('#countdown').countDown({
targetDate: {
'day': 23,
'month': 8,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'gmt': true

}
});
});

[SPEEDKILLZ]

yes just the numbers.

[SPEEDKILLZ]

never mind im a freaking idiot lol i added the months and days up to to deadline instead of just to date to be released.. sorry for the mix up, been a long day. Great mod Thanks for help

[basilrath]

i have just checked and the countdown is now working ???

[Micha66]

hi i need some help
weeks, days and so on are allways on 0
it worked only 1 time in the beginning, than i changed something
i wnt the counter as a widget.

[Gemma]

i wnt the counter as a widget.

Did you try this - https://vborg.vbsupport.ru/showpost.php?p=2219991&postcount=19

[Micha66]

yes i tried, but no succsess

i left the uploaded files from sidebar_countdown1.0.2.zip on the server. was it right?

i also wrote:

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>

in the footer.

By the way: Your support here is really great. Thanks in advance.

[Gemma]

No you don't need to add anything to the footer. When you add the widget/sidebar code make sure you change the targetDate values tot he date you want to countdown to.

[BlueCheri]

Working fine, thanx.

Some setting need to do :(

Image attached, how to fix this?

Want to do countdown for X'mas

Thanx in advance.

[Gemma]

Looks like the css file is missing, did you upload the files correctly?

[BlueCheri]

Yes

Looks like the css file is missing, did you upload the files correctly?

[Gemma]

Can you send me a link to your site?

[wally07]

Hi Gemma,

the countdown works perfect!

Is there any way to make it timezone specific?

[Gemma]

Hi Gemma,

the countdown works perfect!

Is there any way to make it timezone specific?

Sorry, I haven't been able to make it timezone specific but this might be helpful, instead of using the targetDate command use targetOffset. So using the example code below, the countdown would be set to expire for everyone in 5 days, 4 minutes and 15 seconds (from when going live) - not sure if that would be helpful?

<script type="text/javascript">
// Set the Countdown
jQuery(document).ready(function() {
$('#countdown').countDown({
targetOffset: {
'day': 5,
'month': 0,
'year': 0,
'hour': 0,
'min': 4,
'sec': 15
}
});
});
</script>If you want to use that method of countdown just replace this part of the code

<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
}
});
});
</script>And set the countdown to suit your needs.

[Savage Circuits]

Sadly I can't get the widget to even show up in the CMS. I have several custom widgets though most aren't used all the time. When I add this one no frame even shows up. That in itself kind of concerns me. Any ideas why it wouldn't even show up? Running 4.1.5

[Savage Circuits]

I found that if I just use the default name for the widget the frame shows up, but not the icon and I see, "{vb:raw widget_title}" above the counters which all read 00. But that proves there's something wrong in the other widget which prevents it from even being used. I have all three .js files the CHMOD of 775 and the css files all where they're supposed to go.

FYI, if you just download the zip in post#19 you do not get all the files needed it seems.

[Gemma]

FYI, if you just download the zip in post#19 you do not get all the files needed it seems.

Yes, I'm aware of that but since this isn't a CMS widget I never added them to the OP zip. I linked to them in case anyone wanted to adapt it to be a CMS widget and because someone a few posts above #19 requested it.

As for your widget not showing up, have you created the vbcms_widget_countdown template? You also need to add the widget to your grid layout and you may need to clear the CMS cache.

[Savage Circuits]

Apologies...I did not create the template. I pasted the code into the widget. =( Okay, we'll try again.

[Savage Circuits]

Okay, I got it working! Thanks for all your help!

[wally07]

Sorry, I haven't been able to make it timezone specific but this might be helpful, instead of using the targetDate command use targetOffset. So using the example code below, the countdown would be set to expire for everyone in 5 days, 4 minutes and 15 seconds (from when going live) - not sure if that would be helpful?



Thanks Gemma but that didn't work either. Every time you would load the page, the countdown would start back at 5 days, 4 minutes and 15 seconds.

Your countdown is just damn sexy not to use! :o :D The countdown timezone timers I found on Google are fugly. lol

[Gemma]

I'll have a look when I get some free time during the week :)

[aberg]

Sorry but I'am stuck on the widget:

Configure the new widget
Enter Static HTML - <div></div>
Template Name - vbcms_widget_countdown
Save

Please do you have a example what I needed to do here?
Thank you!

[Gemma]

Sorry but I'am stuck on the widget:

Configure the new widget
Enter Static HTML - <div></div>
Template Name - vbcms_widget_countdown
Save

Please do you have a example what I needed to do here?
Thank you!

AdminCP > vBulletin CMS > Widgets > Create New Widget (then fill in the details)

Widget Type - Static HTML
Title - Countdown CMS Widget
Description - blah blah

Save. Next click the configure option in your newly created Countdown CMS Widget.

In the Enter Static HTML code box put the following - <div></div>
In Template Name put - vbcms_widget_countdown

Save. Then click Clear the CMS Cache in the sidebar menu.

[Gemma]

Thanks Gemma but that didn't work either. Every time you would load the page, the countdown would start back at 5 days, 4 minutes and 15 seconds.

Your countdown is just damn sexy not to use! :o :D The countdown timezone timers I found on Google are fugly. lol

The only other thing I was able to come up with was setting the standard time as Universal Coordinated Time (UTC) which isn't much use either :(

<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 31,
'month': 12,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
'utc': true
}
});
});
</script>

[GamersChallenge]

how do I make a cms widget without the tittle?

[Gemma]

how do I make a cms widget without the tittle?

Remove this part from the vbcms_widget_countdown template

<h3><img src="{vb:raw vboptions.bburl}/countdown/style/countdown.png" alt="" /> {vb:raw widget_title}</h3>

Or, if you want the clock image but not the title just remove {vb:raw widget_title}

[Gemma]

No real update, all I've done is added additional instructions on how to create a widget for the CMS and how to add more than one countdown to the OP.

Another thing that can be done using the code is creating more than one countdown on your forum index page (forumhome).

By creating a table, using the basic countdown code and calling countdownX, countdownY and countdownZ I've been able to create 3 separate countdowns. (see attached)

Live demo - http://www.forumbanter.com/forum/

[Trevor Matthews]

Hi

I just installed the mod and I thought it worked perfectly but then I realised all the widgets on the right side of the Home page had been moved to the left side of the screen.

Did I do something wrong or is this an issue with 4.1.7

[Gemma]

Can you send me a link to your site please, also what did you install - the forumblock or CMS block?

[Trevor Matthews]

Sorry, I installed the cms part and created a widget to go on the forum home page. I added it to the left of my three home page columns. All of the widgets that should be in the right side column are all displayed on the left :D

I deleted the widget but I could add it back in for a little while tomorrow if you wanted to see the problem.

[Trevor Matthews]

The site is www.television-magazine-forum.co.uk

[Gemma]

Sorry, I installed the cms part and created a widget to go on the forum home page. I added it to the left of my three home page columns. All of the widgets that should be in the right side column are all displayed on the left :D

I deleted the widget but I could add it back in for a little while tomorrow if you wanted to see the problem.

The site is www.television-magazine-forum.co.uk (http://www.television-magazine-forum.co.uk)

If you PM me when you've set the widget up again I'll have a look and have a better understanding. Or take a screenshot if that is easier.

Did you upload the contents of the sidebar_countdown1.0.2.zip too? (those files are required)

[Trevor Matthews]

I actually did upload those but wasn't sure if I needed to.
All the files are in a folder called countdown.

I will try a screenshot for you.
Thanks.

[wilburshere]

i like it installed both forum sidebar and cms widget very nice would like the widget smaller 240px but i can live with it

[Gemma]

i like it installed both forum sidebar and cms widget very nice would like the widget smaller 240px but i can live with it

For the CMS widget? Replace the countdown_cms.css contents with this, should fit nicely into a 240px block. (though the font is a little small for my own liking)

You can play about with the css file (possibly change the font-family and some of the padding to suit)

#countdown {
height: 42px;
padding: 2px 0 2px 0;
}

.dash {
width: 19px;
height:38px;
float: left;
margin-left: 12px;
padding-left: 12px;
border-left: 1px solid;
position: relative;
}

.first {
margin-left: 18px;
padding-left: 0;
border-left: 0;
}

.dash .digit {
font-size: 1.3em;
font-weight: bold;
float: left;
font-family: Arial, sans-serif;
color: #5C7099;
position: relative;
}

.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 0px;
font-family: Arial, sans-serif;
font-size: 8px;
color: #5C7099;
text-transform: uppercase;
letter-spacing: 0px;
}

[GreyGhost]

Hi Gemma,
First up... Excellent mod, Works great!

I did search and read most posts and didn't see this mentioned, so I appologize if it's already been asked and answered.

Is there a way of dropping the "WEEKS" altogether and changing the display to
DAYS | HRS | MINS | SECS

i.e. instead of 4 weeks, 6 days, 3 Hrs, 45 Mins, 10 Secs
it would display as... 34 Days, 3 Hrs, 45 Mins, 10 Secs

Doing it this way would allow for a narrower column without losing any real detail.

8-)

.

[Gemma]

Try this,

In the template replace the <script> part with something like this (ie add the omitWeeks part)

<script type="text/javascript">
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 2011,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>Then replace this part of the template:
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>With:
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>And save.

You might need to then play about with the css file to fix .first as it probably won't be aligned properly, this will differ depending on the block width you are using but try changing the margin-left value.

.first {
border-left: 0 none;
margin-left: 17px;
padding-left: 0;

Hope that makes sense :confused::erm:

[GreyGhost]

Thanks Gemma,

That works perfectly! :D

133883

That's with a 230 sideblock, which will work on my CMS as well and I can still get it smaller with some minor font & dash changes. :up:

8-)

[Gemma]

Looks good. The only thing I don't like about your screenshot is the fact that Battlefield 3 is released in Australia before the UK :p

[GreyGhost]

Looks good. The only thing I don't like about your screenshot is the fact that Battlefield 3 is released in Australia before the UK :p

Haha, the funny thing is... I've ordered it from OzGameShop (half the price of Origin) but they're based in the UK... so I won't have it til a week after release. :(

8-)

[GreyGhost]

No real update, all I've done is added additional instructions on how to create a widget for the CMS and how to add more than one countdown to the OP.

Another thing that can be done using the code is creating more than one countdown on your forum index page (forumhome).

By creating a table, using the basic countdown code and calling countdownX, countdownY and countdownZ I've been able to create 3 separate countdowns. (see attached)

Live demo - http://www.forumbanter.com/forum/

Hi Gemma,

When you say "By creating a table," am I correct that you create a single template that includes the code for all 3 countdowns wrapped within a table?

Then make the appropriate block or widget that uses that template?

8-)

[pantani]

Works fine thank you, only thing is when countdown is active, the other articles are way down?? What could i do to make this normal again??

https://vborg.vbsupport.ru/external/2011/10/32.jpg

[Gemma]

Works fine thank you, only thing is when countdown is active, the other articles are way down?? What could i do to make this normal again??

https://vborg.vbsupport.ru/external/2011/10/32.jpg

Looks like I've missed a couple of closing </div> tags, add </div></div> to the bottom of the vbcms_widget_countdown template and see if that helps.

[pantani]

Nope, did not help :(

[GreyGhost]

Looks like I've missed a couple of closing </div> tags, add </div></div> to the bottom of the vbcms_widget_countdown template and see if that helps.

Don't think it's </div> tags, I get the same thing whenever I try to add anything containing javascript to the cms home page.
I've tried adding it as a widget, Article, Static HTML, Direct php AND by adding the javascript to the footer (as per the forum/wgo instructions).

If I remove the javascript then it displays correctly.. but obviously doesn't function.

ATM I'm trying a different approach... I created a php page containing 3 countdown timers laid out within a table etc. (including the javascript). When I call this page directly the 3 countdown timers appear as they should and functioning correctly.
The plan is to create a PHP Direct Eval and call this page using a php "include" ... but I'm struggling to get this to work in a PHP Direct Eval page, actually, I'm struggling to get anything to work with the CMS's PHP Direct function.

8-/

[Gemma]

I've removed support for the CMS widget just now, can't figure out why it has suddenly stopped working.

[1320Nation]

Is there ANYWAY to get this mod to work with the sidebar in vBadvance?

[GreyGhost]

I've removed support for the CMS widget just now, can't figure out why it has suddenly stopped working.

I got mine working fine..
was just a matter of creating a Grid that was suitable for my layout.

8-)

133882

[Gemma]

Is there ANYWAY to get this mod to work with the sidebar in vBadvance?

I'll install vBAdvanced and have a look

[Gemma]

I'll install vBAdvanced and have a look

This is based on your CMPS columns being set at 240px (if you change them to a wider or narrower setting you'll need to work out the css changes yourself)

Download the zip archive in the OP and upload the files. (don't change the file or folder structure)

AdminCP > vBa CMPS > Add Module

Add a new Template Module

Give it a name and set it to active.

Template to include: adv_portal_countdown
Template Content:
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});
</script>
<div>
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>Set this part to activate the countdown

targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}Set usergroup permissions. Save.

AdminCP > vBa CMPS > Edit Pages

Then add it to whatever page you want it to appear.

[1320Nation]

Gemma, your tech support on this mod is off the chain. Thank you so much for the detailed install instructions. They made all the difference. I installed this mod on my 4.1.7. version board and everything worked perfect the 1st time. I looked for some kind of paypal support the developer area above but didn't see it anywhere. I wanted to send you some $ to show my appreciation for your extra effort. Thanks again!

[Gemma]

Gemma, your tech support on this mod is off the chain. Thank you so much for the detailed install instructions. They made all the difference. I installed this mod on my 4.1.7. version board and everything worked perfect the 1st time. I looked for some kind of paypal support the developer area above but didn't see it anywhere. I wanted to send you some $ to show my appreciation for your extra effort. Thanks again!

You're welcome :)

[ofir24]

i didn't try it yet, what happen if someone post that counting message and the time collapse to zero, it's says realsed "XX time" ago? or it's just vanished?

[Gemma]

i didn't try it yet, what happen if someone post that counting message and the time collapse to zero, it's says realsed "XX time" ago? or it's just vanished?

Currently there isn't any indicator once the countdown is complete but you can do this.

In whichever template you are using (block_countdown, adv_portal_countdown etc) look for the code similar to this

<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,
}
});
});
</script>Replace it with

<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
jq('#complete_info_message').slideDown();
}
});
});
</script>Amend the targetDate settings

Still in your template find:

<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>Below that add:

<div class="info_message" id="complete_info_message" style="display: none;">
Countdown complete
</div>You can change Countdown complete to whatever message you want.

Save the template.

Open the css file and add the following

.info_message {
color: #f40c1d;
text-align: center;
margin: auto;
font-weight: bold;
}Again you can change the colour to whatever you wish (this one is red)

Save the css file and re-upload.

Now once the countdown has expired your message will slide down below the timer. (see attached image)

[Gemma]

Updated: 1.0.3 - Now using jquery-1.6.1.min.js and added noConflict to script

Hopefully the inclusion of noConflict will fix the instances of the countdown showing zeros for some people. Also added some links to examples on vB CMS, Forum Index and in another mod that contains a sidebar (in this case v3 Arcade)

To upgrade, replace whichever template(s) you are using with the corresponding one(s) in the OP and set your countdown dates.

[1320Nation]

How do you suggest the update be performed? Should we reload everything, or upload particular files?

[Gemma]

Only the template (whichever one(s) you use) needs replaced if you're upgrading, it is only the script parts that have changed so it should be easy enough to compare and edit if you don't want to replace it all.

[1320Nation]

I use info from thread #122. Where is the temple text I should use?

[Gemma]

I use info from thread #122. Where is the temple text I should use?

I've updated all the templates which are linked in the OP - just replace your template with the one in post #122 and add your targetDate information.

[1320Nation]

Ok so I tried adding the code in for the Countdown Complete message shown in thread #126 and it would not display. Does my setup need something additional, or could it be something I'm not doing right?

[Gemma]

Ok so I tried adding the code in for the Countdown Complete message shown in thread #126 and it would not display. Does my setup need something additional, or could it be something I'm not doing right?

Sorry, I forgot to change a bit of the code. It should be

<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
jq('#complete_info_message').slideDown();
}
});
});
</script>Also, it looks like the message was 'spilling out' of the module block so I've moved the code around, the message will now appear above the countdown (only for vB Advanced module)

Find:
<div id="countdown">Above that add:
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown complete
</div>
<img src="clear.gif" height="10" /><br />

I'm not familiar with vB Advanced but if you're still having problems let me know and I'll figure it out :)

[1320Nation]

I followed instructions in thread #133 and had no luck. It gave me all 00's and I there wasn't any countdown complete message showing either.

[Gemma]

Hmmm, maybe you don't have the jquery-1.6.1.min.js file - I think I'm going to revert back to using 1.4.1 anyway.

Try changing this line back to the original one

<script language="Javascript" type="text/javascript" src="clientscript/jquery/jquery-1.6.1.min.js"></script>To this:
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>

If that doesn't help, PM me a link to your site and I'll have a look.

[1320Nation]

Not sure what I did, or didn't do, but I did manage to get the mod working proper even with the jquery-1.6.1.min.js file. Please feel free to edit and remove any unnecessary post clutter so that others wont get confused that may want to add this to their similar setup.

Thanks again for the great tech support!

Btw, where's that paypal address so I can send a donation. PM it to me if you prefer to.

[Gemma]

Not sure what I did, or didn't do, but I did manage to get the mod working proper even with the jquery-1.6.1.min.js file. Please feel free to edit and remove any unnecessary post clutter so that others wont get confused that may want to add this to their similar setup.

Thanks again for the great tech support!

Btw, where's that paypal address so I can send a donation. PM it to me if you prefer to.

Cool, glad you've got it working. I've actually reverted back to using jquery-1.4.1.js, I noticed some of the digits were disappearing (but that might be because I've got 8 different counters running for demo purposes :o), if you notice digits disappearing simply change the from clientscript/jquery/jquery-1.6.1.min.js to countdown/js/jquery-1.4.1.js (no need to upgrade to v1.0.4 otherwise)

No need for a donation, the things I release are things I think people may find a use for, I've usually started them in the first place because i) I want it and ii) I want to learn something new and if someone has a problem then helping fix it enhances my learning :)

[1320Nation]

Well no doubt you are in this with a good attitude and outlook on what is going on. Thanks again for the great tech support!

[djpatch]

Sorry for my bad english.
I have installed locally your mod to try,but the countdown will not start.How can I fix, I vb4.1.7 ?

[1320Nation]

Sorry for my bad english.
I have installed locally your mod to try,but the countdown will not start.How can I fix, I vb4.1.7 ?

My guess would be you forgot to enter the info in the code below that tells your countdown when it should expire? Btw, these dates and such need to be Your info and not what I have shown here below.

'day': 19,
'month': 7,
'year': 2011,
'hour': 23,
'min': 59,
'sec': 59,

[djpatch]

This is my ForumHome
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
{vb:raw headinclude}
<title>{vb:raw vboptions.bbtitle}</title>

<vb:if condition="$vboptions['storecssasfile']">
{vb:cssfile forumhome-rollup.css}
<vb:else />
{vb:cssfile forumbits.css,forumhome.css,widgets.css,sidebar.cs s,options.css,tagcloud.css}
</vb:if>

<!--[if lt IE 8]>{vb:cssfile forumbits-ie.css,sidebar-ie.css,options-ie.css}<![endif]-->
<vb:if condition="$show['sidebar']">
<script type="text/javascript" src="{vb:stylevar yuipath}/animation/animation-min.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
var sidebar_align = '{vb:raw show.sidebarposition}';
var content_container_margin = parseInt('{vb:math {vb:stylevar forum_sidebar_width}+{vb:math {vb:stylevar padding}*2}}');
var sidebar_width = parseInt('{vb:stylevar forum_sidebar_width}');
</script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/vbulletin-sidebar.js?v={vb:raw vboptions.simpleversion}"></script>
</vb:if>
{vb:raw headinclude_bottom}
</head>
<body>

{vb:raw header}

{vb:raw navbar}

<div id="pagetitle">
<h1>{vb:raw vboptions.bbtitle}</h1>
<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
</div>

<vb:if condition="$show['sidebar']">
<div id="content_container"<vb:if condition="$show['sidebarposition'] == 'left'"> class="contentright"</vb:if>>
<div id="content">
</vb:if>
<!-- main -->
{vb:raw template_hook.forumhome_above_forums}
<ol id="forums" class="floatcontainer">
{vb:raw forumbits}
</ol>
{vb:raw template_hook.forumhome_below_forums}
<!-- /main -->

<div class="navlinks">
<a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&amp;markreadhash={vb:ra w bbuserinfo.securitytoken}" rel="nofollow">{vb:rawphrase mark_forums_read}</a>
<vb:if condition="$vboptions['forumleaders']">|
<a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow">
<vb:if condition="$vb_suite_installed">
{vb:rawphrase view_site_leaders}
<vb:else />
{vb:rawphrase view_forum_leaders}
</vb:if>
</a></vb:if>
</div>
{vb:raw forumhome_markread_script}

{vb:raw ad_location.board_after_forums}

<!-- what's going on box -->
<br />
<div id="wgo" class="collapse wgo_block block">
<center><h2 class="blockhead">CountDown</h2></center>
<div class="blockbody formcontrols floatcontainer">
<table align="center"><center>
<tr>
<td class="blocksubhead" align="center" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown4').countDown({
targetDate: {
'day': 10,
'month': 01,
'year': 2012,
'hour': 10,
'min': 10,
'sec': 10,
}

});
});

</script>
<div align="center"><img src="http://*************************" alt="Image Title" width="150px" height="90px" /></div>
<span class="digit">Titolo del Countdown</span><br/><br/></div>
<div>

<div id="countdown4">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li></div>
</td></div>
</center>
</td>

<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown3').countDown({
targetDate: {
'day': 10,
'month': 10,
'year': 2012,
'hour': 10,
'min': 10,
'sec': 10,
}
});
});

</script>
<div align="center"><img src="http*********" alt="Image Title" width="150px" height="90px" /></div>
<span class="digit">Titolo del Countdown</span><br/><br/></div>
<div>

<div id="countdown5">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li></div>
</td></div>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown6').countDown({
targetDate: {
'day': 10,
'month': 10,
'year': 2012,
'hour': 10,
'min': 10,
'sec': 10,
}
});
});

</script>
<div align="center"><img src="http:********************" alt="Image Title" width="150px" height="90px" /><div>
<span class="digit">Titolo del Countdown</span><br/><br/></div>
</div>
<div id="countdown6">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li></div>
</td></div>
</center>
</td>
<tr>
</tr>
</table></div></div>
<br />
<div id="wgo" class="collapse wgo_block block">
<h2 class="blockhead">{vb:rawphrase whats_going_on}</h2>
<div class="blockbody formcontrols floatcontainer">
{vb:raw template_hook.forumhome_wgo_pos1}
<vb:if condition="$show['loggedinusers']">
<!-- logged-in users -->
<div id="wgo_onlineusers" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/users_online.png" alt="{vb:rawphrase currently_active_users}" />{vb:rawphrase currently_active_users}</h3>
<div>
<p>{vb:rawphrase there_are_x_y_online_link, {vb:raw totalonline}, {vb:raw session.sessionurl_q}} <span class="shade">{vb:rawphrase x_members_and_y_guests, {vb:raw numberregistered}, {vb:raw numberguest}}</span></p>
<p>{vb:rawphrase most_users_ever_online_was_x_y_at_z, {vb:raw recordusers}, {vb:raw recorddate}, {vb:raw recordtime}}</p>
<vb:if condition="$activeusers">
<ol class="commalist" id="wgo_onlineusers_list">
<vb:each from="activeusers" value="loggedin">
<li> {vb:stylevar dirmark}<a class="username" href="{vb:link member, {vb:raw loggedin}}">{vb:raw loggedin.musername}</a>{vb:raw loggedin.invisiblemark}{vb:raw loggedin.buddymark}</li>
</vb:each>
</ol>
</vb:if>
</div>
</div>
<!-- end logged-in users -->
</vb:if>
{vb:raw template_hook.forumhome_wgo_pos2}
<vb:if condition="$show['upcomingevents']">
<div id="wgo_events" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/event.png" alt="{vb:rawphrase todays_events}" /><vb:if condition="$show['todaysevents']">{vb:rawphrase todays_events}<vb:else />{vb:rawphrase upcoming_events_for_the_next_x_days, {vb:raw vboptions.showevents}}</vb:if></h3>
<ol>
{vb:raw upcomingevents}
</ol>
</div>
</vb:if>
{vb:raw template_hook.forumhome_wgo_pos3}
<vb:if condition="$show['birthdays']">
<!-- today's birthdays -->
<div id="wgo_birthdays" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/birthday.png" alt="{vb:rawphrase todays_birthdays}" />{vb:rawphrase todays_birthdays}</h3>
<ol class="commalist">
{vb:raw birthdays}
</ol>
</div>
<!-- end today's birthdays -->
</vb:if>
{vb:raw template_hook.forumhome_wgo_pos4}
<div id="wgo_stats" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}" />{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}</h3>
<div>
<dl>
<dt>{vb:rawphrase threads}</dt>
<dd>{vb:raw totalthreads}</dd>
<dt>{vb:rawphrase posts}</dt>
<dd>{vb:raw totalposts}</dd>
<dt>{vb:rawphrase members}</dt>
<dd>{vb:raw numbermembers}</dd>
<vb:if condition="$show['activemembers']">
<dt>{vb:rawphrase active_members}</dt>
<dd>{vb:raw activemembers}</dd>
</vb:if>
</dl>
<p>{vb:rawphrase welcome_to_our_newest_member_x, {vb:link member, {vb:raw newuserinfo}}, {vb:raw newuserinfo.username}}</p>
{vb:raw template_hook.forumhome_wgo_stats}
</div>
</div>
<div id="wgo_legend" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/legend.png" alt="{vb:rawphrase icon_legend}" />{vb:rawphrase icon_legend}</h3>
<div>
<dl id="icon_legends" class="icon_legends">
<dt><img src="{vb:stylevar imgdir_statusicon}/forum_new-16.png" alt="{vb:rawphrase new_posts_forum}" /></dt><dd>{vb:rawphrase new_posts_forum}</dd>
<dt><img src="{vb:stylevar imgdir_statusicon}/forum_old-16.png" alt="{vb:rawphrase no_new_posts_forum}" /></dt><dd>{vb:rawphrase no_new_posts_forum}</dd>
<vb:if condition="$vboptions['showlocks']"><dt><img src="{vb:stylevar imgdir_statusicon}/forum_lock-16.png" alt="{vb:rawphrase forum_is_closed_for_posting}" /></dt><dd>{vb:rawphrase forum_is_closed_for_posting}</dd></vb:if>
<dt><img src="{vb:stylevar imgdir_statusicon}/category-16.png" alt="{vb:rawphrase category_forum}" /></dt><dd>{vb:rawphrase category_forum}</dd>
<dt><img src="{vb:stylevar imgdir_statusicon}/forum_link-16.png" alt="{vb:rawphrase link_forum}" /></dt><dd>{vb:rawphrase link_forum}</dd>
{vb:raw template_hook.forumhome_icon_legend}
</dl>
</div>
</div>
{vb:raw template_hook.forumhome_wgo_pos5}
</div>
</div>
<!-- end what's going on box -->

{vb:raw ad_location.board_below_whats_going_on}
<vb:if condition="$show['sidebar']">
</div>
</div>

<div id="sidebar_container"<vb:if condition="$show['sidebarposition'] == 'left'"> class="sidebarleft"</vb:if>>
<a id="sidebar_button_link" href="#">
<vb:if condition="$show['sidebarposition'] == 'left'">
<img id="sidebar_button" src="{vb:stylevar imgdir_misc}/tab-collapsed-left.png" alt="" />
<vb:else />
<img id="sidebar_button" src="{vb:stylevar imgdir_misc}/tab-collapsed.png" alt="" />
</vb:if>
</a>
<ul id="sidebar">
{vb:raw sidebar}
</ul>
</div>
</vb:if>

{vb:raw footer}
</body>
</html>


instead the countdown inserted in the sidebar works perfectly

[Gemma]

I'd appreciate you not linking to images from my site.

Aslo, if the javascript isn't working in your footer you may need to include it within the forumhome template, like so:

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown3').countDown({
targetDate: {
'day': 10,
'month': 10,
'year': 2010,
'hour': 10,
'min': 10,
'sec': 10,
}
});
});

</script>

[ahmedipa]

so nice script thank you so much

[Juggernaut]

Love this mod, couldn't get the vbadvanced module to work, but it works wonderfully in the forum sideblock. :)

[Crxssfade]

133882

Hey there, Gemma, great mod. Thank you very much.

Would you be able to explain how to achieve a look like this on the FORUMHOME template? Including what I need to edit.
Thanks!

[Gemma]

Love this mod, couldn't get the vbadvanced module to work, but it works wonderfully in the forum sideblock. :)

The CMS and vBA CMPS give me a headache lol, what couldn't you get working Countdown or layout?) and I'll try and reproduce it.

Hey there, Gemma, great mod. Thank you very much.

Would you be able to explain how to achieve a look like this on the FORUMHOME template? Including what I need to edit.
Thanks!

The attached image is from the CMS page (needs a modified grid) not FORUMHOME, you can have it display on the forum index by creating a table and adding the countdown code within it.

On my own site I did it this way. In the FORUMHOME template find:
<!-- END content -->

{vb:raw template_hook.forumhome_wgo_pos5}

</div>

<!-- end what's going on box -->Above that add:

<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<center><h2 class="blockhead">TABLE TITLE</h2></center>
<div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td>
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message').slideDown();
}

});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message2').slideDown();
}

});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown2">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message2" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>

<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown3').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown3">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown4').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown4">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</li></center></td></tr></table></center></div>

I'm not supporting that though so you'd be best to try it out on a test site or using a test style.

[basilrath]

Works nice with a video within it also ......... nice work

http://www.tabletennistalk.co.uk/forum/forum.php

[Gemma]

Works nice with a video within it also ......... nice work

http://www.tabletennistalk.co.uk/forum/forum.php

Yeah, I used a youtube video before, also used an image with lytebox - you can use virtually anything with a little tweak to the coding :)

[1320Nation]

Question; When the countdown goes through it's cycle of being complete, does some of the text in the template used disappear? Reason I ask is I went to adv_portal_countdown template to start a new countdown expecting to just change info on different image location, change expired timer number from "0's", and the event name. But most of that section is gone. Here's an example of what my adv_portal_countdown template now look like after going through a set cycle:

<div align="center"><img

src="http://********.com/banners/frank/GrudgeBowl1.jpg"><br/><br/>
<span class="digit">Grudge Bowl-Valdosta, GA NOV.25-26th</span><br/><br/></div>
<div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown complete
</div>
<img src="clear.gif" height="10" /><br />
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>

[Gemma]

Question; When the countdown goes through it's cycle of being complete, does some of the text in the template used disappear? Reason I ask is I went to adv_portal_countdown template to start a new countdown expecting to just change info on different image location, change expired timer number from "0's", and the event name. But most of that section is gone. Here's an example of what my adv_portal_countdown template now look like after going through a set cycle:

<div align="center"><img

src="http://********.com/banners/frank/GrudgeBowl1.jpg"><br/><br/>
<span class="digit">Grudge Bowl-Valdosta, GA NOV.25-26th</span><br/><br/></div>
<div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown complete
</div>
<img src="clear.gif" height="10" /><br />
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>

If I remember correctly you placed some of the code in your headinclude template?

[1320Nation]

Gemma you were correct there were settings for the countdown in my headinclude template. However after entering the new countdown settings I'm only getting all 0's on the countdown. Any idea where I might look for a cure?

Btw, what would the chances be of making this a plugin/product so settings can be made in acp?

[Gemma]

Gemma you were correct there were settings for the countdown in my headinclude template. However after entering the new countdown settings I'm only getting all 0's on the countdown. Any idea where I might look for a cure?

Try going to AdminCP > vBa CMPS > Diagnostics and Rebuild the module cache.

Btw, what would the chances be of making this a plugin/product so settings can be made in acp?

Not something I'm looking at doing - however anyone else is free to take what I've done and expand on it.

[matrixmark]

Thanks for this, is working great

[kylek]

The CMS and vBA CMPS give me a headache lol, what couldn't you get working Countdown or layout?) and I'll try and reproduce it.



The attached image is from the CMS page (needs a modified grid) not FORUMHOME, you can have it display on the forum index by creating a table and adding the countdown code within it.

On my own site I did it this way. In the FORUMHOME template find:
<!-- END content -->

{vb:raw template_hook.forumhome_wgo_pos5}

</div>

<!-- end what's going on box -->Above that add:

<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<center><h2 class="blockhead">TABLE TITLE</h2></center>
<div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td>
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message').slideDown();
}

});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message2').slideDown();
}

});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown2">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message2" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>

<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown3').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown3">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown4').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});

</script>
<div align="center">LINK TO IMAGE</div>

<div id="countdown4">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</li></center></td></tr></table></center></div>I'm not supporting that though so you'd be best to try it out on a test site or using a test style.


Thanks Gemma!!

Been playing around with this and noticed if someone uses 1024 res it screws up the 4 countdowns in a row. And we do still get a lot of members that use 1024 x 768.

How would one break the layout so you would have 2 countdowns and then the next two countdown times below the first two? I have tried breaks, etc but still cant figure it out.

Something like this is what I am trying to achieve:

Countdown timer 1 - Countdown timer 2
Countdown timer 3 - Countdown timer 4

[Gemma]

Let me play around for a bit and I'll get back to you :)

[kylek]

Thank you again Gemma,

And actually I lied, we have 6 league games that I want to display so would like to have it break after the 3rd one if possible. So it would be 3 timers, then 3 below it (1 below for now). When we set up the last couple of tournament games I will figure out how to insert two more timers.

[Gemma]

we have 6 league games Ah ok, you can check out what I've done for 4 and see how it looks - I'll go and duplicate a couple of the countdowns now. I've attached a screen below and it is on the dark theme of my site if you want to check it out live.

Let me know if it looks ok

Edit: I can also omit the number of weeks for you if the countdowns are going to be less than 100 days - but might still need to play with the font sizes

[kylek]

That looks great on your new dark theme on your site. We do not need weeks as each game will be weekly but dont worry about it as you are going way out of your way to help us!

[Gemma]

Cool :)

This code should help you get started, any problems just shout and I'll look in the morning :)

<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="clientscript/jquery/jquery-1.4.4.min.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<center><h2 class="blockhead">BLOCK TITLE</h2></center>
<div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown1').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown1">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown2">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center></td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown3').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown3">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
</td></tr></td></table>
<table align="center">
<tr>
<td>
<center>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown4').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown4">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown5').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown5">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center></td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown6').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
<div id="countdown6">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</li></center></td></tr></center></table></div></div>All you should need to do is set up the 6 timers, and replace the instances of BLOCK TITLE, LINK TO YOUR IMAGE, IMAGE TITLE, OPTIONAL URL LINK and COUNTDOWN TITLE where applicable or remove them.

[kylek]

Looks great but have been playing with a default forumhome template and when I try to add it above or below the whats going on section our left sidebar disappears. It doesn't completely disappear but gets pushed down below the forum section.

[Gemma]

Looks great but have been playing with a default forumhome template and when I try to add it above or below the whats going on section our left sidebar disappears. It doesn't completely disappear but gets pushed down below the forum section.

Bugger, I missed a </div> tag to the end of the code; I've updated the code above :)

[Gemma]

Updated the demo link in first post.

I've also tested this using the latest jquery and didn't run into any problems running either a single countdown or multiple countdowns.

If you want to run it with the latest jquery replace this part of the template edit:

<script language="Javascript" type="text/javascript" src="clientscript/jquery/jquery-1.4.4.min.js"></script>with this:
<script language="Javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

[LoveStream]

Hello. good idea.

I have a question.
Can I use this for COUNTUP not countdown? Any idea?

[Gemma]

Hello. good idea.

I have a question.
Can I use this for COUNTUP not countdown? Any idea?

No, sorry.

[Poker Face]

Installed 4.1.8 CMS Widget... Thanks!

Hello. good idea.

I have a question.
Can I use this for COUNTUP not countdown? Any idea?

I would be very interested in this, as well!

I’d like to run one “up” and one “down” and at the same time, in widgets, on the CMS.

[Gemma]

Installed 4.1.8 CMS Widget... Thanks!

I would be very interested in this, as well!

I?d like to run one ?up? and one ?down? and at the same time, in widgets, on the CMS.

What would you run a count up timer for? :erm:

[Poker Face]

What would you run a count up timer for? :erm:

To bring attention to Extended Delay(s) on matters of the upmost importance.

[macrocamaleon]

Working great on 4.1.9

Really thanks for share !!!!

[piko]

This mod is cool. Great work.

"Change the settings of the countdown/js folder to CHMOD 775"

Note: If not work, change the settings of the countdown folder to CHMOD 775

The mod this is installed in foro.mediotiempo.com (http://foro.mediotiempo.com/)

Working on vB 4.1.9

Good bye.

[1320Nation]

Gemma, I sold my old site and built a new one. Could you please direct me to where I can find directions on adding a image to the countdown as well as a small youtube player.

And if you are able to do that, would you mind sending me a PM explaining how much time might be involved in turning this mod into a plugin with some added features. I have a on going need for the use of this mod and I may be interested in paying you to do the above mentioned. Thanks!

[Gemma]

Gemma, I sold my old site and built a new one. Could you please direct me to where I can find directions on adding a image to the countdown as well as a small youtube player.

After </script><div> you would want to add something like this

<img alt="" title="" src="URL TO YOUR IMAGE" width="150" height="225"><br/><br/>
<iframe width="240" height="160" src="http://www.youtube.com/embed/n7EpCILxKp4" frameborder="0" allowfullscreen></iframe><br/><br/>
</div>
And if you are able to do that, would you mind sending me a PM explaining how much time might be involved in turning this mod into a plugin with some added features. I have a on going need for the use of this mod and I may be interested in paying you to do the above mentioned. Thanks!

Sorry, this isn't something I'm looking at doing. On my old site I had 9 countdowns running and it would have been near impossible to use plugins to produce the effects I wanted. I think it gives great freedom as it is and that is why I have left it as template edits.

Also, I'm not long out of hospital and I'm not looking at doing any coding any time soon

However, anyone is free to use the code and make a plugin/product so you might have some luck by posting in the relevant request forums

[cc10]

Having a bit of a problem with this

when we had the sideblock it was right and counted down correctly, as you can see from the screenshot its now counting down wrong

any ideas as the code is set right as it should be, theres not 88days in a week for instance :eek:

[1320Nation]

Gemma, I appreciate your help. You have been great with the support you have given me each time I have needed it. I hope you are ok I saw where you mentioned of not being long out of the hospital. I installed the countdown using the instruction from reply #122 since I have VBAdvanced. However, in order to get it to work I had to search a lot to find the needed info. Changing the 1st line to read the 1.4.1 jquery.

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.6.1.min.js"></script>

Would there be any way to put all these necessary additions together? Like the image info you just provided for me.

Either way thanks for your help!

[Gemma]

Having a bit of a problem with this

when we had the sideblock it was right and counted down correctly, as you can see from the screenshot its now counting down wrong

any ideas as the code is set right as it should be, theres not 88days in a week for instance :eek:

Can you send me a link to your site so I can look at the code?

Gemma, I appreciate your help. You have been great with the support you have given me each time I have needed it. I hope you are ok I saw where you mentioned of not being long out of the hospital. I installed the countdown using the instruction from reply #122 since I have VBAdvanced. However, in order to get it to work I had to search a lot to find the needed info. Changing the 1st line to read the 1.4.1 jquery.

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.6.1.min.js"></script>Would there be any way to put all these necessary additions together? Like the image info you just provided for me.

Either way thanks for your help!

Sorry, I must have overlooked editing that post when I reverted back to using jquery-1.4.1 :o

[cc10]

Can you send me a link to your site so I can look at the code?

There you go gemma, thanks

http://www.thinkingcarptackle.co.uk/forum.php

[Gemma]

Ok, you've got omitWeeks set as true.

Do you want to show the number of weeks or remove the weeks and just show it as days, hours, minutes and seconds?

[cc10]

Ok, you've got omitWeeks set as true.

Do you want to show the number of weeks or remove the weeks and just show it as days, hours, minutes and seconds?

I would like it to show, weeks days hours mins secs.

[Gemma]

I would like it to show, weeks days hours mins secs.

Changing this part of the code omitWeeks: true to omitWeeks: false should fix your problem

For reference if you wanted to remove the weeks part entirely you would leave it set at true and then would need to replace this part of the code

<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>With this

<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>That would remove the WEEKS completely

[cc10]

Changing this part of the code omitWeeks: true to omitWeeks: false should fix your problem


Sorted, thanks gemma ;) :up:

[Gemma]

Sorted, thanks gemma ;) :up:

Your welcome :)

[thecore762]

Is it possible to add a countdown clock in a forum post?

[Gemma]

Is it possible to add a countdown clock in a forum post?

Sorry, no.

[Angle4cor]

After upgrading my forums to the newest, 4.1.12 version, my blocks with countdowns dissappeared. Any fix for that?

Thanks im advance

[Gemma]

Upgrading your forum shouldn't break anything

Are the template edits and files still in place and have you tried purging the block cache? (AdminCP > Forums & Moderators > Forum Block Manager)

[Angle4cor]

Ok, fixed. I'm using different style now and I forgot about moving the block_countdown templates to the new one.

[mgurain]

Can this be supported ?
We need the date to be based on user's forum time (not his pc), can any body do it ?
Or there some one like this ?

Regards,,

[Gemma]

Can this be supported ?


Sorry, I think I've supported this pretty well as time permits but I'm not looking at adding any more features to it.

[ibrahimkoky]

Gemma,, Still supporting this mod?

rad all posts tried to find a solution but can't
having the same problem as most guys here, the timer is zeros can't get it to work.

here is the time i set it to

<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 12,
'month': 09,
'year': 2012,
'hour': 23,
'min': 08,
'sec': 05,
}
});
});
</script>

[Gemma]

Gemma,, Still supporting this mod?

rad all posts tried to find a solution but can't
having the same problem as most guys here, the timer is zeros can't get it to work.

here is the time i set it to

<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 12,
'month': 09,
'year': 2012,
'hour': 23,
'min': 08,
'sec': 05,
}
});
});
</script>

Can you send me a link to your site so I can take a look?

[ibrahimkoky]

<a href="http://www.egytraderz.com" target="_blank">www.egytraderz.com</a>

[Gemma]

www.egytraderz.com (http://www.egytraderz.com)

Remove this code from your template. That shouldn't be there.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">Does it work now?

[ibrahimkoky]

workinggggggggggggg

thanks a lot. :up:

[ricki09]

3. Go to AdminCP > Styles and Templates > Style Manager > Add New Template

Title - block_countdown

how to remove this Template now???

[Gemma]

3. Go to AdminCP > Styles and Templates > Style Manager > Add New Template

Title - block_countdown

how to remove this Template now???

AdminCP > Styles & Templates > Style Manager > Edit Templates

Find block_countdown, click on it and then select 'Revert' from the controls panel

[ricki09]

Thanks its work!

[JabirA]

Hi Gemma,

Is it possible to let it repeat the countdown? For exmple: Let it count down to every weekend automatically..?

Kind regards

[mgurain]

Hi,
Could this good mod be phrased please ?

[espkaruna]

This works great in Firefox (13.0.1) but in Google Chrome and Explorer the countdown just displays a bunch of 00's I really could care less if it works right in Explorer, but finding a way to make this work in Chrome would be cool ;)

[JabirA]

It works great in Google chrome (last version)

[Gemma]

This works great in Firefox (13.0.1) but in Google Chrome and Explorer the countdown just displays a bunch of 00's I really could care less if it works right in Explorer, but finding a way to make this work in Chrome would be cool ;)

It works great in Google chrome (last version)

Works fine in Firefox right up to 14.0. It should also work fine in Google Chrome (tested up to version 20.0.1132.47), the latest version of Opera, IE9 and Safari 5.1.7

[espkaruna]

Works fine in Firefox right up to 14.0. It should also work fine in Google Chrome (tested up to version 20.0.1132.47), the latest version of Opera, IE9 and Safari 5.1.7


Ok, well I should rephrase that to say that on my site it is working on Firefox but not on Google Chrome (20.0.1132.47) or IE 9. I've tested it out with the above listed versions, and I have had other users tell me the same thing. This is on vbulletin 4.2.0 suite, so I don't know if another script that I am running is interfering with the countdown on chrome and IE or what. I do have a pretty heavily customized forum.

**edit**

Although I just tried adding this to my default style, and the same thing, works great in Firefox, not in the other two.

[Gemma]

Does it work on my site for you when viewing in either Chrome or IE9?

If you want to PM me a link to your site I'll have a look for you (might be a bit later on today as I'm quite busy away from computer stuff just now)

[espkaruna]

Yeah, when I go to your site it works fine in any browser. I'll play around with it a bit more and I sent you a pm so you can check it out if you want when you get a spare moment. Your prompt replies and assistance are much appreciated.

**Edit**

Actually, I just figured out what my issue was. I should have payed attention and realized that there was a reason why you had 23 hours, 59 min, and 59 sec entered for the target date. I tried to set it as 24 hours, 0 min, 0 sec. Firefox understood what I meant but I guess IE and Chrome didn't.

Works great for me now, and thanks Gemma for your support.

[Gemma]

I tried to set it as 24 hours, 0 min, 0 sec. Firefox understood what I meant but I guess IE and Chrome didn't.

For midnight it should be set to 00 hour, 00 min, 00 secs

Glad you got it working :)

[JabirA]

Hi Gemma,

Is it possible to let it repeat the countdown? For exmple: Let it count down to every weekend automatically..?

Kind regards


Gemma,

How about this?

[Gemma]

Hi Gemma,

Is it possible to let it repeat the countdown? For exmple: Let it count down to every weekend automatically..?

Kind regards

Oops, I didn't that post :o

No, not that I can think of. Sorry.

[JabirA]

No problem.

Thank you for your answer. ;)

[bzcomputers]

I'd had some visual issues with the timer since installing this a couple months ago. If you sat on a page with the timer for an extended amount of time it would not keep time very accurately and the animation would be off and at times cover up the labels (mins, secs).

After seeing you mention upgrading jquery to someone in a previous post I went and grabbed the latest version (1.7.2), installed it and updated the code to use it. This mod for me looks a lot better now visually with the new jquery version.

Figured I'd mention it for anyone else experiencing what I was. By the way I have the code installed in a sidebar block.

[wilford brimley]

if you are trying to do the display on forum home and getting 00's... he has the code wrong on the example.

you need to find the first line and change it from 1.4.4 to this

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>

cut and past that exactly^^

EDIT: i upgraded to 1.7.2 and the numbers seem to flip smoother.
http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/

[wilford brimley]

ok, i noticed when you use a sideblock it keeps the style of the other blocks with the graidents ect.

when you make it fresh on forum display it does not keep gradients and it makes a line on top of the counters.

https://vborg.vbsupport.ru/external/2012/07/45.png

do you know how to remove that line? it looks worse on certain skins.

[wilford brimley]

im putting the times in as eastern time. is there anyway for it to auto correct via javascript for the users actual timezone? like -1central and -3pacific? as you can see, I'm counting down live events, so it is usually like 10e/9c/7p

[wilford brimley]

if an event is in eastern time live, do i need to convert the say 8 oclock time to UTC with an offset to get it to show up at the right time for all users across the globe? so 8 oclock eastern is actually 0000 (midnight) in UTC sinceet is a-4 offet right now?

im confused.

[Gemma]

The current time is retrieved with JS so it's set to the client's time (whatever each individual member has set on their computer). You set the timer to 9.30pm on Christmas Day then it will countdown to that time differently for members if they are in different timezones.

[wilford brimley]

right, im just not sure if im putting the event in right.

if i want it to expire at 8 pm eastern do i put it as

<script type="text/javascript">
$(document).ready(function() {
$('#countdown5').countDown({
targetDate: {
'day': 14,
'month': 07,
'year': 2012,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>

i guess what I am asking, is the clock actually counting down from UTC or is it just using UTC layout? i think its just the layout.

so, if i put it to expire at 8pm(20) it will expire at 8pm in e/c/p. right? however, it needs to expire at 8 e, 7 c and 5 p.

if it was the other way, where you just enter what time the actual even ends at UTC then.. 8pm eastern would be the next day at midnight UTC. then it would expire all at the same time if it was converting your local time to when the event expires at UTC time. its just using the 24 hour clock now, not comparing it to actual UTC time.

sorry if im confusing.

[Gemma]

Put the hour as 20

[Gemma]

i guess what I am asking, is the clock actually counting down from UTC or is it just using UTC layout?

// Initiate Countdown
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 0,
'sec': 0,
// time set as UTC
'utc': true
}
});
});UTC can be set as above if it isn't already using that format

[wilford brimley]

ok thanks. im just trying to get it to expire all at the same time based on a live event. its at different local times. thanks, i was just using your template from the forum home version. thanks for all your help, ill try that code^ Do i enter it in block_countdown or individually on each countdown on forum home template?

[Gemma]

Most countdown timers I've seen work this way, you set the time and it will be matched to the users browser time (and timezone) when counting down - the only other way I've seen is to match the countdown timer to the server time.

Try changing the timezones on your computer, the countdown timer should change accordingly.

[Gemma]

Do i enter it in block_countdown or individually on each countdown on forum home template?

Individually on each countdown

[wilford brimley]

ok, setting it to that code up there^ seems to work. now it will keep the same countdown time no matter what time zone I set my computer to. thats how it needs to work. sorry for so much text. can i donate you some money on paypal? thanks.

anyone else, make sure you change "dashboard" to match your id of the countdown you are editing.

$('#countdown_dashboard').countDown({

[Gemma]

can i donate you some money on paypal? thanks.

No need really, but if you choose to you can donate by clicking on the Support Developer link in the OP.

anyone else, make sure you change "dashboard" to match your id of the countdown you are editing.

$('#countdown_dashboard').countDown({

Ooops, I'll change that in the post above.

[wilford brimley]

i think it needs the "omitWeeks: true" part as well. i did two events that both go n a saturday at 10 eastern and it is showing the countdown to be the same, ignoring that they are a week apart. i set the date right at "date" in the code. how do i add that?

[Gemma]

i think it needs the "omitWeeks: true" part as well. i did two events that both go n a saturday at 10 eastern and it is showing the countdown to be the same, ignoring that they are a week apart. i set the date right at "date" in the code. how do i add that?

This should work.

// Initiate Countdown
jQuery(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 0,
'sec': 0,
// time set as UTC
'utc': true
},
omitWeeks: true
});
});

[Draffi]

Hi!

It is possible to read multiple countdown-dates from a txt-file? I mean, if one countdown is finish, the next one is enter automaticaly?

Please, can somebody with coding skills help here, for this great Add-on?

Thanks in advance!

D.

[Bob_R]

So, if I wish to use this option: To show multiple countdowns on forumhome

I use Step 1 and then go to Post #158? Which template? FORUMHOME? And, where exactly do I place the code?

I just wish to be sure.

Thank you. :)

[Gemma]

So, if I wish to use this option: To show multiple countdowns on forumhome

I use Step 1 and then go to Post #158? Which template? FORUMHOME? And, where exactly do I place the code?

I just wish to be sure.

Thank you. :)

I've not looked at this since I built my new site, I might need to re-install it, but yes do step 1 then if you look back at post #153 it suggests to you where to place the code, although it depends where you want it to display - above forums or below forums?

[Bob_R]

I've not looked at this since I built my new site, I might need to re-install it, but yes do step 1 then if you look back at post #153 it suggests to you where to place the code, although it depends where you want it to display - above forums or below forums?

Thank you very, very much!

Here's an easy one for ya! :)

See the screen shot I attached. I need a fresh set of eyes, like yourself.

Notice how the first timer is a "touch" lower than the other 3.

How can I fix that? Again, much thanks! :up:

EDIT: How come 2 of the timers read Countdown Complete?

[Gemma]

EDIT: How come 2 of the timers read Countdown Complete?

The template for forumhome is really just a guide as to how you could display it, so in parts I included all the code including the bit to show a message when the timer was complete - that is what you are seeing when it says 'COUNTDOWN COMPLETE'

To remove it, search for

<div class="info_message" id="complete_info_message" style="display: none;">
Countdown Complete
</div>It may appear more than once. Delete it.

[Gemma]

Added it to my site, only thing I've done different is add the css to additional.css instead of having a file on the server. And I didn't bother with this line:

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>http://www.arcadejunkies.org/forum.php

[Bob_R]

The template for forumhome is really just a guide as to how you could display it, so in parts I included all the code including the bit to show a message when the timer was complete - that is what you are seeing when it says 'COUNTDOWN COMPLETE'

To remove it, search for

<div class="info_message" id="complete_info_message" style="display: none;">
Countdown Complete
</div>It may appear more than once. Delete it.

Thanks!!!!!!

What about the first part of my question in post #226 as per the screenshot?

[Gemma]

Can you post the code you countdown code you are using so i can take a look at it.

[Bob_R]

Here ya go!


<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<center><h2 class="blockhead">Upcoming Events</h2></center>
<div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td>
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 25,
'month': 12,
'year': 2012,
'hour': 23,
'min': 59,
'sec': 59
},
// onComplete function
onComplete: function() {
$('#complete_info_message').slideDown();
}

});
});

</script>
<div align="center">LINK TO IMAGE</div>
<span class="digit">Countdown to Christmas</span><br/><br/></div>

<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message2').slideDown();
}

});
});

</script>
<div align="center">LINK TO IMAGE</div>
<span class="digit">BLURB I WANT TO DISPLAY</span><br/><br/></div>

<div id="countdown2">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message2" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>

<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown3').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});

</script>
<div align="center">LINK TO IMAGE</div>
<span class="digit">BLURB I WANT TO DISPLAY</span><br/><br/></div>

<div id="countdown3">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown4').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});

</script>
<div align="center">LINK TO IMAGE</div>
<span class="digit">BLURB I WANT TO DISPLAY</span><br/><br/></div>

<div id="countdown4">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</li></center></td></tr></table></center></div>

[Gemma]

Hmmm. It displays fine on my test site so not sure where the problem lies.

edit: Just tried it on my main site too and it was fine.

[MG Zebra]

I don't really know how to use these blocks on vbulletin. Can you tell me how to put them on the site once they're created or direct me to where that information is please? Thanks.

EDIT: I figured out how to add it. Thanks.

[Bob_R]

Added it to my site, only thing I've done different is add the css to additional.css instead of having a file on the server. And I didn't bother with this line:

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>http://www.arcadejunkies.org/forum.php

What additional.css file? These are the 4 files listed on Step 1 of the instructions.

countdown/js/jquery-1.4.1.js
countdown/js/jquery.lwtCountdown-1.0.js
countdown/js/misc.js
countdown/style/main.css

Secondly, take the line of code you mentioned out? And more importantly where is it? I don't see it.

Thanks.

[Gemma]

What additional.css file? These are the 4 files listed on Step 1 of the instructions.

countdown/js/jquery-1.4.1.js
countdown/js/jquery.lwtCountdown-1.0.js
countdown/js/misc.js
countdown/style/main.css

Secondly, take the line of code you mentioned out? And more importantly where is it? I don't see it.

Thanks.

I took the code from the main.css file and added it into the additional.css template - AdminCP > Styles & Templates > Style Manager > Edit Templates > CSS Templates > additional.css

#countdown {
height: 46px;
padding: 2px 0 2px;
}
.dash {
border-left: 1px solid #5C7099;
float: left;
height: 44px;
margin-left: 10px;
padding-left: 10px;
position: relative;
width: 28px;
}
.first {
border-left: 0 none;
margin-left: 12px;
padding-left: 0;
}
.dash .digit {
color: #5C7099;
float: left;
font-family: Arial,sans-serif;
font-size: 24px;
font-weight: bold;
position: relative;
}
.dash_title {
bottom: 0;
color: #5C7099;
display: block;
font-family: Arial,sans-serif;
font-size: 9px;
letter-spacing: 0;
position: absolute;
right: 2px;
text-transform: uppercase;
}

After doing that I don't need the code below from the countdown block code - it may appear several times depending on how many countdowns you have appearing

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>

Also, I'm already running a version of jquery so I don't need to call on it in the countdown block template either so I removed this code.

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>

[Bob_R]

OK, thanks.

For the life of me I can't figure out way the first countdown block is just a "smidgen" lower than the other 3.

I even tried it on a different style/skin/template and same thing.

FWIW, I used the code in post #153 not post #158

[Gemma]

OK, thanks.

For the life of me I can't figure out way the first countdown block is just a "smidgen" lower than the other 3.

I even tried it on a different style/skin/template and same thing.

FWIW, I used the code in post #153 not post #158

Change:
$('#countdown').countDown({

To:
$('#countdown1').countDown({

And change:
<div id="countdown">

To this:
<div id="countdown1">

[Bob_R]

Nope. :(

[Bob_R]

Gemma, I got it.

Added:

<td class="blocksubhead" align="" valign="top">

Instead of:

<td>

towards the top of the code.

[DefiantComplex]

I like this little addition and want to add it to my site.

However, is there a way to make this run everyday rather then a selected date without having to manually change it every day?

[marccap]

There is alot of coding around on this mod - Whats the final coding for example for 4.2 cms homepage widget

I get this - Image (http://gyazo.com/8b320c6fc8625cff7f79362720a4d61f)

[fxdigi-cash]

I love this mod! I was looking for it so long...

is it possible to add milliseconds as well to the timer??

Update1: I can see this css code many times in the original code so one is enough to be on top of all code:
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>

Update2: works great on vb4.2.1. I just wish there is a way how to incorporate more auto features like start time, inserting rss to feed the code data filling the start time for example, how many blocks to hide and others to show... or adding more button to show the hidden blocks...

Thanks

[DoumDoum5058]

It's very good work
Works on VBulletin 4.2.1
Gemma, Thank you so much!

[fxdigi-cash]

Ok, there is a big update in here I made since I spent last 2 hours trying to add things up to this mod. You need to be aware that there are many errors in the code so I decided to post the one I fixed " no errors at all":

first, you need to insert the following links on top of the forumhome "if you want them to to be used on "forumhome" and in "header" if you want them to be used on every page:

<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>


always make sure to add css files before js files since the opposite way cause heavy load on page when refreshed or reloaded...

here is the code for the forumhome fixed containing 6 blocks as the coder posted on his original thread:

<div id="wgo" class="collapse wgo_block block"><center><h2 class="blocksubhead">block title</h2></center>
<div class="blockbody formcontrols floatcontainer">
<center><table style="text-align:center">
<tr><td class="blocksubhead" align="{vb:stylevar.left}" valign="top">

<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<div style="text-align:center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
<div id="countdown1">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>

<div class="underblock"></div>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<div>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<div style="text-align:center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown2">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">

<div>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<div style="text-align:center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown3">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>

</td></tr></table></center>
<center><table style="text-align:center">
<tr>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<div>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<div style="text-align:center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown4">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<div>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<div style="text-align:center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>

<div id="countdown5">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>

</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">

<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">

<div style="text-align:center"><img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /><br/><br/>
<span class="digit">
<b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/>
</div>
<div id="countdown6">
<div class="dash first days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>

</td></tr></table></center></div></div>

And here is the java codes separated from the original code, you need to copy and paste them just above the html code above:

<script type="text/javascript">
$(document).ready(function() {
$('#countdown1').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown3').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown4').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown5').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown6').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
omitWeeks: true
});
});
</script>

Last, but not least, you have the option to remove the css file in original post and add whatsoever inside that file to additional.css to reduce the page load and increase performance of the pages...

if you have any question about that, I will be passing by from time to time...

Cheers :)

[1320Nation]

Hi Gemma...

I had to install this mod again after redoing vbadvance and I can't get the counter to come off the 00's. Do you see anything wrong here?

<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
targetDate: {
'day': 31,
'month': 05,
'year': 2013,
'hour': 09,
'min': 00
},
// onComplete function
onComplete: function() {
jq('#complete_info_message').slideDown();
}
});
});
</script>
<div>
<img alt="" title="" src="URL TO YOUR IMAGE" width="150" height="225"><br/><br/>
<iframe width="240" height="160" src="http://www.youtube.com/embed/o7WtmOH4LFs" frameborder="0" allowfullscreen></iframe><br/><br/>
</div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown complete
</div>
<img src="clear.gif" height="10" /><br />
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>

[kylek]

I think its the missing comma after the 00

Try this:

'min': 00,

[1320Nation]

I think its the missing comma after the 00

Try this:

'min': 00,

Thanks for the help but there was no change.

[fxdigi-cash]

Thanks for the help but there was no change.

it is your javascript has some issue...

try out the original one and you will see it is working...

if you want to add an extra feature to the java code, then it is better to test it on jsfiddle

[Grimes]

I really wanted to use this, but it made my browser run really slow. Is there something I can do to make it less of a resource hog? I only had one timer in the sidebar.

[Stakerscorner]

Is there a 3.8 version

I really like this widget but have VB3.8