jQuery Countdown to Christmas
November 21st, 2011
I noticed quite a few people were arriving at my blog, trying to find a countdown for Christmas. Based on the following article: http://www.mywebsitedesignersblog.com/2011/04/flexible-and-easy-to-setup-jquery-countdown-clock/
I decided to actually put together a proper christmas countdown script for you 
Here is an example of what we are creating: http://www.mywebsitedesignersblog.com/examples/countdown/christmas.html
1) First of all, download this file: http://keith-wood.name/countdown.html (near the top of the page)
2) Upload these files to your website
3) Open up jquery.countdown.css, and change:
.hasCountdown {
border: 1px solid #ccc;
background-color: #eee;
}
..to:
.hasCountdown {
background-color: #eee;
}
4) Add the following CSS to that file as well:
#imageLayoutWrapper { width: 350px; }
#imageLayout2 span { display: block; float: left; width: 29px; height: 50px; background: url(christmas1.jpg) no-repeat 0px 0px; }
#imageLayout2 span.image0 { background-position: -0px 0px; }
#imageLayout2 span.image1 { background-position: -29px 0px; }
#imageLayout2 span.image2 { background-position: -58px 0px; }
#imageLayout2 span.image3 { background-position: -87px 0px; }
#imageLayout2 span.image4 { background-position: -116px 0px; }
#imageLayout2 span.image5 { background-position: -145px 0px; }
#imageLayout2 span.image6 { background-position: -174px 0px; }
#imageLayout2 span.image7 { background-position: -203px 0px; }
#imageLayout2 span.image8 { background-position: -232px 0px; }
#imageLayout2 span.image9 { background-position: -261px 0px; }
#imageLayout2 span.imageDay { background-position: -290px 0px; }
#imageLayout2 span.imageSep { background-position: -319px 0px; }
#imageLayout2 span.imageSpace { background-position: -348px 0px; }
5) Add the following into the <head></head>> part of your page:
<style type="text/css">
@import "jquery.countdown.css";
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
var thisYear = austDay.getFullYear();
austDay = new Date(thisYear,11,25);
$('#imageLayout2').countdown({until: austDay, compact: true, format: 'YDHMS' ,
layout: $('#imageLayout2').html()});
});
</script>
6) Now add the following HTML to where ever you want the countdown to show:
<div id="imageLayoutWrapper">
<img src="christmas_border.jpg" /><br />
<span id="imageLayout2">
<span class="image{d10}"></span>
<span class="image{d1}"></span>
<span class="imageDay"></span>
<span class="imageSpace"></span>
<span class="image{h10}"></span>
<span class="image{h1}"></span>
<span class="imageSep"></span>
<span class="image{m10}"></span>
<span class="image{m1}"></span>
<span class="imageSep"></span>
<span class="image{s10}"></span>
<span class="image{s1}"></span>
</span>
<br /><br /><br /><img src="christmas_border.jpg" />
</div>
7) Download the below images :
(or download the ZIP file with all of these in)
Thats it – you should now have a working countdown clock Enjoy!
IMPORTANT: When using the christmas4.gif image, please be sure to use this CSS (slight tweak with some of the widths, due to the snowman font being a little wider than the others
#imageLayout4 span { display: block; float: left; width: 29px; height: 50px; background: url(christmas4.gif) no-repeat 0px 0px; }
#imageLayout4 span.image0 { background-position: -0px 0px; }
#imageLayout4 span.image1 { background-position: -29px 0px; }
#imageLayout4 span.image2 { background-position: -58px 0px; }
#imageLayout4 span.image3 { background-position: -87px 0px; }
#imageLayout4 span.image4 { background-position: -116px 0px; }
#imageLayout4 span.image5 { background-position: -144px 0px; }
#imageLayout4 span.image6 { background-position: -174px 0px; }
#imageLayout4 span.image7 { background-position: -200px 0px; }
#imageLayout4 span.image8 { background-position: -229px 0px; }
#imageLayout4 span.image9 { background-position: -258px 0px; }
#imageLayout4 span.imageDay { background-position: -290px 0px; }
#imageLayout4 span.imageSep { background-position: -319px 0px; }
#imageLayout4 span.imageSpace { background-position: -348px 0px; }
#imageLayout4 { overflow: hidden; }
Categories: jQuery
