Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications

Reply
 
Thread Tools
Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns) Details »»
Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns)
Version: 1.0.4, by Gemma Gemma is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: vBulletin Forum Sideblocks - Version: 4.x.x Rating:
Released: 07-11-2011 Last Update: 10-21-2011 Installs: 146
Template Edits
Re-useable Code Additional Files  
No support by the author.

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>
Change this part to set the countdown target date

Code:
 '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

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


Download Now

File Type: zip sidebar_countdown1.0.4.zip (47.8 KB, 662 views)

Screenshots

File Type: jpg sideblock.jpg (68.7 KB, 0 views)
File Type: jpg arcade_count.jpg (137.3 KB, 0 views)
File Type: jpg count.jpg (70.8 KB, 0 views)
File Type: jpg countdown2.jpg (43.9 KB, 0 views)
File Type: jpg countdowns.jpg (78.4 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
9 благодарности(ей) от:
doctorsexy, fxdigi-cash, GreyGhost, Khriz, nektar, Sage Knight, tekram, WendM

Comments
  #192  
Old 05-24-2012, 05:05 PM
ibrahimkoky ibrahimkoky is offline
 
Join Date: Apr 2012
Location: California
Posts: 36
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

workinggggggggggggg

thanks a lot. :up:
Reply With Quote
  #193  
Old 06-10-2012, 12:10 PM
ricki09 ricki09 is offline
 
Join Date: Dec 2011
Posts: 11
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

Title - block_countdown

how to remove this Template now???
Reply With Quote
  #194  
Old 06-10-2012, 12:14 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by ricki09 View Post
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
Reply With Quote
  #195  
Old 06-13-2012, 10:03 AM
ricki09 ricki09 is offline
 
Join Date: Dec 2011
Posts: 11
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks its work!
Reply With Quote
  #196  
Old 06-29-2012, 12:00 PM
JabirA JabirA is offline
 
Join Date: Feb 2009
Posts: 77
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi Gemma,

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

Kind regards
Reply With Quote
  #197  
Old 06-29-2012, 12:31 PM
mgurain's Avatar
mgurain mgurain is offline
 
Join Date: Apr 2005
Location: KSA - Qatif - Al-Jarodiah
Posts: 345
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi,
Could this good mod be phrased please ?
Reply With Quote
  #198  
Old 07-03-2012, 07:20 AM
espkaruna espkaruna is offline
 
Join Date: Oct 2010
Posts: 26
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #199  
Old 07-03-2012, 07:52 AM
JabirA JabirA is offline
 
Join Date: Feb 2009
Posts: 77
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It works great in Google chrome (last version)
Reply With Quote
  #200  
Old 07-03-2012, 10:44 AM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by espkaruna View Post
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
Quote:
Originally Posted by JabirA View Post
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
Reply With Quote
  #201  
Old 07-03-2012, 12:58 PM
espkaruna espkaruna is offline
 
Join Date: Oct 2010
Posts: 26
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Gemma View Post
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.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:01 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05041 seconds
  • Memory Usage 2,351KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (4)bbcode_code
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (11)post_thanks_box
  • (8)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (6)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete