The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
![]() |
|||||||||||||||||||||||||||||||||||||||
Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns)
![]() Developer Last Online: Nov 2023 ![]() ![]()
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 Code:
<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> Code:
'day': 19, 'month': 7, 'year': 2011, 'hour': 23, 'min': 59, 'sec': 59, 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 Code:
<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> 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....&postcount=122 To show multiple countdowns on forumhome (screenshots) - https://vborg.vbsupport.ru/showpost....&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. Code:
<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> 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. Download Now
Screenshots
Show Your Support
|
9 благодарности(ей) от: | ||
doctorsexy, fxdigi-cash, GreyGhost, Khriz, nektar, Sage Knight, tekram, WendM |
Comments |
#243
|
|||
|
|||
![]()
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: Code:
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link> Thanks |
#244
|
|||
|
|||
![]()
It's very good work
Works on VBulletin 4.2.1 Gemma, Thank you so much! |
#245
|
|||
|
|||
![]()
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: Code:
<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> here is the code for the forumhome fixed containing 6 blocks as the coder posted on his original thread: Code:
<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> Code:
<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> if you have any question about that, I will be passing by from time to time... Cheers ![]() |
#246
|
|||
|
|||
![]()
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? PHP Code:
|
#247
|
|||
|
|||
![]()
I think its the missing comma after the 00
Try this: PHP Code:
|
#248
|
|||
|
|||
![]()
Thanks for the help but there was no change.
|
#249
|
|||
|
|||
![]()
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 |
#250
|
|||
|
|||
![]()
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.
|
#251
|
|||
|
|||
![]()
Is there a 3.8 version
I really like this widget but have VB3.8 |
![]() |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|