JQuery Countdown Plugin - show only non-zero periods

Question

I encode the countdown using the jQuery countdown plugin.

I want it to show active ("non-zero") periods, for example. instead

time remaining: 0 days, 0 hours, 13 minutes, 20 seconds

he should only show

13 minutes, 20 seconds.

My code is:

$('#countdown').countdown({ expiryUrl:'index.php?show=main', expiryText: 'EXPIRED', until: timeleft, layout:'{d<}{dn} {dl} and {d>}{h<}{hn} {hl}, {h>}{m<}{mnn} {ml}, {m>}{s<}{snn}{sl}{s>}' }); 

But the problem is that with this code it hides the "Days" period, but NOT "Hours / minutes"

I am currently getting the following:

time remaining: 0 hours, 10 minutes, 27 seconds

What do I need to do to hide ALL zero periods?

Thanks!

Answer 1

Hiya see here by adding 2 jsfiddle to show you the difference: http://jsfiddle.net/8JJ9B/6/ (Only seconds will appear note this happens when you set the countdown **format** option as lowercase) and http://jsfiddle.net/8JJ9B/4/ (Zero will also appear because I have a format option specified as capital symbols) http://jsfiddle.net/cUW4M/ update

To avoid a non-zero value, the countdown plugin has a link called format: with options as lower case character

Next http://keith-wood.name/countdownRef.html#format

[Quote] Format option == ... Use uppercase characters for required periods or appropriate lowercase characters for optional periods, i.e. only display if nonzero. As soon as one optional period appears, everything after that is also displayed ... [Unquote]

the code

 $('#highlightCountdown').countdown({until: 0, format: 'hmS',onTick: highlightLast5}); 

Answer 2

A simplified version of @Tats_innit's answer (all the correct information is in the comments and jsfiddles): The combination of format and layout options is key.

 $('#mytimer').countdown({ until: timerEnd, compact: true, format: 'dhMS', layout: '{d<}{dn} days {d>}{h<}{hn}{sep}{h>}{m<}{mnn}{sep}{m>}{s<}{snn}{s>}' }); 

This gives accordingly:

4 days 22:16:01

11:12:13

6:05

00:01