jQuery CountDown Timer

vicnumb Dec 14, 2012

Dec 14 2012 Published by under jQuery & JavaScript

Say you need to display time left until a even is going to happen. Preferable this timer should display time in a human readable format.

e.g. Left 0 days 23 hours 59 minutes 59 seconds – counting the time down.

 

jQuery CountDown Timer requirements
* display time in a human readable format
* display time for days, hours, minutes, seconds
* perform a redirect to a defined URL after timer gets to 0 (zero)
* easy to setup, by adding a few options
* simple way to pass data (by php script for example)
* jQuery format (possibility to bind to a DOM object)

 

keith-wood countdown jquery class is one of the best solutions for most cases when time counting is involved.

Integration:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.countdown.package-1.6.0/jquery.countdown.min.js"></script>
<script language="JavaScript">
<!--
$(document).ready(function(){
  $('#ticker').countdown({
    until: 100,
    compact: true,
    layout: '{dn} days {hnn} hours {mnn} minutes {snn} seconds',
    expiryUrl: 'http://yoururl'
  });
});
//-->
</script>

* get latest jquery from ajax.googleapis.com
* make sure you download jquery.countdown.min.js file and place it into a folder jquery.countdown.package-1.6.0/
* ticker – selector bound to your jQuery countdown timer
* until – points to count down timer, variable passed is time to start with (can pass a php variable)
* compact – timer compact format or not (false by default)
* layout – timer format
* expiryUrl – redirect url after timer stops counting

 

Add html selector code to display the counter.

<div id="ticker"></div>

For multiple timer configurations and examples visit keith-wood website.

Enjoy!

No responses yet

Leave a Reply