Countdown Circle

[jasonkmccoy]

I have set the countdown to 15 seconds but when the countdown starts, the color that shows the remaining time starts at about 3 o'clock. I want the color to decrease starting at 12 o'clock until the countdown hits 0. I hope this makes sense.

Thanks, Jason

[wimbarelds]

Hey there, the option you're looking for is total_duration. Try:

$("#YourTimer").TimeCircles({ total_duration: 15});

[jasonkmccoy]

Thanks :) Worked like a charm. Could you tell me if its possible to change the color so that when there are 15 seconds to 10 seconds, the color is green. When the time is between 10 seconds and 5 seconds, the color is yellow, when it gets to 5 seconds to 0, the color is red? Thanks a lot

[wimbarelds]

That would be something like:

var $timerDiv = $("#YourTimer");
$timerDiv.TimeCircles({ total_duration: 15, time: { Seconds: { color: "#00FF00" } }}).addListener(unit, value, total) {
    if(total == 10) $timerDiv.TimeCircles({ time: { Seconds: { color: "#FFFF00" } } });
    else if(total == 5) $timerDiv.TimeCircles({ time: { Seconds: { color: "#FF0000" } } });
});

(I haven't tested this code, but the code should look something like this).

[jasonkmccoy]

Thanks for your help. That last bit of code doesn't work or I'm doing it wrong.

[wimbarelds]

Could you link it to me so I can have a look?

[jasonkmccoy]

Ok, here's the link: http://hoppedupdesigns.com/countdownTimer/index.html

[wimbarelds]

var $timerDiv = $("#YourTimer");
$timerDiv.TimeCircles({ total_duration: 15, time: { Seconds: { color: "#00FF00" } }}).addListener(function(unit, value, total) {
    if(total == 10) $timerDiv.TimeCircles({ time: { Seconds: { color: "#FFFF00" } } });
    else if(total == 5) $timerDiv.TimeCircles({ time: { Seconds: { color: "#FF0000" } } });
});

Found an error, try this:

[jasonkmccoy]

Yep, that fixed it. Works great now. Thanks for your help and time. I'll stop bugging you now :)