jQuery countdown hide hours if no hours left

Question

I'm using a jquery countdown script that i found on youtube tutorial but i want to change some factors:

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

---

That's what i'm working with:

countdown.js

(function($){

    $.fn.countdown = function(options, callback){

        var settings = { 'date': null };
        if(options){
            $.extend(settings, options);
        };

        this_sel = $(this);

        function count_exec() {

            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);

            if(eventDate <= currentDate){

                callback.call(this);
                clearInterval(interval);

            }

            seconds = eventDate - currentDate;

            days = Math.floor(seconds / (60 * 60 * 24));
            seconds -= days * 60 * 60 * 24;

            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60;

            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60;

            days = (String(days).length !== 2) ? '0' + days : days;
            hours = (String(hours).length !== 2) ? '0' + hours : hours;
            minutes = (String(minutes).length !== 2) ? '0' + minutes : minutes;
            seconds = (String(seconds).length !== 2) ? '0' + seconds : seconds;

            if(!isNaN(eventDate)){
                this_sel.find('.days').text(days);
                this_sel.find('.hours').text(hours);
                this_sel.find('.minutes').text(minutes);
                this_sel.find('.seconds').text(seconds);
            }

        }

        count_exec();
        interval = setInterval(count_exec, 1000);

    }

})(jQuery);

HTML

<span class="days">00</span> Days
<span class="hours">00</span> Hours
<span class="minutes">00</span> Minutes
<span class="seconds">00</span> Seconds

Run

<script>
$(document).ready(function(){

   $('#item-1').countdown({ date: '30 July 2015 12:00:00' }, function() {

       $('#item-1').text('Finished');

       $.ajax({
          url: "/ajax",
          type: "GET",
          data: { 'id' : 1 }
       });

       window.setTimeout(function(){location.reload()},3000);
   });

});
</script>

Thanks!

Answer 1

Yes! After search all over the web for a solution to this problem. I came up with my own simple solution. Sorry, it's not based on the code of the original question. However, it may help someone stuck on the same situation of wanting to solve this issue. This is what i did.

Pretty much, if the timer is over.. change text to we are live! Else... if even days left is greater than 0... show normal code.. else if days left is == 0, remove days from equation. Hope it helps someone! somewhere in time :)

var tenSeconds = new Date().getTime() + 10000;
var realdate = "2016/04/26";

  $('#Trm_Countdown').countdown(tenSeconds, {elapse: true,}).on('update.countdown', function(event) {
        var $this = $(this);
        if (event.elapsed) 
        {
          $this.html(event.strftime("<span class='mobile-end'>We're Live!</span>"));
        } 
        else 
        {
          if (event.offset.totalDays > 0) 
            {
              $this.html(event.strftime(''
               + '<span>Live-event broadcast begins in </span>' 
               + '<span class="trm-timer">%-D</span> Day%!D '
               + '<span class="trm-timer">%H:</span>'
               + '<span class="trm-timer">%M:</span>'
               + '<span class="trm-timer">%S</span> '));
            }

          else 
            {
              $this.html(event.strftime(''
               + '<span>Live-event broadcast begins in </span>'
               + '<span class="trm-timer">%H:</span>'
               + '<span class="trm-timer">%M:</span>'
               + '<span class="trm-timer">%S</span> '));
            }  

        }
  });

Answer 2

In that case you can wrap your text like

<span class="days_show"><span class="days">00</span> Days</span>
<span class="hours_show"><span class="hours">00</span> Hours</span>
<span class="minutes_show"><span class="minutes">00</span> Minutes</span>
<span class="seconds_show"><span class="seconds">00</span> Seconds</span>

if(!isNaN(eventDate)){
              if(days==0){
                this_sel.find('.days_show').hide();
               }
              if(hours==0){
                this_sel.find('.hours_show').hide();
               }
              if(minutes==0){
                this_sel.find('.minutes_show').hide();
               }
              if(seconds==0){
                this_sel.find('.seconds_show').hide();
               }
                this_sel.find('.days').text(days);
                this_sel.find('.hours').text(hours);
                this_sel.find('.minutes').text(minutes);
                this_sel.find('.seconds').text(seconds);
            }

Hope it helps :)