Search jQuery

jQuery Forum

Countdown Timer add class at specific time

in Using jQuery Plugins • 5 years ago

Hi - i'm currently using a countdown timer plugin (http://hilios.github.io/jQuery.countdown/) and what i want to achieve is a simple class which is added to a div based on how much time is left.

if the time left is greater than 10 minutes change div to the color green.

if the time left is between 1-10 minutes change div to orange and finally.

if the time left is under 1 minute change div to red.

I've created a fiddle of how it currently looks

https://jsfiddle.net/uokqjn0r/1/

there's 3 class which i want to add to the traffic-light div .green, .orange and .red based on the info above

is this possible? there are currently no events in the documentation like what i want to achieve. Your help is very much appreciated

Replies(6)

kbwood.au

Re: Countdown Timer add class at specific time

5 years ago

If you were using my Countdown plugin instead, you would set an onTick callback and check the minutes value provided to set the styling accordingly. See the Highlight last five seconds example on the Miscellaneous tab.

richard1

Re: Countdown Timer add class at specific time

5 years ago

Appreciate your suggestion although everything at the moment the whole system is coded to use the plugin specified - timewise we haven't got any to go through the whole system and swap the plugin. I think i'm nearly there although at the moment the divs are all orange.

Can anyone assist me with this?

$(document).ready(function(){
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%-Hh : %-Mm : %-Ss'));
if (event.offset.seconds > 600000) { //if the time is over 10minutes
$("table").find(".traffic-light").addClass( "green" );
} else if (event.offset.seconds > 60000-600000) { //if the time is between 1 and 10 minutes
$("table").find(".traffic-light").addClass( "orange" );
} else if (event.offset.seconds > 0-60000) { //if the time is between 0 and 1 minute
$("table").find(".traffic-light").addClass( "red" );
}
});
});
});

kbwood.au

Re: Countdown Timer add class at specific time

5 years ago

Can you provide a page that shows the problem? Preferably in JSFiddle.

richard1

Re: Countdown Timer add class at specific time

5 years ago

Of course - https://jsfiddle.net/uokqjn0r/5/

You will need to adjust the timer though i.e end date and time so you can simulate the

if the time left is greater than 10 minutes change div to the color green.

if the time left is between 1-10 minutes change div to orange and finally.

if the time left is under 1 minute change div to red.

Many thanks for you help

kbwood.au

Re: Countdown Timer add class at specific time

5 years ago

event.offset.seconds only counts seconds within the minute. Use event.offset.minutes instead for your test. Like this.

richard1

Re: Re: Countdown Timer add class at specific time

5 years ago

Many thanks that seems to work now - its quite funny as on the way into work this morning i was saying to myself i probably need to use offset.minutes.

Your example seems to work fine - much appreciated.

Top Reply

Response title

Attachments

jQuery Forum

Countdown Timer add class at specific time

Replies(6)

Re: Countdown Timer add class at specific time

Re: Countdown Timer add class at specific time

Re: Countdown Timer add class at specific time

Re: Countdown Timer add class at specific time

Re: Countdown Timer add class at specific time

Re: Re: Countdown Timer add class at specific time

Statistics

Tags

Actions