Question

I want to detect if is not visible in browser window for an interactive map i am building. if the div is not visible I will show a popup saying “this way” or something like that. The main issue is detecting when the div is not visible in the document window.

Answer 1

What I gather from your question is you want to detect if a div can be seen on the visible portion of the screen, NOT whether it’s visible based upon its CSS (display, visibility).

If so, you need to determine the div’s offset, then check if that’s within the bounds of either the document dimensions, or another element’s dimensions.

Something like this (assuming you’re using jQuery)…

var div_offset = $('#div').offset();

if( div_offset.top < $(document).height() &&
    div_offset.left < $(document).width() ) {
    // div is within window bounds
}

This is a very basic example. You would of course need to factor in how much of the div element you would want to showing for it to be considered “visible”… the above code would be true even if only the single top/left pixel of the div sits within the document bounds. Do this by perhaps testing if the bottom right corner is showing by adding the width/height to the offset.