JavaScript -Change CSS color for 5 seconds

Question

I am trying to make a way of briefly highlighting the text on named links - but only for a few seconds.

<a href="#faq1"onClick="document.getElementById('faq1').style.color='#f00'">

So on a list of FAQs - it jumps to the proper ID, changes the color to red for a few seconds as a visual cue to the end user (the answer is here). but then returning to normal color and the interval is complete.

How do I make the above function to work for only a set period of time?

Solution 1

try this:

function highlight(obj){
   var orig = obj.style.color;
   obj.style.color = '#f00';
   setTimeout(function(){
        obj.style.color = orig;
   }, 5000);
}

and in the html:

<a href="#faq1" onClick="highlight(document.getElementById('faq1'));">

this function will work for any object you pass to it :-)

here is a working fiddle: http://jsfiddle.net/maniator/dG2ks/

Solution 2

You can use window.setTimeout()

<a href="#faq1" onClick="highlight()">

<script type="text/javascript">
    function highlight() {
        var el = document.getElementById('faq1');
        var original = el.style.color;
        el.style.color='#f00';
        window.setTimeout(function() { el.style.color = original; }, 5000);
    }
</script>

Comments

[Naftali]

why would u use jQuery for something so trivial, and the op is not using jquery that i can see

[NKCSS]

jQuery is the standard for browser independant DOM modification. As soon as you enter that area, why not do it properly?

[Naftali]

that is assuming the orig color was #000

[Naftali]

why is it standard? its not standard for everyone. there are so many other DOM modifcation libraries

[Naftali]

also this ends up in an infinite loop!

[Chris]

love the solution and ability to pass the ID to the function. works perfect for me since I have 20 FAQ questions. allows me to not repeat code. Thank you!