The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns) Details »» | |||||||||||||||||||||||||||||||||||||||
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 |
#132
|
|||
|
|||
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?
|
#133
|
||||
|
||||
Quote:
Code:
<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> Find: Code:
<div id="countdown"> Code:
<div class="info_message" id="complete_info_message" style="display: none;"> Countdown complete </div> <img src="clear.gif" height="10" /><br /> |
#134
|
|||
|
|||
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.
|
#135
|
||||
|
||||
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 Code:
<script language="Javascript" type="text/javascript" src="clientscript/jquery/jquery-1.6.1.min.js"></script> Code:
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script> |
#136
|
|||
|
|||
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. |
#137
|
||||
|
||||
Quote:
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 |
#138
|
|||
|
|||
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!
|
#139
|
|||
|
|||
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 ? |
#140
|
|||
|
|||
Quote:
Code:
'day': 19, 'month': 7, 'year': 2011, 'hour': 23, 'min': 59, 'sec': 59, |
#141
|
|||
|
|||
This is my ForumHome
Code:
{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.css,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&markreadhash={vb:raw 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> |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|