Element. Dimensions.js

Contains Element prototypes to deal with Element size and position in space.

Note

The functions in this script require n XHTML doctype.

License

MIT-style license.

Summary
Element. Dimensions.jsContains Element prototypes to deal with Element size and position in space.
ElementCustom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
scrollToScrolls the element to the specified coordinated (if the element has an overflow)
getSizeReturn an Object representing the size/scroll values of the element.
getPositionReturns the real offsets of the element.
getTopReturns the distance from the top of the window to the Element.
getLeftReturns the distance from the left of the window to the Element.
getCoordinatesReturns an object with width, height, left, right, top, and bottom, representing the values of the Element

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties
scrollToScrolls the element to the specified coordinated (if the element has an overflow)
getSizeReturn an Object representing the size/scroll values of the element.
getPositionReturns the real offsets of the element.
getTopReturns the distance from the top of the window to the Element.
getLeftReturns the distance from the left of the window to the Element.
getCoordinatesReturns an object with width, height, left, right, top, and bottom, representing the values of the Element

Properties

scrollTo

Scrolls the element to the specified coordinated (if the element has an overflow)

Arguments

xthe x coordinate
ythe y coordinate

Example

$('myElement').scrollTo(0, 100)

getSize

Return an Object representing the size/scroll values of the element.

Example

$('myElement').getSize();

Returns

{
    'scroll': {'x': 100, 'y': 100},
    'size': {'x': 200, 'y': 400},
    'scrollSize': {'x': 300, 'y': 500}
}

getPosition

Returns the real offsets of the element.

Arguments

overflownoptional, an array of nested scrolling containers for scroll offset calculation, use this if your element is inside any element containing scrollbars

Example

$('element').getPosition();

Returns

{x: 100, y:500};

getTop

Returns the distance from the top of the window to the Element.

Arguments

overflownoptional, an array of nested scrolling containers, see Element::getPosition

getLeft

Returns the distance from the left of the window to the Element.

Arguments

overflownoptional, an array of nested scrolling containers, see Element::getPosition

getCoordinates

Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Arguments

overflownoptional, an array of nested scrolling containers, see Element::getPosition

Example

var myValues = $('myElement').getCoordinates();

Returns

{
    width: 200,
    height: 300,
    left: 100,
    top: 50,
    right: 300,
    bottom: 350
}
returns the element passed in with all the Element prototypes applied.

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi