Minimal HTML5 Countdown Timer Plugin For jQuery - Rooster

Minimal HTML5 Countdown Timer Plugin For jQuery - Rooster
File Size: 5.23 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery dependent countdown timer with callback support that has the ability to auto pause when the current page loses focus.

How to use it:

1. Create a timer container with the following HTML5 data attributes:

  • data-rooster-seconds: the time in seconds to countdown from
  • data-rooster-onComplete: executed when the countdown timer is completed
  • data-rooster-onstart: executed when starting the countdown timer
  • data-rooster-onstop: executed when stoping the countdown timer
<div class="timer" 
     data-rooster-seconds=60 
     data-rooster-onComplete="alert('Timer complete!');">
</div>

2. Load jQuery library and the jQuery Rooster plugin' JavaScript file in the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="rooster/jquery.rooster.js"></script>

3. Initialize the countdown timer.

$('.timer').rooster();

4. Start the countdown timer manually.

$('.timer').rooster('start')

5. All default options.

$('.timer').rooster({
  seconds: 0,
  onComplete: null,
  onStart: null,
  onStop: null,
  includeMinutes: true,
  state: 'idle',
})

Change log:

2016-08-19

  • Add the ability to include or exclude minutes from the timer

This awesome jQuery plugin is developed by mhotwagner. For more Advanced Usages, please check the demo page or visit the official website.