Wiki

Clone wiki

jquery-flipclock / Home

Welcome

Welcome to the jquery-flipclock wiki!

jQuery Flipclock is a countdown timer that flips like a flipclock, and counts down to a specified date.

Installation & Configuration

Installation

To install, simply add the script into your scripts dir, and add a <script> tag at the bottom of the page.

Configuration

To configure on your page, add the following structure to your page wherever you want your flipclock to show:

<div class="flipclock">
	<div class="left number" id="weeks">
		<div class="current"></div>
		<div class="notcurrent"></div>
	</div>
	
	<div class="left number" id="days">
		<div class="current"></div>
		<div class="notcurrent"></div>
	</div>
	
	<div class="left number" id="hours">
		<div class="current"></div>
		<div class="notcurrent"></div>
	</div>
	
	<div class="left number" id="minutes">
		<div class="current"></div>
		<div class="notcurrent"></div>
	</div>
		
	<div class="left number" id="seconds">
		<div class="current"></div>
		<div class="notcurrent"></div>
	</div>
</div>

Then wherever you have your javascript, add the following:

$.fn.flipclock({
	target_year : '2011',
	target_month : '04',
	target_day : '07',
	target_hour : '09',
	target_minute : '15',
	target_second : '00'
});

This allows you to configure what date the clock will count down to. There are many other options. The full set is below:

  • target_year: The year in which the flipclock should hit zero,
  • target_month: The month in which the flipclock should hit zero,
  • target_day: The day in which the flipclock should hit zero,
  • target_hour: The hour in which the flipclock should hit zero,
  • target_minute: The minute at which the flipclock should hit zero,
  • target_second: The year at which the flipclock should hit zero,
  • flipclockelement [optional]: The jquery element (including the "." or "#") which defines the root of the flipclock structure.
  • pushvalue [optional]: The value which defines how much the plugin will push the numbers down. This is supposed to be used if you want to center the numbers against a background image.
  • clockheight [optional]: The value which defines how high the plugin thinks the background image is.
  • easing_in [optional]: The name of the easing function you want to associate when the flipclock shows a new number. Requires the Easing plugin.
  • easing_out [optional]: The name of the easing function you want to associate when the flipclock hides an old number. Requires the Easing plugin.

Updated