jQuery countdown hide days/hours/minutes if none left

I'm using The Final Countdown jQuery script.. http://hilios.github.io/jQuery.countdown/

I want to hide days, minutes etc if there is none left (ie, reach 0).

At this moment it will display something like..

00 Days 00 Hours 13 Minutes 58 Seconds

I want to display it like..

13 Minutes 58 Seconds

HTML

<span id="clock-{{ $game->id }}"></span>

SCRIPT

var endGame = moment.tz("{{ $game->updated_at->addDays(3) }}", "Europe/Volgograd");

                $('#clock-{{ $game->id }}').countdown(endGame.toDate(), function(event) {
                    $(this).html(event.strftime('%-D days %-H hours %-M min %-S sec')).on('finish.countdown', function(event){
                        $(this).html(event.strftime('This Game has Ended.'));
                        $('.clock-{{ $game->id }}').fadeOut(2000);
                    });
                });

Thanks!!

Answers 1

  • I suppose you can put a few conditions for achieving this.

    var endGame = moment.tz("{{ $game->updated_at->addDays(3) }}", "Europe/Volgograd");
    
    $('#clock-{{ $game->id }}').countdown(endGame.toDate(), function(event) {
       var str = "";
       // if 0 number of days, show H:M:S
       if(parseInt(event.strftime('%D')) == 0) {
           str = event.strftime('%-H hours %-M min %-S sec');
           // if 0 days 0 hours, show M:S
           if(parseInt(event.strftime('%H')) == 0) {
              str = event.strftime('%-M min %-S sec');
              // if 0 days 0 hours 0 minutes, show only Seconds
              if(parseInt(event.strftime('%M')) == 0) {
                 str = event.strftime('%-S sec');
              }
           }
       } else {
           str = event.strftime('%-D days %-H hours %-M min %-S sec');
       }
       $(this).html(str).on('finish.countdown', function(event){
          $(this).html(event.strftime('This Game has Ended.'));
          $('.clock-{{ $game->id }}').fadeOut(2000);
       });
    });
    

    I don't know if the plugin provides some inbuilt feature for doing this so I took this approach.


Related Articles