Countdown code new and improved, written completely in javascript Options

[habman]

I have reworked the countdown code entirely in javascript.

What are the benefits of this:
- Automatically display countdown to each NFL week or set up any other countdown you like.
- No iframes
- Quicker loading
- Easier to implement for the end user
- Blends seamlessly with other modules
- Option to hide countdown table when countdown expires
- Automatically corrects itself to the MFL's server time
- Less bandwidth usage for my site


The code has variables clearly marked so you can set it up easily

Just copy and paste the code into a home page module



Here is the code for those interested:

Last modified: August 29, 2008

CODE

<script language="JavaScript" type="text/javascript">
<!--
// FYI: Last updated August 29, 2008

//WHEN COUNTDOWN EXPIRES DO YOU WANT THE COUNTDOWN TABLE TO DISAPPEAR; true or false
  var countdownHiddenOnDeadline = true;

//SET THE SIZE OF THE COUNTDOWN DIGITS; S,M,L,XL,XXL
  var countdownSize = "XL";


//IF YOU WANT TO DISPLAY WEEKLY KICKOFFS SET TO true
  var weeklyNFLKickoff = true;


//IF YOU WANT ANOTHER COUNTDOWN OTHER THAN KICKOFF THEN USE SETTINGS BELOW
// Title
  var countdownTitle    = "New Years Day 2008";

// Year (must be 4 digits)
  var countdownYear     = 2008;    

// Month: one of ===> Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov or Dec
  var countdownMonth = "Jan";

// Date: range 1 - 31
  var countdownDay = 1;

// Hour: range 0 - 23; Note: midnight is 0; 1 PM = 13, 2 PM = 14 etc.
  var countdownHour = 0;

// Minutes: range 0 - 59
  var countdownMinute = 0;

// Message on deadline expiry; N/A if countdown is hidden on expiry; See above
  var countdownMessage  = "Deadline has passed";

//-->
</script>

<script language="JavaScript" type="text/javascript" src="http://www.habman.com/mfl/apps/js/jscountdown.js"></script>

Try it out.

Let me know of any issues.



EDITED TO ADD

If you paste this code while NFL games are in progress and have the option to hide the module when the countdown expires then nothing will dispaly which is how the module is supposed to work.

If you want to display the module even when the countdown is expired then set the countdownHiddenOnDeadline = false;

[habman]

I had an error in the script that may or may not have caused some leagues issues.

This should now be corrected. You may have to do a CTRL-F5.

[fat_kid]

I reinserted the code for this into my website. Everything displays correctly but the countdown for week 2 shows games are in progress and all the numbers are 0. Any thoughts? The other issues caused by it seem to have disappeared.

[habman]

I reinserted the code for this into my website. Everything displays correctly but the countdown for week 2 shows games are in progress and all the numbers are 0. Any thoughts? The other issues caused by it seem to have disappeared.

Okay I am checking it out. It is working in IE but Firefox is showing everything at zeroes.

I will see if I can find the glitch.

[habman]

Okay should now be working in Firefox. You may have to do a CTRL-F5

[Lasernuke_Commis...]

Hey Habman, the countdown script is showing a deadline of 12AM even though it is set for 12PM...
I put a countdown for the trade deadline for Nov 11 12:00PM but the deadline time is showing 12:00AM.


I have noticed this for the default countdown to kick off as well.

The countdown is correct, that is, it counts down to 12pm but the deadline time is 12 hours off.

Thanks

[habman]

Hey Habman, the countdown script is showing a deadline of 12AM even though it is set for 12PM...
I put a countdown for the trade deadline for Nov 11 12:00PM but the deadline time is showing 12:00AM.


I have noticed this for the default countdown to kick off as well.

The countdown is correct, that is, it counts down to 12pm but the deadline time is 12 hours off.

Thanks

Thanks for pointing this out.

This has been corrected. You may have to do a CTRL-F5 to clear your cache to see the updated code.

[BustaCap]

Hey Habman, the countdown script is showing a deadline of 12AM even though it is set for 12PM...
I put a countdown for the trade deadline for Nov 11 12:00PM but the deadline time is showing 12:00AM.


I have noticed this for the default countdown to kick off as well.

The countdown is correct, that is, it counts down to 12pm but the deadline time is 12 hours off.

Thanks

Thanks for pointing this out.

This has been corrected. You may have to do a CTRL-F5 to clear your cache to see the updated code.

Is it possible to setup a recurring countdown? I'd like to show this on my waivers claim page to show how much time is left until *that weeks* First Come First Served waivers.

-Dave

[MiamiTrade]

I am attempting to customize this to countdown draft day but cannot change it off the Week 1 countdown. Can anyone point me in the right path to do this?

Thanks!!1

[Hawaii 5-0]

Add the following:

CODE

weeklyNFLKickoff = false;

Add this before the closing "//-->" (or anywhere within the area where all the vars are defined). Habman's code tests for this and shows the weekly countdown. If you set this to false, the code will skip the weekly countdown and use the user defined values.

[MiamiTrade]

Add the following:

CODE

weeklyNFLKickoff = false;

Add this before the closing "//-->" (or anywhere within the area where all the vars are defined). Habman's code tests for this and shows the weekly countdown. If you set this to false, the code will skip the weekly countdown and use the user defined values.

I figured this would work and tried it originally but no luck. I am also getting an error at the bottom of the window which I don't know if it has something to do with it. The script was saved onto one of the home page messages and then added to the home tab. Is there something else I should be doing?

[Hawaii 5-0]

@MiamiTrade: I tested it in IE8, FF3.5 and Chrome 2 in it's own tab and everything worked okay. Is it possible that you have some other javascript in some other tab that is incorrect that may be causing the issue? Is every other HPM you have working properly? That would be the only thing I can think of in regards to an error. This is not my code, but I am sure Habman worked out the kinks in it already since this code is almost 2 years old.

[Hawaii 5-0]

jQuery Alternative

Here is an alternative using the jQuery countdown plugin:

CODE

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
// PLUGIN CODE STARTS HERE
(function($){
function Countdown(){
this.regional=[];
this.regional['']={
labels:['Years','Months','Weeks','Days','Hours','Minutes','Seconds'],
labels1:['Year','Month','Week','Day','Hour','Minute','Second'],
compactLabels:['y','m','w','d'],
timeSeparator:':',
isRTL:false
};
this._defaults={
until:null,
since:null,
timezone:null,
format:'dHMS',
layout:'',
compact:false,
description:'',
expiryUrl:'',
expiryText:'',
alwaysExpire:false,
onExpiry:null,
onTick:null
};
$.extend(this._defaults,this.regional['']);
}
var PROP_NAME='countdown';
var Y=0;
var O=1;
var W=2;
var D=3;
var H=4;
var M=5;
var S=6;
$.extend(Countdown.prototype,{
markerClassName:'hasCountdown',
_timer:setInterval(function(){$.countdown._updateTargets();},980),
_timerTargets:[],
setDefaults:function(options){
this._resetExtraLabels(this._defaults,options);
extendRemove(this._defaults,options||{});
},
UTCDate:function(tz,year,month,day,hours,mins,secs,ms){
if(typeof year=='object'&&year.constructor==Date){
ms=year.getMilliseconds();
secs=year.getSeconds();
mins=year.getMinutes();
hours=year.getHours();
day=year.getDate();
month=year.getMonth();
year=year.getFullYear();
}
var d=new Date();
d.setUTCFullYear(year);
d.setUTCDate(1);
d.setUTCMonth(month||0);
d.setUTCDate(day||1);
d.setUTCHours(hours||0);
d.setUTCMinutes((mins||0)-(Math.abs(tz)<30?tz*60:tz));
d.setUTCSeconds(secs||0);
d.setUTCMilliseconds(ms||0);
return d;
},
_attachCountdown:function(target,options){
var $target=$(target);
if($target.hasClass(this.markerClassName)){
return;
}
$target.addClass(this.markerClassName);
var inst={options:$.extend({},options),
_periods:[0,0,0,0,0,0,0]};
$.data(target,PROP_NAME,inst);
this._changeCountdown(target);
},
_addTarget:function(target){
if(!this._hasTarget(target)){
this._timerTargets.push(target);
}
},
_hasTarget:function(target){
return($.inArray(target,this._timerTargets)>-1);
},
_removeTarget:function(target){
this._timerTargets=$.map(this._timerTargets,
function(value){return(value==target?null:value);});
},
_updateTargets:function(){
for(var i=0;i<this._timerTargets.length;i++){
this._updateCountdown(this._timerTargets[i]);
}
},
_updateCountdown:function(target,inst){
var $target=$(target);
inst=inst||$.data(target,PROP_NAME);
if(!inst){
return;
}
$target.html(this._generateHTML(inst));
$target[(this._get(inst,'isRTL')?'add':'remove')+'Class']('countdown_rtl');
var onTick=this._get(inst,'onTick');
if(onTick){
onTick.apply(target,[inst._hold!='lap'?inst._periods:
this._calculatePeriods(inst,inst._show,new Date())]);
}
var expired=inst._hold!='pause'&&
(inst._since?inst._now.getTime()<=inst._since.getTime():
inst._now.getTime()>=inst._until.getTime());
if(expired&&!inst._expiring){
inst._expiring=true;
if(this._hasTarget(target)||this._get(inst,'alwaysExpire')){
this._removeTarget(target);
var onExpiry=this._get(inst,'onExpiry');
if(onExpiry){
onExpiry.apply(target,[]);
}
var expiryText=this._get(inst,'expiryText');
if(expiryText){
var layout=this._get(inst,'layout');
inst.options.layout=expiryText;
this._updateCountdown(target,inst);
inst.options.layout=layout;
}
var expiryUrl=this._get(inst,'expiryUrl');
if(expiryUrl){
window.location=expiryUrl;
}
}
inst._expiring=false;
}
else if(inst._hold=='pause'){
this._removeTarget(target);
}
$.data(target,PROP_NAME,inst);
},
_changeCountdown:function(target,options,value){
options=options||{};
if(typeof options=='string'){
var name=options;
options={};
options[name]=value;
}
var inst=$.data(target,PROP_NAME);
if(inst){
this._resetExtraLabels(inst.options,options);
extendRemove(inst.options,options);
this._adjustSettings(inst);
$.data(target,PROP_NAME,inst);
var now=new Date();
if((inst._since&&inst._since<now)||
(inst._until&&inst._until>now)){
this._addTarget(target);
}
this._updateCountdown(target,inst);
}
},
_resetExtraLabels:function(base,options){
var changingLabels=false;
for(var n in options){
if(n.match(/[Ll]abels/)){
changingLabels=true;
break;
}
}
if(changingLabels){
for(var n in base){
if(n.match(/[Ll]abels[0-9]/)){
base[n]=null;
}
}
}
},
_destroyCountdown:function(target){
var $target=$(target);
if(!$target.hasClass(this.markerClassName)){
return;
}
this._removeTarget(target);
$target.removeClass(this.markerClassName).empty();
$.removeData(target,PROP_NAME);
},
_pauseCountdown:function(target){
this._hold(target,'pause');
},
_lapCountdown:function(target){
this._hold(target,'lap');
},
_resumeCountdown:function(target){
this._hold(target,null);
},
_hold:function(target,hold){
var inst=$.data(target,PROP_NAME);
if(inst){
if(inst._hold=='pause'&&!hold){
inst._periods=inst._savePeriods;
var sign=(inst._since?'-':'+');
inst[inst._since?'_since':'_until']=
this._determineTime(sign+inst._periods[0]+'y'+
sign+inst._periods[1]+'o'+sign+inst._periods[2]+'w'+
sign+inst._periods[3]+'d'+sign+inst._periods[4]+'h'+
sign+inst._periods[5]+'m'+sign+inst._periods[6]+'s');
this._addTarget(target);
}
inst._hold=hold;
inst._savePeriods=(hold=='pause'?inst._periods:null);
$.data(target,PROP_NAME,inst);
this._updateCountdown(target,inst);
}
},
_getTimesCountdown:function(target){
var inst=$.data(target,PROP_NAME);
return(!inst?null:(!inst._hold?inst._periods:
this._calculatePeriods(inst,inst._show,new Date())));
},
_get:function(inst,name){
return(inst.options[name]!=null?
inst.options[name]:$.countdown._defaults[name]);
},
_adjustSettings:function(inst){
var now=new Date();
var timezone=this._get(inst,'timezone');
timezone=(timezone==null?-new Date().getTimezoneOffset():timezone);
inst._since=this._get(inst,'since');
if(inst._since){
inst._since=this.UTCDate(timezone,this._determineTime(inst._since,null));
}
inst._until=this.UTCDate(timezone,this._determineTime(this._get(inst,'until'),now));
inst._show=this._determineShow(inst);
},
_determineTime:function(setting,defaultTime){
var offsetNumeric=function(offset){
var time=new Date();
time.setTime(time.getTime()+offset*1000);
return time;
};
var offsetString=function(offset){
offset=offset.toLowerCase();
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth();
var day=time.getDate();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
var pattern=/([+-]?[0-9]+)\s*(s|m|h|d|w|o|y)?/g;
var matches=pattern.exec(offset);
while(matches){
switch(matches[2]||'s'){
case's':second+=parseInt(matches[1],10);break;
case'm':minute+=parseInt(matches[1],10);break;
case'h':hour+=parseInt(matches[1],10);break;
case'd':day+=parseInt(matches[1],10);break;
case'w':day+=parseInt(matches[1],10)*7;break;
case'o':
month+=parseInt(matches[1],10);
day=Math.min(day,$.countdown._getDaysInMonth(year,month));
break;
case'y':
year+=parseInt(matches[1],10);
day=Math.min(day,$.countdown._getDaysInMonth(year,month));
break;
}
matches=pattern.exec(offset);
}
return new Date(year,month,day,hour,minute,second,0);
};
var time=(setting==null?defaultTime:
(typeof setting=='string'?offsetString(setting):
(typeof setting=='number'?offsetNumeric(setting):setting)));
if(time)time.setMilliseconds(0);
return time;
},
_getDaysInMonth:function(year,month){
return 32-new Date(year,month,32).getDate();
},
_generateHTML:function(inst){
inst._periods=periods=(inst._hold?inst._periods:
this._calculatePeriods(inst,inst._show,new Date()));
var shownNonZero=false;
var showCount=0;
for(var period=0;period<inst._show.length;period++){
shownNonZero|=(inst._show[period]=='?'&&periods[period]>0);
inst._show[period]=(inst._show[period]=='?'&&!shownNonZero?null:inst._show[period]);
showCount+=(inst._show[period]?1:0);
}
var compact=this._get(inst,'compact');
var layout=this._get(inst,'layout');
var labels=(compact?this._get(inst,'compactLabels'):this._get(inst,'labels'));
var timeSeparator=this._get(inst,'timeSeparator');
var description=this._get(inst,'description')||'';
var showCompact=function(period){
var labelsNum=$.countdown._get(inst,'compactLabels'+periods[period]);
return(inst._show[period]?periods[period]+
(labelsNum?labelsNum[period]:labels[period])+' ':'');
};
var showFull=function(period){
var labelsNum=$.countdown._get(inst,'labels'+periods[period]);
return(inst._show[period]?
'<span class="countdown_section"><span class="countdown_amount">'+
periods[period]+'</span><br/>'+
(labelsNum?labelsNum[period]:labels[period])+'</span>':'');
};
return(layout?this._buildLayout(inst,layout,compact):
((compact?
'<span class="countdown_row countdown_amount'+
(inst._hold?' countdown_holding':'')+'">'+
showCompact(Y)+showCompact(O)+showCompact(W)+showCompact(D)+
(inst._show[H]?this._twoDigits(periods[H]):'')+
(inst._show[M]?(inst._show[H]?timeSeparator:'')+this._twoDigits(periods[M]):'')+
(inst._show[S]?(inst._show[H]||inst._show[M]?timeSeparator:'')+
this._twoDigits(periods[S]):''):
'<span class="countdown_row countdown_show'+showCount+
(inst._hold?' countdown_holding':'')+'">'+
showFull(Y)+showFull(O)+showFull(W)+showFull(D)+
showFull(H)+showFull(M)+showFull(S))+'</span>'+
(description?'<span class="countdown_row countdown_descr">'+description+'</span>':'')));
},
_buildLayout:function(inst,layout,compact){
var labels=(compact?this._get(inst,'compactLabels'):this._get(inst,'labels'));
var labelFor=function(index){
return($.countdown._get(inst,
(compact?'compactLabels':'labels')+inst._periods[index])||
labels)[index];
};
var subs={
yl:labelFor(Y),yn:inst._periods[Y],ynn:this._twoDigits(inst._periods[Y]),
ol:labelFor(O),on:inst._periods[O],onn:this._twoDigits(inst._periods[O]),
wl:labelFor(W),wn:inst._periods[W],wnn:this._twoDigits(inst._periods[W]),
dl:labelFor(D),dn:inst._periods[D],dnn:this._twoDigits(inst._periods[D]),
hl:labelFor(H),hn:inst._periods[H],hnn:this._twoDigits(inst._periods[H]),
ml:labelFor(M),mn:inst._periods[M],mnn:this._twoDigits(inst._periods[M]),
sl:labelFor(S),sn:inst._periods[S],snn:this._twoDigits(inst._periods[S])};
var html=layout;
for(var i=0;i<7;i++){
var period='yowdhms'.charAt(i);
var re=new RegExp('\\{'+period+'<\\}(.*)\\{'+period+'>\\}','g');
html=html.replace(re,(inst._show[i]?'$1':''));
}
$.each(subs,function(n,v){
var re=new RegExp('\\{'+n+'\\}','g');
html=html.replace(re,v);
});
return html;
},
_twoDigits:function(value){
return(value<10?'0':'')+value;
},
_determineShow:function(inst){
var format=this._get(inst,'format');
var show=[];
show[Y]=(format.match('y')?'?':(format.match('Y')?'!':null));
show[O]=(format.match('o')?'?':(format.match('O')?'!':null));
show[W]=(format.match('w')?'?':(format.match('W')?'!':null));
show[D]=(format.match('d')?'?':(format.match('D')?'!':null));
show[H]=(format.match('h')?'?':(format.match('H')?'!':null));
show[M]=(format.match('m')?'?':(format.match('M')?'!':null));
show[S]=(format.match('s')?'?':(format.match('S')?'!':null));
return show;
},
_calculatePeriods:function(inst,show,now){
inst._now=now;
inst._now.setMilliseconds(0);
var until=new Date(inst._now.getTime());
if(inst._since&&now.getTime()<inst._since.getTime()){
inst._now=now=until;
}
else if(inst._since){
now=inst._since;
}
else{
until.setTime(inst._until.getTime());
if(now.getTime()>inst._until.getTime()){
inst._now=now=until;
}
}
var periods=[0,0,0,0,0,0,0];
if(show[Y]||show[O]){
var lastNow=$.countdown._getDaysInMonth(now.getFullYear(),now.getMonth());
var lastUntil=$.countdown._getDaysInMonth(until.getFullYear(),until.getMonth());
var sameDay=(until.getDate()==now.getDate()||
(until.getDate()>=Math.min(lastNow,lastUntil)&&
now.getDate()>=Math.min(lastNow,lastUntil)));
var getSecs=function(date){
return(date.getHours()*60+date.getMinutes())*60+date.getSeconds();
};
var months=Math.max(0,
(until.getFullYear()-now.getFullYear())*12+until.getMonth()-now.getMonth()+
((until.getDate()<now.getDate()&&!sameDay)||
(sameDay&&getSecs(until)<getSecs(now))?-1:0));
periods[Y]=(show[Y]?Math.floor(months/12):0);
periods[O]=(show[O]?months-periods[Y]*12:0);
var adjustDate=function(date,offset,last){
var wasLastDay=(date.getDate()==last);
var lastDay=$.countdown._getDaysInMonth(date.getFullYear()+offset*periods[Y],
date.getMonth()+offset*periods[O]);
if(date.getDate()>lastDay){
date.setDate(lastDay);
}
date.setFullYear(date.getFullYear()+offset*periods[Y]);
date.setMonth(date.getMonth()+offset*periods[O]);
if(wasLastDay){
date.setDate(lastDay);
}
return date;
};
if(inst._since){
until=adjustDate(until,-1,lastUntil);
}
else{
now=adjustDate(new Date(now.getTime()),+1,lastNow);
}
}
var diff=Math.floor((until.getTime()-now.getTime())/1000);
var extractPeriod=function(period,numSecs){
periods[period]=(show[period]?Math.floor(diff/numSecs):0);
diff-=periods[period]*numSecs;
};
extractPeriod(W,604800);
extractPeriod(D,86400);
extractPeriod(H,3600);
extractPeriod(M,60);
extractPeriod(S,1);
return periods;
}
});
function extendRemove(target,props){
$.extend(target,props);
for(var name in props){
if(props[name]==null){
target[name]=null;
}
}
return target;
}
$.fn.countdown=function(options){
var otherArgs=Array.prototype.slice.call(arguments,1);
if(options=='getTimes'){
return $.countdown['_'+options+'Countdown'].
apply($.countdown,[this[0]].concat(otherArgs));
}
return this.each(function(){
if(typeof options=='string'){
$.countdown['_'+options+'Countdown'].apply($.countdown,[this].concat(otherArgs));
}
else{
$.countdown._attachCountdown(this,options);
}
});
};
$.countdown=new Countdown();
})(jQuery);
// PLUGIN CODE ENDS HERE

$(document).ready(function () {
    var year = 2010;
    var month = 1;
    var day = 1;
    var header = "<h3>Countdown to New Year's Day 2010</h3>";
    var countDay = new Date(year, month - 1, day);
    $('#countdown').countdown({until: countDay, description: header });
});
</script>

<style>
#defaultCountdown { width: 240px; height: 75px; }
.hasCountdown {
    border: 1px solid #ccc;
    background-color: #eee;
}
.countdown_rtl {
    direction: rtl;
}
.countdown_holding span {
    background-color: #ccc;
}
.countdown_row {
    clear: both;
    width: 100%;
    padding: 0px 2px;
    text-align: center;
}
.countdown_show1 .countdown_section {
    width: 100%;
}
.countdown_show2 .countdown_section {
    width: 49.5%;
}
.countdown_show3 .countdown_section {
    width: 33%;
}
.countdown_show4 .countdown_section {
    width: 24.75%;
}
.countdown_show5 .countdown_section {
    width: 19.8%;
}
.countdown_show6 .countdown_section {
    width: 16.5%;
}
.countdown_show7 .countdown_section {
    width: 14.1%;
}
.countdown_section {
    display: block;
    float: left;
    font-size: 75%;
    text-align: center;
}
.countdown_amount {
    font-size: 200%;
}
.countdown_descr {
    display: block;
    width: 100%;
}
</style>

<div id="countdown"></div>

How To Use The Code
As with any of the other jQuery code I have posted, the first line is the jQuery library. If you already have it referenced you can remove the first line. If not, you need this. The code for the plugin is actually inline. If you have your own personal site, you can simply store the countdown plugin on your site and reference that file rather than embedding the plugin javascript in an HPM. You can get a free Google Site to store your custom MFL plugins if you want. If this is confusing to you, you can just copy and paste the above. If you have questions about this send me a PM.

EDIT: The forum was adding line breaks to the code rendering it non functional. I replaced the code with the unpacked version, but it is literally 3x as large (8k packed vs. 24k unpacked). Personally, I'd prefer the unpacked size. If you do to, please visit the plugin site, download the plugin, then copy the code from the jquery.countdown.pack.js file and paste it over the top of the unpacked plugin code. I added some comments so you'll know where to paste.

EDIT 2: I ran the code through js minifier to save some bits. It still isn't as small as the packed version, but at least it is a bit smaller.

Set your values for the year, month, day, and header variables. The header can include HTML (as shown in the example). Modify CSS to fit. That is all!

If you need any more customizations, check the link for documentation. There is a bunch of stuff you can do to customize this plugin.

[theeohiostate]

5-0

Copied and pasted into HPM , FF3.5 or IE8 , I'm not getting any display at all

inserted into bottom on my home page here, nothing is displaying

http://www9.myfantasyleague.com/2009/home/38317

[Hawaii 5-0]

Sorry 'bout that. The forum added line breaks to the packed code. Since the packed code has no line breaks, adding them broke the plugin functionality. I replaced the packed code with the unpacked code but it is 3x as large. To save a bit of bandwidth and load time I'd replace the code with the packed version, but it will work if you don't.

EDIT: Ran the code through js min to shrink it down a bit, but it'll still save if you copy/paste the packed version.