Logo
doctype [?]
[strict] [loose] [none]

Object Position and Size


The goal of this library is simple: Find the position of an object on the page regardless of the layout, css, or positioning used.

Finding the position of an object on the page seems simple, and many approaches found on the web will show you the simplest case - which will work in most situations. However, this approach (of just walking up the offsetParent chain and adding offsetLeft and offsetTop values) will not work in cases where there are elements that scroll (such as a DIV with a scrollable content area) and in other situations. It's necessary to have a more robust function which is built to handle as many possible conditions as possible, so it may be "plugged in" to any layout and work correctly.

In addition to finding the position of an object, this library also reports back its width and height. Also, it provides a convenience method for setting the position of an object. It's all about position!

The simple example below illustrates the concept. Simply click on any yellow text to position the pointer to the upper-left corner of the object.



This is a test of the lib.

This DIV is scrollable in most browsers.
Scroll the text up below
and see how the position stays accurate.
Test the position of the center of an object
Thislineisintentionallyreallylongsothereishorizontalscrollingtotestthatwaytoo.ThelineshouldbereallylongandcausetheDIVtoscroll.
This is extra content
at the bottom
to make sure
that the
DIV scrolls
as expected.
This
should
be
enough
text
I
hope