objectivehtml / FlipClock

http://flipclockjs.com/
MIT License
2.74k stars 954 forks source link

Using clockFace: 'Counter' and clock.start() breaks the plugin. #141

Closed JimmyMultani closed 10 years ago

JimmyMultani commented 10 years ago

var clock;

clock = $('.clock').FlipClock(10, { clockFace: 'Counter', countdown: true, autoStart: false, callbacks: { start: function() { $('.message').html('The clock has started!'); } } });

$('.start').click(function(e) { clock.start(); });

I tested this on an example from the zip and in my own version, and I've been able to produce it on both on Chrome (Windows 7 x64).

The clock simply doesn't "flip" like it should. I'm not really sure why this is, as having autoStart set to true still works.

Any idea what this could be?

objectivehtml commented 10 years ago

The counter face has a slightly different behavior than the other clocks in that it doesn't auto increment. autoStart needs to be set to true to get the flip effect to start, but that basically just puts the clock in a ready state. After thinking about this, I can see why this is confusing and should have written that clock face a little differently, but the original need for that clock was more for a scoreboard where the numbers just increment when the method is called. See the counter example in the repo to see how it should work.

When I get some time I am going to rewrite this clock face to be more versatile and consistent while maintaining support for both options. At a minimum use this code to auto increment your counter until I get this implemented into the core code.

Just FYI, I just updated the counter example with this code to illustrate how it works.

var timer = new FlipClock.Timer(clock, {
    callbacks: {
        interval: function() {
            clock.increment();
        }
    }
});

timer.start();
JimmyMultani commented 10 years ago

Your fix seems to work well! Thank you very much!