CODEWITHSUNDEEP
jqueryflipclock
Stefanie
Stefanie

Reputation: 497

FlipClock.js display an image when the countdown is over

I'm using FlipClock 1.1a and I want to set an image when the countdown is over and hide the counter. Currently, the counter goes in - time (-1 hour, -12 minutes) when the time is up. How can I do this? The site has very few callback and its not helping.

Upvotes: 3

Views: 4724

Answers (1)

Runcorn
Runcorn

Reputation: 5224

They have provided different example in their code base which do include counter stop event. So, you need to use stop callback of FlipClock performing the required operation, 

 var clock;
    $(document).ready(function() {
        clock = $('.clock').FlipClock(10, {
            clockFace: 'MinuteCounter',
            countdown: true,
            callbacks: {
                stop: function() {
                    // Do whatever you want to do here,
                    // that may include hiding the clock 
                    // or displaying the image you mentioned
                    $('.message').html('The clock has stopped!');
                }
            }
        });
    });

P.S

If you have downloaded their whole source file you can check out the demo itself /FlipClock-master/examples/countdown-stop-callback.html

Upvotes: 9

Related Questions