javascripthtmljquerycountdownjquery-countdown

Remove days/hours/minutes when timer hits 00 in jQuery.countdown


I am using jQuery.countdown and are try to Remove days/hours/minutes when timer hits 00 with update callback function .on('update.countdown', function(event) {. So, almost working fine. but, just one issue. It is stop on 01sec when end of last second in last minute. So, it does not hide. why it does not 00 sec?

I Got: 01s

Should be: 00s

var countdown = $('.countdown[data-countdown-end]');
if (countdown.length > 0) {
    countdown.each(function() {
        var $countdown = $(this),
            finalDate = $countdown.data('countdown-end');
        $countdown.countdown(finalDate)
            .on('update.countdown', function(event) {
              var format = '<span>%-d</span> day%!d '
                  + '<span>%H</span> hr '
                  + '<span>%M</span> min '
                  + '<span>%S</span> sec';
              if(event.offset.totalDays === 0) {
                  format = '<span>%H</span> hr '
                  + '<span>%M</span> min '
                  + '<span>%S</span> sec';
              } 
              if(event.offset.totalHours === 0) {
                  format = 
                  '<span>%M</span> min '
                  + '<span>%S</span> sec';
              }
              if(event.offset.totalMinutes === 0) {
                  format = '<span>%S</span> sec';
              }
              if(event.offset.totalSeconds === 0) {
                  format = '';
              }
            $countdown.html(event.strftime(format));
    }); 
});
}

Working fine without update callback function:

if, I have used default code without update callback. So, It is stop on 00sec when end of last second in last minute.

I Got (Fine): 00d 00h 00m 00s

var countdown = $('.countdown[data-countdown-end]');
if (countdown.length > 0) {
    countdown.each(function() {
        var $countdown = $(this),
            finalDate = $countdown.data('countdown-end');
        $countdown.countdown(finalDate, function(event) {
            $countdown.html(event.strftime(
                '%Dd %Hh %Mm %Ss'
            ));
        });
    });
}

Why it does not 00 sec with update callback code?


Solution

  • I got finally solution from Advanced example. It is working fine with finish callback function.

    Final working my code below:

    var countdown = $('.countdown[data-countdown-end]');
    if (countdown.length > 0) {
        countdown.each(function() {
            var $countdown = $(this),
                finalDate = $countdown.data('countdown-end');
            $countdown.countdown(finalDate)
                .on('update.countdown', function(event) {
                  var format = '<span>%-d</span> day%!d '
                      + '<span>%H</span> hr '
                      + '<span>%M</span> min '
                      + '<span>%S</span> sec';
                  if(event.offset.totalDays === 0) {
                      format = '<span>%H</span> hr '
                      + '<span>%M</span> min '
                      + '<span>%S</span> sec';
                  } 
                  if(event.offset.totalHours === 0) {
                      format = 
                      '<span>%M</span> min '
                      + '<span>%S</span> sec';
                  }
                  if(event.offset.totalMinutes === 0) {
                      format = '<span>%S</span> sec';
                  }
                $countdown.html(event.strftime(format));
        })
       .on('finish.countdown', function(event) {
            $countdown.addClass('disabled');
        });
    });
    }
    

    Css

    .countdown.disabled {display:none;}