Javascript track when element became visible?

Question

I have different controls on screen and hide and show them asynchronously. Is there any way to track when an element becomes actually visible on the screen? I actually want to get a callback when that happens and move the focus on that element!

Answer 1

try this

var trk = new Array("element1","element2","element3"); // add elements IDS whom you want to track
window.onload = function(){

  track();
}

function track()
{
  var ele;
 for(var i=0;i<trk.length;i++)
 {  
    ele= document.getElementById(trk[i]);
    if(ele)
    {
       if(ele.style.display!="none")
       {
          // do something
       }
    }
 }
 setTimeout(function(){track();},1);
}

Answer 2

The only way that I can think of is to have a setInterval method which checks of the element.style.display!=="none", or whatever other method you used to hide and show the element.

Something like:

var myInterval = setInterval(function()
{
    var element = document.getElementByID("SomeElement");
    if( element.style.display!=="none" || element.style.visibility!=="hidden")
    {
        //exit the interval
        clearInterval(myInterval);
        doSomeFunction();
    }
}, 20);