FlipClock.js 0.5.5 Beta

Why FlipClock.js?

So why use this library when there are many others with the same name? Well, this library was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code. (Besides the domain was available, who could pass it up?). Some libraries have a huge cascade of conditionals, while others simply hard-code too much into their scripts. Most projects had a very narrow scope. After reviewing as many of the existing solutions as possible, it was determined a proper extendible API needed to be written to create any kind of clock or counter (and the flip effect is just cool). The following are the logical requirements that were considered when creating the API.

  • Use as a clock
  • Use as a timer
  • Use as a countdown
  • Themeable using pure CSS
  • Clean & Dry Syntax
  • Abstract everything into reusable objects
  • Full-Featured Developer API to create custom “Clock Faces”

Authors


Contributions

Big thanks to all the examples on the Internet. But in particular, a huge thanks goes out to Adem Ilter who built this example, which provided the best animation and least amount of code to prove the concept.


Requirements


Basic Example

Loading the Scripts

FlipClock.js requires a few files to work properly. The minified source contains all the clock faces for maximum portability.


<html>
	<head>
		<link rel="stylesheet" href="/assets/css/flipclock.css">
	</head>
	<body>
		<div class="your-clock"></div>
		
		<script src="/assets/js/libs/jquery.js"></script>
		<script src="/assets/js/flipclock/flipclock.min.js"></script>
	</body>
</html>

Instantiating

FlipClock.js requires jQuery for DOM manipulation. It works a typical jQuery plugin, but instead of returning a jQuery object, a FlipClock object is returned.


var clock = $('.your-clock').FlipClock({
// ... your options here
});

var clock = new FlipClock($('.your-clock'), {
// ... your options here
});

Note, both these examples would produce the example same thing. Use the syntax that works best for you.


Options

autoStart
(boolean) If this is set to false, the clock will not auto start. The default value is true.
countdown
(boolean) If this is set to true, the clock will count down instead of up. The default value is false.
callbacks
(object) An object of callback functions that are triggered at various times. For more information, view the callback documentation.
classes
(object) This is an object of CSS classes to use to append to DOM objects
clockFace
(string) This is the name of the clock that is used to build the clock display. The default value is HourlyCounter.
defaultClockFace
(string) This is the default clock face to use if the defined clock face does not exist. The default value is HourlyCounter.
defaultLanguage
(string) This is the default langauge to use. The default value is english.

Methods

The following methods all belong to the FlipClock.Factory class.

start()

This method will start the clock just call the .start() method on an FlipClock object.


clock.start(function() {
// this (optional) callback will fire each time the clock flips
});

stop()

This method will stop the clock just call the .stop() method on an FlipClock object.


clock.stop(function() {
// this (optional) callback will fire after the clock stops
});

setTime()

This method will set the clock time after it has been instantiated just call the .setTime() method on an FlipClock object.


clock.setTime(3600);

setCountdown()

This method will change the clock from counting up or down.


clock.setCountdown(true);

getTime()

To get the clock time after it has been instantiated just call the .getTime() method on an FlipClock object.


var time  = clock.getTime(); // Returns the FlipClock.Time object

Callbacks

destroy
This callback is triggered when the timer is destroyed
create
This callback is triggered when the clock face is created
init
This callback is triggered when the FlipClock object is initialized
interval
This callback is triggered with each interval of the timer
start
This callback is triggered when the clock is started
stop
This callback is triggered when the clock is stopped
reset
This callback is triggered when the timer has been reset