I've made some mediaqueries to make the clock responsive. It's not complete though so if anyone wants to finish it, feel free...

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (min-width: 960px) {
        .clock { display: block; margin: 30px auto 0 auto; width: 620px; }
        .clock ul li { line-height: 87px !important;}

        .flip-clock-divider .flip-clock-label { top:-1.1em; font-size: 16px; }
        .flip-clock-divider.days .flip-clock-label { right: -87px; }
        .flip-clock-divider.hours .flip-clock-label { right: -90px; }
        .flip-clock-divider.minutes .flip-clock-label { right: -96px; }
        .flip-clock-divider.seconds .flip-clock-label { right: -100px; }

    }

    @media only screen and (max-width: 959px) {

    }

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .clock { display: block; margin: 0 auto; width: 520px; }
        .clock ul li { line-height: 88px !important;}
        .flip-clock-wrapper ul { width: 47px; height: 90px; line-height: 88px; }
        .flip-clock-wrapper ul li a div div.inn { font-size: 60px; }

        .flip-clock-divider .flip-clock-label { top:-1.1em; font-size: 13px; }
        .flip-clock-divider.days .flip-clock-label { right: -72px; }
        .flip-clock-divider.hours .flip-clock-label { right: -72px; }
        .flip-clock-divider.minutes .flip-clock-label { right: -80px; }
        .flip-clock-divider.seconds .flip-clock-label { right: -80px; }
    }

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {

    }

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .clock { display: block; margin: 0 auto; width: 400px; }

        .flip-clock-wrapper ul { margin: 3px; height: 50px; line-height: 50px; }
        .clock ul li { line-height: 48px !important;}

        .flip-clock-wrapper ul li a div.up:after { top: 24px; }
        .flip-clock-divider { width: 10px; height: 50px;}
        .flip-clock-dot { left: 3px; width: 6px; height: 6px;}
        .flip-clock-dot.top { top: 17px; }
        .flip-clock-dot.bottom { bottom: 8px; }

        .flip-clock-divider .flip-clock-label { top:-1.1em; font-size: 11px; }
        .flip-clock-divider.days .flip-clock-label { right: -62px; }
        .flip-clock-divider.hours .flip-clock-label { right: -65px; }
        .flip-clock-divider.minutes .flip-clock-label { right: -69px; }
        .flip-clock-divider.seconds .flip-clock-label { right: -73px; }

        .flip-clock-wrapper ul { width: 40px; }
        .flip-clock-wrapper ul li a div div.inn { font-size: 42px; }
    }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
        .clock { display: block; margin: 0 auto; width: 280px; }

        .flip-clock-wrapper ul { margin: 2px; height: 37px; line-height: 36px;}
        .clock ul li { line-height: 36px !important;}

        .flip-clock-wrapper ul li a div.up:after { top: 18px; }
        .flip-clock-divider { width: 6px; height: 36px;}
        .flip-clock-dot { left: 2px; width: 3px; height: 3px;}
        .flip-clock-dot.top { top: 17px; }
        .flip-clock-dot.bottom { bottom: 8px; }

        .flip-clock-divider .flip-clock-label { top:-1.1em; font-size: 10px;}
        .flip-clock-divider.days .flip-clock-label { right: -42px; }
        .flip-clock-divider.hours .flip-clock-label { right: -45px; }
        .flip-clock-divider.minutes .flip-clock-label { right: -48px; }
        .flip-clock-divider.seconds .flip-clock-label { right: -50px; }

        .flip-clock-wrapper ul { width: 28px; }
        .flip-clock-wrapper ul li a div div.inn { font-size: 24px; }
    }

While initializing multiple default FlipClocks works just fine, there seems to be an issue with initializing multiple FlipClocks with the clockFace option set to TwentyFourHourClock. Untested on other faces.

definitely should be some html usage examples, not just docs. Great work though.

I found the documentation frustrating. There were simple things not explained and I took me too long to get what I should be doing. I was suffering from a lack of sleep though, but still.

For example, the main page of the docs shows:

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

It doesn't tell you that you can pass the time as the first parameter like:

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

So after awhile I got it working with:

var clock = $('.your-clock').FlipClock({
    autoStart:false
});

clock.setTime(3600);
clock.start();

There are other things like the downloads are confusing, you should say that all you need is flipclock.min.js. I had an unrelated problem and thinking I hadn't included the right files, I ended up copying one of the clockFace examples and had base, counter, dailycounter, etc. included. You could easily think that you need jQuery.flipclock... JS file if you want to use it with jQuery.fn.

I think it would be helpful to embed one of those JSFiddle frames in the main page of the docs showing working code, which you can follow off to a live example which uses only the one flipclock.min.js.

This is a cool little library, it should be more obvious / simpler to pick up. I'm gonna come back and make a PR with documentation changes for this later. For now, I better get some work done today :)

Well, I am working on a counter and hours is not enough. I also need days.

Reading the code to understand how to extend a face...

I have tried using the clock on an empty HTML page and the result is this in Google Chrome:

It seems to be working just fine in Firefox.

Code used:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="clock"></div>
    <link rel="stylesheet" type="text/css" href="http://static.narutospot.net/flipclock/css/flipclock.css">
    <script src="http://static.narutospot.net/flipclock/js/flipclock/libs/prefixfree.min.js"></script>
    <script type="text/javascript" src="http://static.narutospot.net/flipclock/js/flipclock/flipclock.min.js"></script>
    <script type="text/javascript">
        var clock = $('.clock').FlipClock(273996, {
            clockFace: 'DailyCounter',
            countdown: true
        });
    </script>
</body>
</html>`

Hey there,
I tend to leave tabs open and noticed that after 01:08:00 of flipclock, my fans started spinning up. The Chrome task manager clocked it in at using 100% of the CPU. The laptop is a 2007 Macbook, but still maybe something to look into on the future. Sorry that I can't provide further details.
felix

Hi...I need change the clock speed, manipulating how slow or fast works in a countdown ..is it possible??...could create performance issues??...thanks!!.....

You can see this if you change the background-color of .inn to something like red/white, but the bottom half seems to suddenly become visible through the top half as the top half is around 180 degrees.

I think it has to do with the z-index of .shadow and .inn.

It would be nice to have this repository available in bower. I tried adding it, but it's requesting a version.

It says "No versions available."

When I call

var now = clock.getTime() in my function my console (Chrome latest on Mac)
shows me this error message:
Uncaught RangeError: Maximum call stack size exceeded

and also I get this:

Uncaught TypeError: Cannot read property '$obj' of undefined

Row: 49 in hourlycounter.js

Other question:
Is it possible to include milliseconds to the script? And if yes, how?

Thank You!

While on the site the version is 0.2.0

Would be awesome to use this script to add a simple counter, eg to show the number of visitors, petitions or uploads so far.

Would this be possible?

Please. It is very important. When do you add this function? I very need in it. Thanks for beauty plugin!

Having a countdown with more than 26 days causes the hours to add +1 hour.
I tested the countdown time to figure out if it was more than 30days, but testing forth and back I found the days to be 26.

Hi!

I found few issues in Internet Explorer 8 / 9

1. First count to 10 resets: goes from 0 to 10 twice
2. And every 10 seconds changes to wrong number in seconds ( always as second digit )

ie. 16, 17, 18, 29!, 30

1. No change in minutes when 60 seconds pass

Hello there !

I'm currently implementing your plugin to make a countdown.
It work perfectly on Chrome / Firefox but of course, not on IE9.

There is no 3d transitions but I know why and I don't care.
The big point is that the counter has 10 unites of late.

For exemple it displays for the seconds :
_00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 00, 01, 02, 03, 04, 05, 06, 07, 08, 19, 10, 11, ..._

Here is a record : http://www.youtube.com/watch?v=uJn9qFN6L-Q&feature=youtu.be

Have I try to solve the problem by myself but it was not succesfull.

Thanks for your help :)

I'm using the default settings in countdown mode
The clock is in

The digits appear too large for the rectangles they flip on, so that the top is truncated. How is this controlled by styling? I get the same on firefox and chrome (latest beta version in both cases)

In Safari, bold text-elements (styled with CSS), which are not part of the FlipClock, are blinking (getting bolder and thinner again) every second when using FlipClock.js.

Maybe it is an Safari-issue, but i think it should be a know-issue anyway.

System: OSX 10.8, Safari 6.0.2

Hey, maintainer(s) of objectivehtml/FlipClock!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library objectivehtml/FlipClock is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "objectivehtml/FlipClock",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I really like your plugin - thanks for the work. Also the ease animation would look great to be implemented.

I wondered how I can easily change the size of the counter without changing all 1000 css defaults.

Thanks in advance

So on Chrome 28, the countdown text twitches when a transition happens. This can be stopped by applying "-webkit-backface-visibility: hidden;" to the CSS.

Hi,
I wanted to use flipclock in a rails app that uses Bootstrap. Seems there is kind of a conflict, as you can see from the screenshot.
Any idea or suggestion?
Thanks a lot!

Issue:
index.toLowerCase() within the localize method for the FlipClock.Factory class throws a JS error when attempting to create a new TwelveHourClock face instance.

Recreate:
var clock = $('.current-clock').FlipClock({clockFace: 'TwelveHourClock'});

Error thrown:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Possible Fix:
Change: var lindex = index.toLowerCase(); to var lindex = index ? index.toLowerCase() : '';

I'm working on using flipclock for a countdown, but have run in to a problem in Chrome ( 27.0.1453.110 mac) where I think the layering of the numbers is out of whack.

I've made a video here: http://screencast.com/t/b1bGMmeH to illustrate the problem.

From what I can see, it's showing the number that's supposed to be behind the current one. In the video the count goes:

33, 32, 31, 30, 39, 38, ..., 32, 31, 20, 29, 28, ..., 22, 21, 10, 19, 18, ... 12, 01, 00, 09, 08, ...

The weirdest part is at around 37 seconds in the video where it gets to 12 seconds, then 01, then changes the shading on the minute digit, then keeps counting from 09.

I'm using the DailyCounter face, and setting the time with clock.setTime(newTime); if that helps at all.

Using a counter and starting it by hand, it seems to be off one second. This is reflected in the method calls.
It takes a second to call the FlipClock.Face "flip"-method the first time. However, the clock is not flipped yet; The passed time object still holds the initialized time (same is the case if one triggers flip manually). Than, two seconds from calling start() the first flip occurs.
So it seems that the first call of the flip method (1sec after start) should already cause the timer to change.

Hiya, there is no example in the documentation showing how to actually set which date/time you want to count down to.

What happened: Passing stop:function(){ … } as the options object (instead of the actually appropriate callbacks:{ stop:function(){ … } } I managed to get a hard to track bug: Doing this, by accident, I overwrote the native stop() function and replaced it with the callback, thus breaking the inner workings of the Timer.

What should happen When the options object is processed, only non-existing values should be written; existing ones should be protected.

code snippet causing the overwrite:

var clock = $('.flipclock').FlipClock({
  stop:function(){
    alert("Oh, time has gone")},
  countdown:true, 
  autoStart:false
});

Are there no examples of smaller clocks? The CSS isn't very easy to understand :(

I am trying to increment clock face general counter to certain value. But i didn't find any method to stop it after it reaches the target value.

How to do that?

When using FlipClock.js with Twitter Bootstrap, FlipClock does not respect BootStrap's .row, .span* and .offset* classes, which are the basis for the bootstrap grid and on-screen element positioning.

Is there a way to make FlipClock work with them?

I am using BootStrap 2.3.2.

Thanks!

When passing the 'label' parameter to createDivider(label), a css class name is added to that divider using the label in lowercase.
This can be a problem for example if the string passed contains two words, not allowed characters or foreign letters.

A proposal to fix it is to have two parameters in the function call the parameters createDivider(label, class)

Thank!

I do have requirement of count up counter and i want to add Yearly and Monthly like Daily, Hourly.

Please provide solution ASAP. As this might be the enhancement to this plugin.

Currently when an error is thrown it goes to .log which just logs the String version of the error (e.message). It would be useful if it would log the stack or if you could turn this off entirely with a flag.

Not sure what this issue here is. I see that one of the last commits was a change to the minified version (which works for me), I wonder if the same change needs to be added to the non-minified version.

This counter is great in terms of css styling and animation.

However, I haven't found a simple way of making a DD:HH:MM counter, which is, in my opinion, a frequently used format.

Is it possible to add such a format to default clock faces?

If someone with better understanding of code has already made such a modification, please post it.

As per example. The clips are invisible till they are flipped... What am I doing wrong?

Hi, I would you like to say thank you very much for awesome work. I appreciate if i get little help for the same.

I want to make timer like when user come once then close the browser or refresh the page then timer will not start again from new value.

Basically, i dont want to reset timer again when visitor hit refresh button or revisit my site.

Any help?

Falls back great! 👍 I was expecting a lot of hassle.

I think the clock is lagging of 2 or 3 seconds in countdown mode. 2 or 3 seconds depending where you start to count: 2 when the new digit starts falling or 3 when it arrived at the bottom.

clock = $('#clock').FlipClock({
  autoStart: false,
  countdown: true,
  callbacks: {
    interval: function() {
      var r = (start.getTime() - (new Date()).getTime()) / 1000;
      console.log([Math.floor(r/3600), Math.floor(r % 3600 / 60), Math.floor(r % 60)]);
    }
  }
});
clock.setTime(next/1000 - 3);
clock.start();

Too much copy&paste. start() is written instead of stop().

here: http://flipclockjs.com/#methods

It would be handy if variables were used a lot more. I had to change a lot about the styling and it wasn't nice. It would be having if there were variables for the clock colour, the text colour, padding, etc.

Nearly all code examples from the faces does have this typo.

Good Evening Flip Clock Support,
I am trying to implement your plugin into an HTML page I am working on and I am noticing that it is not responsive. I am currently using Twitter Bootstrap assets in my page so I am not sure if the plugin and bootstrap is colliding. I am following your basic example and it seems like the elements within the container is responsive when the browser is re-sized.

Here is the basic structure of our div:

<aside class="span4">

<div class="widget">

<div class="countdown"> </div>

</div>

</div>

</aside>

CSS for widget:
.widget{
width:100%;
border:1px solid;
}

I've been trying to work out if there is a way to force the daily counter clock face to have one or more leading zeros so that the the day 'column' (for want of a better word) always has three digits.

If you naturally count down from 100 days or more, a leading zero is displayed, but if your counter begins below 100, only two digits appear.

This is what it looks like if you count down from above 100 to below 100:

However, this is what it looks like if you count down from below 100:

Any suggestions would be much appreciated!

I'm trying to create a pomodoro 25 minute countdown timer and only 5 minutes in the Flipclock is behind by 40 seconds. Is there a way to have an accurate 25 minute countdown?

var clock;
var current_date = new Date();
var future_date = new Date(current_date.getTime() + (25*60000));
var diff = future_date / 1000 - current_date.getTime() / 1000;

$(document).ready(function() {
    clock = $('.clock').FlipClock(diff, {
        clockFace: 'MinuteCounter',
        countdown: true
    });
});

I want to use flipclock in place with spacial constraints, e.g. a sidebar.

Problem: There is a css file, but It is difficult to customize the CSS, as a lot is coded in pixels. I always messed it up at some point.
Possible Solutions: Is there an alternative stylesheet or some other means to scale the clock?

(It seems that the stylesheet is quite sophisticated for the reasons of the great appearance. It would not pose a problem not to have all the nice effects in a scaling version imho)

PS.: What I tried was to change width and height of .flip-clock-wrapper ul and font-size in .flip-clock-wrapper ul li a div div.inn. It works mostly, but always messed up at the end, probably due to some side effects I was not able to control.

If I open my site, go to another tab for awhile and come back, then it seems like all of the CSS transitions build up and then are triggered all at once only when I've come back.

Not sure what could be done about this though :/

It does not know how to break it down to 1 more day.. so, if I take 3600 * 24 * 20 = 172800 (secPerMin * 24 hours * days) it will count down 20 days, but if I add the 5 hours to it (3600 * 17 = 61200) it counts down the 5 hours only.

so the equation would be (3600 * 24 * 20)+(3600 * 17) = 1789200, this should be 20 days 17 hours and then the seconds.. but it reports it as being only 6 hours...

It also seems to break if I try to give it a dynamic second:
event = new Date(2013, 7, 21, 0, 0, 0, 0);
now = new Date();

           timeLeft = Math.floor((event - (now)) /1000);


var clock = $('.clock').FlipClock(timeLeft, {
    clockFace: 'DailyCounter',
    countdown: true
});

this will result in it counting down remainders first, till it reaches an even point in days, so if its 19 days, 5 hours, 10 min, 6sec; it will start counting down at 6 sec, once its reaches 00, then it fill flip to 00 00:10:59 and so on till it gets to a point that it can evenly start at 19 days...

First, excellent project - thanks for sharing.

With the following code:

    var clock = $('#counter').FlipClock({
        countdown: true,
        autoStart: false
    });
    clock.setTime(3600*100);
    clock.start();

you will notice that the hour jumps 20, 10 then 99