Question

Can I create an event so I can execute some javascript whenever an element with a specific ID becomes visible or appears on the page?

The element comes from a remote resource (so isn’t in MY html code but appears on page load) and I’d like some code to run when it appears (and only if it appears, it may not appear every load).

Thanks!

Answer 1

You can make a function that will check every X milliseconds if such element appeared on the page (a plain Javascript solution):

(​function ()​ {
    var intervalId = window.setInterval(function() {
        if (null != document.getElementById('myDivId')) {
            // the div appeared on the page
            // ... do your stuff here:
            alert('its here!');

            // optionally stop checking (obviously it's there already 
            // unless you decide to remove it)
            window.clearInterval(intervalId);
        };
    }, 100); // perform check every 100 milliseconds
}​)()​;

There is the possibility that the DIV is there all the time, only not visible. So your checking function should be a little different:

var el = document.getElementById('myDivId');
if (null != el && (el.offsetWidth > 0 || el.offsetHeight > 0)) {

Basically (el.offsetWidth > 0 || el.offsetHeight > 0) indicates that element is not hidden by its or its parents’ CSS properties.