Countdowns

by bluetidepro

HTML

<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
<h1>jQuery Countdown Basics</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/countdown.html">jQuery Countdown plugin</a>.
    It contains the minimum requirements for using the plugin and
    can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/countdownRef.html">documentation reference</a> page.</p>
<br/><br/>
<p>Counting down to 26 January <span id="year"></span>.</p>
<div id="defaultCountdown"></div>
<div id="defaultCountdown2"></div>

CSS

.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: 98%;
}
.countdown_show2 .countdown_section {
    width: 48%;
}
.countdown_show3 .countdown_section {
    width: 32.5%;
}
.countdown_show4 .countdown_section {
    width: 24.5%;
}
.countdown_show5 .countdown_section {
    width: 19.5%;
}
.countdown_show6 .countdown_section {
    width: 16.25%;
}
.countdown_show7 .countdown_section {
    width: 14%;
}
.countdown_section {
    display: block;
    float: left;
    font-size: 75%;
    text-align: center;
}
.countdown_amount {
    font-size: 200%;
}
.countdown_descr {
    display: block;
    width: 100%;
}
#defaultCountdown, #defaultCountdown2 { width: 240px; height: 45px; }

JavaScript

$(function () {
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    austDay2 = new Date(austDay.getFullYear() + 10, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
    $('#defaultCountdown2').countdown({until: austDay2});
});