YoBroMoFo - Countdown Timer

[TimberFloorAu]

http://yobromofo.com/forum/images/counter.png



YoBroMoFo - Countdown Timer

Takes 5 minutes to upload, and do 2 template edits. Please mark installed if you use, as

all of our modifications are totally free of charge and openly shared with the vbulletin

community.

Anyhoo - Let's Get started.

*************
STEP ONE
*************
Open count.js from the js folder

Change these lines below to match the event you are counting down to:


var month = '*'; // 1 through 12 or '*' within the next month, '0' for the current month
var day = '26'; // day of month or + day offset
var dow = 3; // day of week sun=1 sat=7 or 0 for whatever day it falls on
var hour = 0; // 0 through 23 for the hour of the day
var min = 0; // 0 through 59 for minutes after the hour
var tz = 10; // offset in hours from UTC to your timezone


Click save

Then upload the js folder to forum root. Path should be:
www.yoursite.com/forum/js

click merge if this folder exists

*************
STEP TWO
*************

goto admincp >> styles and templates >> your template >>

search for: header and open it

find:

<input type="hidden" name="vb_login_md5password_utf" />
</form>
</vb:if>


Add AFTER:


<!--yobromofo.com countdown timer start-->
<li><span id="yobromofo-countdown-timer"></span> seconds <a

href="http://www.yobromofo.com/forum/f3/the-australia-day-thread-17840/">until Australia

Day</a></li>
<!--yobromofo.com countdown timer end-->


Change:
"http://www.yobromofo.com/forum/f3/the-australia-day-thread-17840/" to the forum thread

this countdown refers to. If you dont need a link, then change to...


<!--yobromofo.com countdown timer start-->
<li><span id="yobromofo-countdown-timer"></span> seconds until Australia Day</li>
<!--yobromofo.com countdown timer end-->


Change: until Australia Day to match your event name

Click SAVE

*************
STEP TWO ( final step )
*************

open headinclude

at very bottom add


<!--yobromofo.com countdown js file start-->
<script type="text/javascript" src="js/count.js">
</script>
<!--yobromofo.com countdown js file end-->


ensure the path is correct.

Click save.

You are DONE !

to change the event date etc. just edit the js file, reupload you are done.
to change the event title, change it in the header template.

Have fun.

Steve aka timberfloorau from YoBroMoFo.com British Expats Forum

[VonDoom]

Pretty cool tagged

[TimberFloorAu]

FMD Von you are on the ball today :up:

[TimberFloorAu]

You can remove hours and minutes quite easily and replace with :

Open the js file.

find:

= days+' days + '+hours+' hours '+mins+' minutes '


Change to:

= days+' days + '+hours+' : '+mins+' : '


Save and re-upload.

To get rid of seconds.

open header template:

find:

</span> seconds


Change to:

</span>


Click save and done.

[Dr.osamA]

gooood jop Man

thnxxx very much

installed + 5 stars
________
Uhwh Warehouse (http://uhwh.com/)

[TimberFloorAu]

Thanks Dr.

It complies in FF and Chrome, but not in IE.

Hope it comes in useful. Ste

[RedHacker]

Is it possible to inside this in a widget....?

[TimberFloorAu]

Of course, but can you tell me what you would want it to look like ?

[RedHacker]

I would put it as a Widget to countdown to change the time.

etg 2011

[TimberFloorAu]

I dont have much to do with widgets, is this for forum or cms

[RedHacker]

For the CMS :)

[TimberFloorAu]

< k novice here. How do you place a widget IN the cms after creating it ?

[RedHacker]

At the end of page in CMS

[TimberFloorAu]

Best leave it to someone else.

We have a lot of stuff missing from cms.

[RedHacker]

OK but it was be look nice...

[fayax]

good mod but .... umm is it actually going to say yobromofo on it too?

Dont think I want a name like that on my forum.

[TimberFloorAu]

<<< seriously baffled by that. The IMAGE yobromofo is a watermark. Nothing more nothing less.

It also doesnt say My Username
Nor the buttons across the top ;)

[Numenorean7]

This is an awesome mod, it works great. I'd be cool if it was a bit more simple to install and to manage afterward.

[wampforum]

installed but cant get it to show correctly. It shows my own text. and the forum link works fine
but i dont know where to upload the png file too? I added in with the JS file (so forum/js/counter.png)
also what is the var lab for? I couldnt understand that bit.
Finally is it possible to put this just in a specific forum and just in that forum header rather than the main header?
thanks

[TimberFloorAu]

Instructions are pretty simple mate , what png file ?

[wampforum]

not simple enough for me it seems!
re installed and managed to get it working!! (hard been a noob sometimes!)

Is it possible to show this elsewhere then?

thanks

[PHILLYFAN]

alittle new to this.. i believe I did everything correctly however, it's no counting down this is all it says

seconds until Advance to Divisional Round

any reason y?

[TimberFloorAu]

That image doesnt exist Philly.

Did you edit the count.js as per step one ?

[PHILLYFAN]

I'm sure I did it wrong, so my early apologies... this is what i have. I was on the understanding to change the numbers, this is what I have

var month = '0'; // 1 through 12 or '*' within the next month, '0' for the current month
var day = '13'; // day of month or + day offset
var dow = 3; // day of week sun=1 sat=7 or 0 for whatever day it falls on
var hour = 9; // 0 through 23 for the hour of the day
var min = 59; // 0 through 59 for minutes after the hour
var tz = 10; // offset in hours from UCT to your timezone
var lab = 'yobromofo-countdown-timer'; // id of the entry on the page where the counter is to be inserted

function start() {displayCountdown(setCountdown(month,day,hour,min, tz),lab);}
loaded(lab,start);

[mmacrypt]

I have it installed on my test page and link the image for the guys on the site to take a look at. If they like the feel, I'm going to install it. Would be nice if the edits were a tad easier but I do like it.
https://vborg.vbsupport.ru/external/2010/04/49.png

[PHILLYFAN]

I'm sure I did it wrong, so my early apologies... this is what i have. I was on the understanding to change the numbers, this is what I have

any help please?

[TimberFloorAu]

That IMAGE still does not exist for us to check.


Ahhh or is that your signature ?

OK You need to be SPECIFIC mate ;)

[mmacrypt]

Ok, have it installed and working. Thank you. I went ahead and changed it so it upper left on our site. If people want to see it working, feel free to look at http://mmacrypt.com/forum/forum.php, I hope that's ok that I sent a link.

[PHILLYFAN]

Here is what my js file currently says.

var month = '0'; // 1 through 12 or '*' within the next month, '0' for the current month
var day = '26'; // day of month or + day offset
var dow = 3; // day of week sun=1 sat=7 or 0 for whatever day it falls on
var hour = 11; // 0 through 23 for the hour of the day
var min = 11; // 0 through 59 for minutes after the hour
var tz = 10; // offset in hours from UTC to your timezone
var lab = 'yobromofo-countdown-timer'; // id of the entry on the page where the counter is to be inserted

function start() {displayCountdown(setCountdown(month,day,hour,min, tz),lab);}
loaded(lab,start);

First line - First like I added a "0" cause it says 0=current month.
Second line - left alone
Third line - left alone
4th and 5th line For hour and min i change to 11. I just added a number to see if it worked.
6th line - not sure what this is ???? offset hours?
7th line - not sure what this is.

I uploaded the js to my forum root ( forum/js)
I made the edit changes like it said.

all it says in the upper right corner is -- # seconds until Off Season Starts

[PHILLYFAN]

Ok, have it installed and working. Thank you. I went ahead and changed it so it upper left on our site. If people want to see it working, feel free to look at http://mmacrypt.com/forum/forum.php, I hope that's ok that I sent a link.

how did u get it to move to the left corner? Also how did u add color to the timer?
thanks

[mmacrypt]

how did u get it to move to the left corner? Also how did u add color to the timer?
thanks

I moved it as the 2nd line in the header, here is my code starting at the top of the header.
<div id="newnav">
<div style="font-weight:bold;float:left;padding:0 0 0 15px"><!--yobromofo.com countdown timer start-->
<li><font color="#FF0000"><span id="yobromofo-countdown-timer"></span> seconds <a style="color:#2B60DE" href="http://mmacrypt.com/forum/showthread.php?7002-UFC-113-Machida-vs.-Shogun-II">until UFC 113</a></font></li>
<!--yobromofo.com countdown timer end-->

[Hall of Famer]

Screenshots please?

[mmacrypt]

Screenshots please?

Not sure if this was for me or not but this is how I have it set up, upper left.

https://vborg.vbsupport.ru/external/2010/04/44.png

[PHILLYFAN]

mmacrypt could u copy your js and paste it here so I can see how you have it set up? I would greatly appreciate it man?

[mmacrypt]

I'm a bit spent, I will do it tomorrow buddy.

[PHILLYFAN]

ok.......

[PHILLYFAN]

anything guys?

[mmacrypt]

Sorry buddy, got super busy. Here is how I have mine set up, didn't change much at all.

ar month = '5'; // 1 through 12 or '*' within the next month, '0' for the current month
var day = '8'; // day of month or + day offset
var dow = 0; // day of week sun=1 sat=7 or 0 for whatever day it falls on
var hour = 20; // 0 through 23 for the hour of the day
var min = 0; // 0 through 59 for minutes after the hour
var tz = -6; // offset in hours from UTC to your timezone
var lab = 'yobromofo-countdown-timer'; // id of the entry on the page where the counter is to be inserted

function start() {displayCountdown(setCountdown(month,day,hour,min, tz),lab);}
loaded(lab,start);

// Countdown Javascript
// copyright 20th April 2005, 1st November 2009 by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
// you may change the start function if required
// code adapted for vbulletin by timberfloorau of yobromofo.com british expats australia
var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
function setCountdown(month,day,hour,min,tz) {var m = month; if (month=='*') m = 0; var c = setC(m,day,hour,tz); if (month == '*' && c < 0) c = setC('*',day,hour,tz); return c;} function setC(month,day,hour,tz) {var toDate = new Date();if (day.substr(0,1) == '+') {var day1 = parseInt(day.substr(1));toDate.setDate(toDate.getD ate()+day1);} else{toDate.setDate(day);}if (month == '*')toDate.setMonth(toDate.getMonth() + 1);else if (month > 0) { if (month <= toDate.getMonth())toDate.setFullYear(toDate.getFul lYear() + 1);toDate.setMonth(month-1);}
if (dow >0) toDate.setDate(toDate.getDate()+(dow-1-toDate.getDay())%7);
toDate.setHours(hour);toDate.setMinutes(min-(tz*60));toDate.setSeconds(0);var fromDate = new Date();fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());var diffDate = new Date(0);diffDate.setMilliseconds(toDate - fromDate);return Math.floor(diffDate.valueOf()/1000);}
function displayCountdown(countdn,cd) {if (countdn < 0) document.getElementById(cd).innerHTML = "Sorry, you are too late."; else {var secs = countdn % 60; if (secs < 10) secs = '0'+secs;var countdn1 = (countdn - secs) / 60;var mins = countdn1 % 60; if (mins < 10) mins = '0'+mins;countdn1 = (countdn1 - mins) / 60;var hours = countdn1 % 24;var days = (countdn1 - hours) / 24;document.getElementById(cd).innerHTML = days+' days '+hours+' hours '+mins+' minutes '+secs;setTimeout('displayCountdown('+(countdn-1)+',\''+cd+'\');',999);}}

[emath]

works with vb4.1.2? anyone knows?