TiagoF TiagoF - 7 months ago 7
Javascript Question

jQuery countdown hide hours if no hours left

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

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 :)