Question

I need to make a div2 visible after div1 has had a ‘.selected’ class for X amount of seconds, and revert to hidden when div1 loses the ‘.selected’ class. What’s the best way to go about this?

Answer 1

You can add an class name event listener to an object to detect a change using this code:

function addClassNameListener(elemId, callback) {
var elem = document.getElementById(elemId);
var lastClassName = elem.className;
window.setInterval( function() {   
   var className = elem.className;
    if (className !== lastClassName) {
        callback();   
        lastClassName = className;
    }
},10);
}

You can adapt that to look for a certain class name if you’d like 🙂

Here is it in action:

http://jsfiddle.net/gJgmV/5/

Edit: This is probably a moderately intensive function as it is basically checking whether or not the class has changed every 10 millieconds.

If it is posible in your situation, perhaps it would be better to add a function to the onclick event of whatever sets the class. Heres a demo:
http://jsfiddle.net/gJgmV/6/