jquery countdown - don't show minutes etc when they are 0

Question

I am using the keith-wood jQuery countdown plugin (http://keith-wood.name/countdown.html), and am having no luck not showing the different parts when they are equal to 0 - eg 0 hours, 0 minutes, 0 seconds, etc...

This is the code I have:

 austDay = new Date("<?= date('D M d Y H:i:s O', strtotime($item['item']['date_end'])); ?>");           
 $('#countdown').countdown({until: austDay, format: 'yodhms',layout: '{d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl}{s>}'}); 

This still displays:

1 Hour 0 Minutes 8 Seconds

When I want it to display like:

1 Hour 8 Seconds

I have read through the documentation extensively and the {m<}...{m>} layout tags from my understanding supposed to achieve this, but they still display 0 minutes, etc.

I have also tried the significant option, but it isn't what I am after.

Many thanks.

Answer 1

Ok, I came up with a really simple solution to this. It uses CSS to hide the 0 elements (except for seconds in this case).

var austDay = new Date("<?php echo date('D M d Y H:i:s O', strtotime($timeRemaining)); ?>");
$('#countdown').countdown({until: austDay, format: 'dhms',  layout: '{d<}<span class="count-{dn}"><strong>{dn}</strong> {dl}</span> {d>}{h<} <span class="count-{hn}"><strong>{hn}</strong> {hl}</span>{h>}{m<} <span class="count-{mn}"><strong>{mn}</strong> {ml}</span>{m>}{s<} <strong>{sn}</strong> {sl}{s>}'});

And the CSS:

 .count-0 {
     display: none;
 }