1 Type: Element {#Element}
2 =========================
4 Custom Type to allow all of its methods to be used with any DOM element via the dollar function [$][].
8 * These methods don't take into consideration the body element margins and borders. If you need margin/borders on the body, consider adding a wrapper div, but always reset the margin and borders of body to 0.
9 * If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use [Element.measure][] to expose it.
13 - Element positioning based on the [qooxdoo](http://qooxdoo.org/) code and smart browser fixes, [LGPL License](http://www.gnu.org/licenses/lgpl.html).
14 - Viewport dimensions based on [YUI](http://developer.yahoo.com/yui/) code, [BSD License](http://developer.yahoo.com/yui/license.html).
18 Element Method: scrollTo {#Element:scrollTo}
19 --------------------------------------------
21 Scrolls the element to the specified coordinated (if the element has an overflow).
22 The following method is also available on the Window object.
26 myElement.scrollTo(x, y);
30 1. x - (*number*) The x coordinate.
31 2. y - (*number*) The y coordinate.
35 $('myElement').scrollTo(0, 100);
39 - [MDC Element:scrollLeft][], [MDC Element:scrollTop][]
43 Element Method: getSize {#Element:getSize}
44 ------------------------------------------
46 Returns the height and width of the Element, taking into account borders and padding.
47 The following method is also available on the Window object.
55 * (*object*) An object containing the width (as x) and the height (as y) of the target Element.
59 var size = myElement.getSize();
60 alert('The element is ' + size.x + ' pixels wide and ' + size.y + 'pixels high.');
64 If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use [Element.measure][] to expose it.
67 Element Method: getScrollSize {#Element:getScrollSize}
68 ------------------------------------------------------
70 Returns an Object representing the size of the target Element, including scrollable area.
71 The following method is also available on the Window object.
75 myElement.getScrollSize();
79 * (*object*) An object containing the x and y dimensions of the target Element.
83 var scroll = $('myElement').getScrollSize();
84 alert('My element can scroll to ' + scroll.y + 'px'); // alerts 'My element can scroll down to 820px'
88 - [MDC Element:scrollLeft][], [MDC Element:scrollTop][], [MDC Element:offsetWidth][], [MDC Element:offsetHeight][], [MDC Element:scrollWidth][], [MDC Element:scrollHeight][]
92 If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use [Element.measure][] to expose it.
95 Element Method: getScroll {#Element:getScroll}
96 ----------------------------------------------
98 Returns an Object representing how far the target Element is scrolled in either direction.
99 The following method is also available on the Window object.
103 myElement.getScroll();
107 * (*object*) An object containing the x and y dimensions of the target Element's scroll.
111 var scroll = $('myElement').getScroll();
112 alert('My element is scrolled down ' + scroll.y + 'px'); // alerts 'My element is scrolled down to 620px'
116 If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use [Element.measure][] to expose it.
119 Element Method: getPosition {#Element:getPosition}
120 --------------------------------------------------
122 Returns the real offsets of the element.
126 myElement.getPosition(relative);
130 relative - (Element, defaults to the document) If set, the position will be relative to this Element.
134 * (*object*) An object with the x and y coordinates of the Element's position.
138 $('element').getPosition(); // returns {x: 100, y: 500};
142 - [QuirksMode: Find position](http://www.quirksmode.org/js/findpos.html)
146 If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use [Element.measure][] to expose it.
149 Element Method: setPosition {#Element:setPosition}
150 --------------------------------------------------
152 Sets the position of the element's *left* and *top* values to the x/y positions you specify.
156 myElement.setPosition(positions);
160 1. positions - (*object*) an object with x/y values (integers or strings, i.e. 10 or "10px")
164 * (*element*) the element that is positioned.
168 myElement.setPosition({x: 10, y: 100});
172 Element Method: getCoordinates {#Element:getCoordinates}
173 --------------------------------------------------------
175 Returns an object with width, height, left, right, top, and bottom coordinate values of the Element.
179 myElement.getCoordinates(relative);
183 relative - (*element*, optional) if set, the position will be relative to this element, otherwise relative to the document.
187 * (*object*) An object containing the Element's current: top, left, width, height, right, and bottom.
191 var myValues = $('myElement').getCoordinates();
206 [Element:getPosition](#Element:getPosition)
210 If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use [Element.measure][] to expose it.
213 Element Method: getOffsetParent {#Element:getOffsetParent}
214 ----------------------------------------------------------
216 Returns the parent of the element that is positioned, if there is one.
220 myElement.getOffsetParent();
224 * (*mixed*) If the element has a parent that is positioned, it returns that element, otherwise it returns *null*.
228 [$]: /core/Element/Element#Window:dollar
229 [MDC Element:scrollLeft]: http://developer.mozilla.org/en/docs/DOM:element.scrollLeft
230 [MDC Element:scrollTop]: http://developer.mozilla.org/en/docs/DOM:element.scrollTop
231 [MDC Element:offsetWidth]: http://developer.mozilla.org/en/docs/DOM:element.offsetWidth
232 [MDC Element:offsetHeight]: http://developer.mozilla.org/en/docs/DOM:element.offsetHeight
233 [MDC Element:scrollWidth]: http://developer.mozilla.org/en/docs/DOM:element.scrollWidth
234 [MDC Element:scrollHeight]: http://developer.mozilla.org/en/docs/DOM:element.scrollHeight
235 [Element.measure]: /more/Element/Element.Measure