Handling Dimensions with Prototype

November 1st, 2007 Posted by Don Albrecht

Yesterday, We explored the jQuery Dimensions plugin and how it can be used to get a handle on the Physical location of elements on the page. Today we explore achieving the same effect with the native Prototype Element & Position Objects.

Element provides three methods to get a handle on the dimensions of an element

getWidth( element ) Returns the width of an element
getHeight() Returns the height of an element
getDimensions() Returns the height & width of an element as an associative array.

For more advanced and capable access to the spacial properties of an Element we turn to the Position object.

page() Returns the x, y position of an element relative to the viewport
cumulativeOffset() Returns the x, y position of an element relative to the entire document
positionedOffset() Returns the position of an element relative to its parent.

As you can see, the prototype tools are a bit more powerful out of the box than jQuery Dimension (None of these require a plugin.) Prototype, however, doesn’t handle scrolls as well as jQuery Dimension.