Add css based on timer value

Question

I'm looking to change the color of font based on my timer reaching <= 30 seconds. I am using this countdown plugin as my timer. So far, I am able to change the color, etc... but it adds it regardless of the time, etc. I'm fairly new to jQuery, so any help is appreciated!

$(document).ready(function(){

    var seconds = $(".time-increment").val();

    $("#timer").countdown({
        until: +seconds, 
        format: 'MS', 
        layout: '{mn} {ml}, <span class="seconds-actual">{sn}</span> {sl} remaining',
        onExpiry: reload,
        onTick: checkFont
        }); 

    function reload() {
        var id = $("#item-content").attr('class');
        $.ajax({
            type: 'POST',
            url: '../modal_content.adam.php',
            data: 'Qwicksale_id='+id,
            success: function(msg) {
                $("#item-content").hide().html(msg).fadeIn('slow');
            }
        });
    }

});

UPDATED

I added a function for the onTick - The styled class is red all of the time, not just when seconds is less than or equal to 30?

function checkFont(seconds2) {
        if(seconds2[5] == 0 && seconds2[6] <= '30') {
            $('.hasCountdown').css('color', 'red');
        }
    }

Can you show your HTML? Specifically where class="seconds-actual". — putvande
– putvande, Commented Aug 5, 2013 at 17:58
".seconds-actual" is added by the countdown plugin. {sn} tag is the number that it is displaying - I seem to be able to get the value, but not able to test it correctly for my condition? — Alpinestar22
– Alpinestar22, Commented Aug 5, 2013 at 18:30
Solution: Using onTick callback, and testing for both the MINUTES and SECONDS column (since I only wanted the last 30 seconds of the countdown, not every last 30 seconds of every minute). — Alpinestar22
– Alpinestar22, Commented Aug 5, 2013 at 19:21
@Alpinestar22 What happens if you do seconds2[6] <= 30 (30 as a number, not a string)? — Jason P
– Jason P, Commented Aug 5, 2013 at 19:39

Jason P · Accepted Answer · 2013-08-05 18:09:37Z

2

I believe the problem is that the if(seconds2 <= 30) { ... } block only executes once, when the page loads.

You need to use the onTick callback and check the remaining time in that handler.

See the second example on the "Callbacks" tab in the documentation: http://keith-wood.name/countdown.html

answered Aug 5, 2013 at 18:09

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alpinestar22 Over a year ago

I believe this is the correct way to do it. It looks like it is an issue of reading the value of .seconds-actual... my condition seems to be what is not working?

Jason P Over a year ago

If you look at the documentation, you can see that the remaining time is passed to the onTick handler. I would use that to check the time remaining instead of trying to read it from the DOM.

Alpinestar22 Over a year ago

Great advice, I am now testing what the handler is passing back.. I still seem to have a hard time reading the value though. I seem to be getting the whole class red regardless of time left?

Lucky Soni · Accepted Answer · 2013-08-05 18:12:30Z

0

Its add the color regardless of the time because you are just checking if(seconds2 <= 30) on page load then changing the color if this condition is true regardless of the time...

You may want to check this inside the success function like so:

function reload() {
    var id = $("#item-content").attr('class');
    $.ajax({
        type: 'POST',
        url: '../modal_content.adam.php',
        data: 'Qwicksale_id='+id,
        success: function(msg) {
            $("#item-content").hide().html(msg).fadeIn('slow');
            if(seconds2 <= 30) {
               $('.hasCountdown').css('color', 'red');
            }
        }
    });
}`

You may want to try

if(seconds2 <= 30) {
   setTimeout(function() {
       $('.hasCountdown').css('color', 'red');
   }, seconds2);
}

edited Aug 5, 2013 at 18:12

answered Aug 5, 2013 at 18:07

Lucky Soni

6,8883 gold badges40 silver badges59 bronze badges

Collectives™ on Stack Overflow

Add css based on timer value

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related