2 * This plugin overrides jQuery's height() and width() functions and
\r
3 * adds more handy stuff for cross-browser compatibility.
\r
7 * Returns the css height value for the first matched element.
\r
8 * If used on document, returns the document's height (innerHeight)
\r
9 * If used on window, returns the viewport's (window) height
\r
11 * @example $("#testdiv").height()
\r
14 * @example $(document).height();
17 * @example $(window).height();
24 $.fn.height = function() {
\r
25 if ( this.get(0) == window )
26 return self.innerHeight ||
27 jQuery.boxModel && document.documentElement.clientHeight ||
\r
28 document.body.clientHeight;
\r
30 if ( this.get(0) == document )
\r
31 return Math.max( document.body.scrollHeight, document.body.offsetHeight );
\r
33 return this.css("height");
\r
37 * Returns the css width value for the first matched element.
\r
38 * If used on document, returns the document's width (innerWidth)
\r
39 * If used on window, returns the viewport's (window) width
\r
41 * @example $("#testdiv").width()
\r
44 * @example $(document).width();
47 * @example $(window).width();
54 $.fn.width = function() {
\r
55 if ( this.get(0) == window )
56 return self.innerWidth ||
57 jQuery.boxModel && document.documentElement.clientWidth ||
\r
58 document.body.clientWidth;
\r
60 if ( this.get(0) == document )
\r
61 return Math.max( document.body.scrollWidth, document.body.offsetWidth );
\r
63 return this.css("width");
\r
67 * Returns the inner height value (without border) for the first matched element.
\r
68 * If used on document, returns the document's height (innerHeight)
\r
69 * If used on window, returns the viewport's (window) height
\r
71 * @example $("#testdiv").innerHeight()
\r
78 $.fn.innerHeight = function() {
\r
79 return this.get(0) == window || this.get(0) == document ?
81 this.get(0).offsetHeight - parseInt(this.css("borderTop") || 0) - parseInt(this.css("borderBottom") || 0);
\r
85 * Returns the inner width value (without border) for the first matched element.
\r
86 * If used on document, returns the document's Width (innerWidth)
\r
87 * If used on window, returns the viewport's (window) width
\r
89 * @example $("#testdiv").innerWidth()
\r
96 $.fn.innerWidth = function() {
\r
97 return this.get(0) == window || this.get(0) == document ?
99 this.get(0).offsetWidth - parseInt(this.css("borderLeft") || 0) - parseInt(this.css("borderRight") || 0);
\r
103 * Returns the outer height value (including border) for the first matched element.
\r
104 * Cannot be used on document or window.
\r
106 * @example $("#testdiv").outerHeight()
\r
109 * @name outerHeight
\r
113 $.fn.outerHeight = function() {
\r
114 return this.get(0) == window || this.get(0) == document ?
116 this.get(0).offsetHeight;
\r
120 * Returns the outer width value (including border) for the first matched element.
\r
121 * Cannot be used on document or window.
\r
123 * @example $("#testdiv").outerWidth()
\r
130 $.fn.outerWidth = function() {
\r
131 return this.get(0) == window || this.get(0) == document ?
133 this.get(0).offsetWidth;
\r
137 * Returns how many pixels the user has scrolled to the right (scrollLeft).
\r
138 * Works on containers with overflow: auto and window/document.
\r
140 * @example $("#testdiv").scrollLeft()
\r
147 $.fn.scrollLeft = function() {
\r
148 if ( this.get(0) == window || this.get(0) == document )
149 return self.pageXOffset ||
150 jQuery.boxModel && document.documentElement.scrollLeft ||
151 document.body.scrollLeft;
153 return this.get(0).scrollLeft;
\r
157 * Returns how many pixels the user has scrolled to the bottom (scrollTop).
\r
158 * Works on containers with overflow: auto and window/document.
\r
160 * @example $("#testdiv").scrollTop()
\r
167 $.fn.scrollTop = function() {
\r
168 if ( this.get(0) == window || this.get(0) == document )
169 return self.pageYOffset ||
170 jQuery.boxModel && document.documentElement.scrollTop ||
171 document.body.scrollTop;
173 return this.get(0).scrollTop;
\r
176 /* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)
\r
177 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
\r
178 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
\r
182 * This returns an object with top, left, width, height, borderLeft,
\r
183 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
\r
184 * pageXOffset, pageYOffset.
\r
186 * The top and left values include the scroll offsets but the
\r
187 * scrollLeft and scrollTop properties of the returned object
\r
188 * are the combined scroll offets of the parent elements
\r
189 * (not including the window scroll offsets). This is not the
\r
190 * same as the element's scrollTop and scrollLeft.
\r
192 * For accurate readings make sure to use pixel values.
\r
197 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
\r
200 * This returns an object with top, left, width, height, borderLeft,
\r
201 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
\r
202 * pageXOffset, pageYOffset.
\r
204 * The top and left values include the scroll offsets but the
\r
205 * scrollLeft and scrollTop properties of the returned object
\r
206 * are the combined scroll offets of the parent elements
\r
207 * (not including the window scroll offsets). This is not the
\r
208 * same as the element's scrollTop and scrollLeft.
\r
210 * For accurate readings make sure to use pixel values.
\r
214 * @param String refElement This is an expression. The offset returned will be relative to the first matched element.
\r
216 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
\r
219 * This returns an object with top, left, width, height, borderLeft,
\r
220 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
\r
221 * pageXOffset, pageYOffset.
\r
223 * The top and left values include the scroll offsets but the
\r
224 * scrollLeft and scrollTop properties of the returned object
\r
225 * are the combined scroll offets of the parent elements
\r
226 * (not including the window scroll offsets). This is not the
\r
227 * same as the element's scrollTop and scrollLeft.
\r
229 * For accurate readings make sure to use pixel values.
\r
233 * @param jQuery refElement The offset returned will be relative to the first matched element.
\r
235 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
\r
238 * This returns an object with top, left, width, height, borderLeft,
\r
239 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
\r
240 * pageXOffset, pageYOffset.
\r
242 * The top and left values include the scroll offsets but the
\r
243 * scrollLeft and scrollTop properties of the returned object
\r
244 * are the combined scroll offets of the parent elements
\r
245 * (not including the window scroll offsets). This is not the
\r
246 * same as the element's scrollTop and scrollLeft.
\r
248 * For accurate readings make sure to use pixel values.
\r
252 * @param HTMLElement refElement The offset returned will be relative to this element.
\r
254 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
\r
256 $.fn.offset = function(refElem) {
\r
257 if (!this[0]) throw '$.fn.offset requires an element.';
\r
259 refElem = (refElem) ? $(refElem)[0] : null;
\r
260 var x = 0, y = 0, elm = this[0], parent = this[0], pos = null, borders = [0,0], isElm = true, sl = 0, st = 0;
\r
262 if (parent.tagName == 'BODY' || parent.tagName == 'HTML') {
\r
263 // Safari and IE don't add margin for static and relative
\r
264 if (($.browser.safari || $.browser.msie) && pos != 'absolute') {
\r
265 x += parseInt($.css(parent, 'marginLeft')) || 0;
\r
266 y += parseInt($.css(parent, 'marginTop')) || 0;
\r
271 pos = $.css(parent, 'position');
\r
272 border = [parseInt($.css(parent, 'borderLeftWidth')) || 0,
\r
273 parseInt($.css(parent, 'borderTopWidth')) || 0];
\r
274 sl = parent.scrollLeft;
\r
275 st = parent.scrollTop;
\r
277 x += (parent.offsetLeft || 0) + border[0] - sl;
\r
278 y += (parent.offsetTop || 0) + border[1] - st;
\r
280 // Safari and Opera include the border already for parents with position = absolute|relative
\r
281 if (($.browser.safari || $.browser.opera) && !isElm && (pos == 'absolute' || pos == 'relative')) {
\r
286 parent = parent.offsetParent;
\r
291 var offset = $(refElem).offset();
\r
292 x = x - offset.left;
\r
293 y = y - offset.top;
\r
294 sl = sl - offset.scrollLeft;
\r
295 st = st - offset.scrollTop;
\r
301 width: elm.offsetWidth,
\r
302 height: elm.offsetHeight,
\r
303 borderTop: parseInt($.css(elm, 'borderTopWidth')) || 0,
\r
304 borderLeft: parseInt($.css(elm, 'borderLeftWidth')) || 0,
\r
305 marginTop: parseInt($.css(elm, 'marginTopWidth')) || 0,
\r
306 marginLeft: parseInt($.css(elm, 'marginLeftWidth')) || 0,
\r
309 pageYOffset: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
\r
310 pageXOffset: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
\r