2

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?

Community
  • 1
  • 1
Glorious Kale
  • 1,273
  • 15
  • 25
  • 1
    Are you asking how to keep track of the views and record them? What are you asking? – jeremy Aug 04 '12 at 20:21
  • How to use scripts to detect if the HTML element is being viewed by the user / is in the browser window. – Glorious Kale Aug 04 '12 at 20:24
  • 1
    you've already said that, so you're just retyping. if page is just a div with an image, it will always be being viewed by the user if the user is on the page – jeremy Aug 04 '12 at 20:26
  • If the div is 600px under the window itself, it's not being viewed, only loaded. – Glorious Kale Aug 05 '12 at 07:43

2 Answers2

4

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
}
Zefiryn
  • 2,240
  • 2
  • 20
  • 30
0

You can try Element ‘in view’ Event Plugin.

Ram
  • 143,282
  • 16
  • 168
  • 197