CODEWITHSUNDEEP
javascript
tanner2272
tanner2272

Reputation: 23

In flipclock.js countdown, hiding the clock, even after a browser refresh

thanks in advance.

I currently have a dev PHP web page, which gains "live" time from its web server upon page load. The page has within it a flipclockjs countdown that uses the server's time as it's "current date" compared to the "future date" for when the countdown is to finish.

All so well and good so far. Whether browsing the page in the UK or in the US or in Australia, the countdown will finish at the same GMT time worldwide.

My issue is with when the countdown reached zero. I can use a callback of flipclock's stop:function to apply a brand new css class to the div housing the clock and have in my stylesheet a style matching that new class, that hides the clock - e.g. visibility: hidden;

But my issue arises if someone visits the page's URL after the countdown has ended or they alternatively refresh the browser page after the countdown has ended. Each instance seems to bypass the actual action of the clock stopping and thus the class isn't applied and the clock not hidden.

I'm left with a visible clock displaying seemingly random negative numbers.

var clock;
    $(document).ready(function() {

    // Grab the current date
    var currentDate = new Date('<? print date("F d, Y H:i:s", time())?>');

    // Set some date in the future.
    var futureDate  = new Date("November 09, 2017 14:20:00");

    // Calculate the difference in seconds between the future and current date
    var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

    // Instantiate a coutdown FlipClock
    clock = $('.clock').FlipClock(diff, {
    clockFace: 'HourCounter',
    countdown: true,

        callbacks: {
                stop: function() {
                $('.clock').addClass("hideCountdown");
                $('.message').html('Our First Offer Has Ended!');
                                }
                            }

        });
    });

Upvotes: 2

Views: 1578

Answers (1)

kemotoe
kemotoe

Reputation: 1777

Just add a check if the diff <= 0 then only run the countdown based on that condition. Here is a Fiddle to show functionality.

var clock, clock2;
$(document).ready(function () {
    // Grab the current date
    var currentDate = new Date();
    // Set some date in the future.
    var futureDate = new Date(); 
    futureDate.setSeconds(futureDate.getSeconds() - 10);
    // Calculate the difference in seconds between the future and current date
    var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
    if (diff <= 0) {
    $('.message').html('Our First Offer Has Ended!');   
    } else {
      // Instantiate a coutdown FlipClock
        clock = $('.clock').FlipClock(diff, {
            clockFace: 'HourCounter',
            countdown: true,
            callbacks: {
            stop: function() {
                $('.clock').addClass("hideCountdown");
                $('.message').html('Our First Offer Has Ended!');
            }
            }
        });
    }    
});

Upvotes: 1

Related Questions