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

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - vBulletin Forum Sideblocks - Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns) (https://vborg.vbsupport.ru/showthread.php?t=266689)

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)

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.

Quote:

Originally Posted by espkaruna (Post 2344796)

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 :)

Quote:

Originally Posted by JabirA (Post 2343834)

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?

Quote:

Originally Posted by JabirA (Post 2343834)

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.

No problem.

Thank you for your answer. ;)

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.

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/jq...-7-2-released/

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.

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

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.

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.

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.

Quote:

Originally Posted by wilford brimley (Post 2346713)

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

Code:

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

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?

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.

Quote:

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

Individually on each countdown

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({

Quote:

Originally Posted by wilford brimley (Post 2346748)

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.

Quote:

Originally Posted by wilford brimley (Post 2346748)

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.

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?

Quote:

Originally Posted by wilford brimley (Post 2346754)

This should work.

Code:

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

                 });

});

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.

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

Quote:

Originally Posted by Bob_R (Post 2390107)

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?

Quote:

Originally Posted by Gemma (Post 2390111)

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?

Quote:

Originally Posted by Bob_R (Post 2390133)

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

Code:

<div class="info_message" id="complete_info_message" style="display: none;">

                Countdown Complete

            </div>

It may appear more than once. Delete it.

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:

Code:

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

http://www.arcadejunkies.org/forum.php

Quote:

Originally Posted by Gemma (Post 2390183)

Code:

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

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

Here ya go!

HTML Code:

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

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.

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.

Quote:

Originally Posted by Gemma (Post 2390189)

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:

Code:

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

Quote:

Originally Posted by Bob_R (Post 2391393)

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

Code:

#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

Code:

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

Code:

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

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

Quote:

Originally Posted by Bob_R (Post 2391556)

Change:

Code:

$('#countdown').countDown({

To:

Code:

$('#countdown1').countDown({

And change:

Code:

<div id="countdown">

To this:

Code:

<div id="countdown1">

Gemma, I got it.

Added:

HTML Code:

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

Instead of:

HTML Code:

<td>

towards the top of the code.

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?

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01718 seconds Memory Usage 1,950KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (13)bbcode_code_printable (3)bbcode_html_printable (15)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: