Question

I have a <div> that is set to be content editable and has a fixed height. On overflow the <div> shows vertical scrollbar. What I want is to detect absolute coordinates of the top-right (or top-left) point of images in my editable <div> especially when the image is partly visible. Is it possible? More important, is there a way to tell whether the top-right point is visible to the user or it is scrolled outside view?

Any help or idea will be highly appreciated.

This should illustrate my idea:

Answer 1

You can use .offset to get the X/Y (top left) coordinates of the element relative to the document. In order to see whether it’s outside of the window, compare it to $(window).offset(). The latter gives you the X/Y coordinates of the current window relative to the document, so if the Y coordinate of the window is higher than the element in question, it’s top is off screen.