Question

Possible Duplicate:
How to tell if a DOM element is visible in the current viewport?

There is a HTML page that only has a one div with an image in it.

How do you detect if that element is being viewed / it is in the browser window?

Answer 1

If I am understanding correctly you want to know if the image is in the viewport and not being scrolled already. In that case you need to get viewport and image height, get position of the image and current position of the document. If you are using jquery (I assume that from the tag) you can do this:

var viewportHeight = $(window).height();
var imageOffset = $('img:first').offset().top;
var imageHeight = $('img:first').height;
var documentPosition = $(window).scrollTop();

var visibleArea = documentPosition + viewportHeight; //end of visible area
var imageArea = imageOffset + imageHeight;

if (documentPosition <= imageOffset && visibleArea >= imageArea) {
  //image is entirely visible
}