vb.org Archive - View Single Post - vBulletin Forum Sideblocks - Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns)

Gemma · #**158** 12-15-2011, 11:55 PM

Cool

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

Code:

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01179 seconds Memory Usage 1,853KB Queries Executed 11 (?)
More Information
Template Usage: (1)SHOWTHREAD_SHOWPOST (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_box (1)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit_info (1)postbit (1)postbit_onlinestatus (1)postbit_wrapper (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit reputationlevel showthread	Included Files: ./showpost.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showpost_start bbcode_fetch_tags bbcode_create postbit_factory showpost_post postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start showpost_complete
Messages: