Question

I am in the process of applying validation on a web form -one of the things I would like to do is add a pulsing border to the div which contains the erroneous input.

This solution: border highlighting loop with jquery and http://jsfiddle.net/Ue4wy/4/ pretty much hits the mark.

But I want to be able to fade the yellow border to black on the click handler & reset the loop (this example pauses the loop), so the next time the user hits submit it starts again.

Reseting the colour to black works using the code below (though I am sure there is a more elegant solution), but how do I reset the loop?

    $('#weight').animate({
        borderBottomColor: '#000',
        borderLeftColor: '#000',
        borderRightColor: '#000',
        borderTopColor : '#000'
    }, 'fast' );

Any ideas appreciated!

Answer 1

I’ve updated the update() function to accept an argument, i, which is then called in the click handler, along with window.clearTimeout():

var addClickHandler = function() {
    $("div").click(function() {
        window.clearTimeout(timer);
        update(0);

    });
};

This does require that the other calls to update() also need to pass the i:

var update = function(i) {
    $("div").css("border-color", 'rgb(' + i + ',' + i + ',' + 0 + ')');
};

JS Fiddle demo.

---

Edited to amend the click-handler to offer a toggle (stop/start) for the animation:

var addClickHandler = function() {
    $("div").toggle(function() {
        window.clearTimeout(timer);
        update(0);

    }, function() {
        anim.go();
    });
};

JS Fiddle demo.

---

Edited for a slightly more context-aware click-handler, this version checks for the existence of the timer variable and, if it isn’t found, starts the animation. If it is found then it clears the timeout, sets the timer to false and calls update(0) to reset the borders to black:

var addClickHandler = function() {
    $("div").click(function() {
        console.log(timer);
        if (!timer){
            timer = window.setTimeout(anim.go, 30);
        }
        else {
            window.clearTimeout(timer);
            timer = false;
            update(0);
        }

    });

JS Fiddle demo.

References:

• toggle().
• window.clearTimeout().