Today we conclude our series of posts on space & dimension with an exploration of YUI’s Spacial capabilities. Many of YUI’s capabilities aren’t readily apparent from the component level documentation. One exception are the setXY & getXY functions.

• setXY & getXY operate on the top left corner of an Element relative to the top left corner of the document.
• A companion getXY is provided with the YUI event object to determine the location of clicks.

A look at YUI’s API’s reveals a second, powerful class for dealing with 2d space. The YUI region class is a representation of an object on a grid. Region provides the top, left, right & bottom locations in a rectangular shape. Region is not a tool for manipulating the dom, rather it is a utility class for determining the union, intersection, area and other properties of a defined rectangular area.

YUI lacks many of the capabilities for handling scrolls, widths & heights we’ve encountered in other toolkits but still provides a reasonably capable set of tools with which to handle locations within a document.

I may be looking in the wrong place.  But I haven’t been able to find any dimension & spatial capabilities in either Dojo 1.0 or the Spry framework.  If anyone knows how to determine xy positions of page elements using either of these toolkits, please leave your comments below.

Today we continue our series exploring the way spacial data is handled in Javascript toolkits with a look at mootools.  (Read Previous Installments on jQuery and prototype).   Similar to prototype, mootools includes dimensioning information in the Element Object.  Unlike prototype, mootools includes positioning information there as well.  Window & Document level information is contained separately in Window.size.js

Element Dimension & Position Properties (Element.Dimensions.js):

•  scrollTo(): Scrolls an element to a specified position (in some toolkits, scroll to scrolls the container to the specified element).
• getSize(): Returns an Object representing all size & scroll values of the elemen.
• getPosition(): Returns the real offsets of the element (relative to document).
• getTop: Returns the top position of the element (relative to the window).
• getLeft: Returns the left position of the element (relative to the window).

The Window dimensions (Window.Size.js):

• getWidth: Returns width Window
• getScrollWidth: Returns width of Document
• getHeight: Returns height of Window
• getScrollHeight: Returns height of Document
• getScrollLeft: Determine current left offset of viewport relative to document.
• getScrollTop: Determine current vertical offset of viewport relative to document.
• getSize: Same as Element.getSize.

Next time, we’ll look at YUI.

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.

Read more about these APIs at

http://www.prototypejs.org/api