2 * This plugin overrides jQuery's height() and width() functions and
3 * adds more handy stuff for cross-browser compatibility.
7 * Returns the css height value for the first matched element.
8 * If used on document, returns the document's height (innerHeight)
9 * If used on window, returns the viewport's (window) height
11 * @example $("#testdiv").height()
14 * @example $(document).height();
17 * @example $(window).height();
24 jQuery.fn.height = function() {
25 if ( this.get(0) == window )
26 return self.innerHeight ||
27 jQuery.boxModel && document.documentElement.clientHeight ||
28 document.body.clientHeight;
30 if ( this.get(0) == document )
31 return Math.max( document.body.scrollHeight, document.body.offsetHeight );
33 return this.css("height");
37 * Returns the css width value for the first matched element.
38 * If used on document, returns the document's width (innerWidth)
39 * If used on window, returns the viewport's (window) width
41 * @example $("#testdiv").width()
44 * @example $(document).width();
47 * @example $(window).width();
54 jQuery.fn.width = function() {
55 if ( this.get(0) == window )
56 return self.innerWidth ||
57 jQuery.boxModel && document.documentElement.clientWidth ||
58 document.body.clientWidth;
60 if ( this.get(0) == document )
61 return Math.max( document.body.scrollWidth, document.body.offsetWidth );
63 return this.css("width");
67 * Returns the inner height value (without border) for the first matched element.
68 * If used on document, returns the document's height (innerHeight)
69 * If used on window, returns the viewport's (window) height
71 * @example $("#testdiv").innerHeight()
78 jQuery.fn.innerHeight = function() {
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);
85 * Returns the inner width value (without border) for the first matched element.
86 * If used on document, returns the document's Width (innerWidth)
87 * If used on window, returns the viewport's (window) width
89 * @example $("#testdiv").innerWidth()
96 jQuery.fn.innerWidth = function() {
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);
103 * Returns the outer height value (including border) for the first matched element.
104 * Cannot be used on document or window.
106 * @example $("#testdiv").outerHeight()
113 jQuery.fn.outerHeight = function() {
114 return this.get(0) == window || this.get(0) == document ?
116 this.get(0).offsetHeight;
120 * Returns the outer width value (including border) for the first matched element.
121 * Cannot be used on document or window.
123 * @example $("#testdiv").outerWidth()
130 jQuery.fn.outerWidth = function() {
131 return this.get(0) == window || this.get(0) == document ?
133 this.get(0).offsetWidth;
137 * Returns how many pixels the user has scrolled to the right (scrollLeft).
138 * Works on containers with overflow: auto and window/document.
140 * @example $("#testdiv").scrollLeft()
147 jQuery.fn.scrollLeft = function() {
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;
157 * Returns how many pixels the user has scrolled to the bottom (scrollTop).
158 * Works on containers with overflow: auto and window/document.
160 * @example $("#testdiv").scrollTop()
167 jQuery.fn.scrollTop = function() {
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;
177 * This returns an object with top, left, width, height, borderLeft,
178 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
179 * pageXOffset, pageYOffset.
181 * The top and left values include the scroll offsets but the
182 * scrollLeft and scrollTop properties of the returned object
183 * are the combined scroll offets of the parent elements
184 * (not including the window scroll offsets). This is not the
185 * same as the element's scrollTop and scrollLeft.
187 * For accurate readings make sure to use pixel values.
192 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
195 * This returns an object with top, left, width, height, borderLeft,
196 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
197 * pageXOffset, pageYOffset.
199 * The top and left values include the scroll offsets but the
200 * scrollLeft and scrollTop properties of the returned object
201 * are the combined scroll offets of the parent elements
202 * (not including the window scroll offsets). This is not the
203 * same as the element's scrollTop and scrollLeft.
205 * For accurate readings make sure to use pixel values.
209 * @param String refElement This is an expression. The offset returned will be relative to the first matched element.
211 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
214 * This returns an object with top, left, width, height, borderLeft,
215 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
216 * pageXOffset, pageYOffset.
218 * The top and left values include the scroll offsets but the
219 * scrollLeft and scrollTop properties of the returned object
220 * are the combined scroll offets of the parent elements
221 * (not including the window scroll offsets). This is not the
222 * same as the element's scrollTop and scrollLeft.
224 * For accurate readings make sure to use pixel values.
228 * @param jQuery refElement The offset returned will be relative to the first matched element.
230 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
233 * This returns an object with top, left, width, height, borderLeft,
234 * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
235 * pageXOffset, pageYOffset.
237 * The top and left values include the scroll offsets but the
238 * scrollLeft and scrollTop properties of the returned object
239 * are the combined scroll offets of the parent elements
240 * (not including the window scroll offsets). This is not the
241 * same as the element's scrollTop and scrollLeft.
243 * For accurate readings make sure to use pixel values.
247 * @param HTMLElement refElement The offset returned will be relative to this element.
249 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
251 jQuery.fn.offset = function(refElem) {
252 if (!this[0]) throw 'jQuery.fn.offset requires an element.';
254 refElem = (refElem) ? jQuery(refElem)[0] : null;
255 var x = 0, y = 0, elm = this[0], parent = this[0], pos = null, borders = [0,0], isElm = true, sl = 0, st = 0;
257 if (parent.tagName == 'BODY' || parent.tagName == 'HTML') {
258 // Safari and IE don't add margin for static and relative
259 if ((jQuery.browser.safari || jQuery.browser.msie) && pos != 'absolute') {
260 x += parseInt(jQuery.css(parent, 'marginLeft')) || 0;
261 y += parseInt(jQuery.css(parent, 'marginTop')) || 0;
266 pos = jQuery.css(parent, 'position');
267 border = [parseInt(jQuery.css(parent, 'borderLeftWidth')) || 0,
268 parseInt(jQuery.css(parent, 'borderTopWidth')) || 0];
269 sl = parent.scrollLeft;
270 st = parent.scrollTop;
272 x += (parent.offsetLeft || 0) + border[0] - sl;
273 y += (parent.offsetTop || 0) + border[1] - st;
275 // Safari and Opera include the border already for parents with position = absolute|relative
276 if ((jQuery.browser.safari || jQuery.browser.opera) && !isElm && (pos == 'absolute' || pos == 'relative')) {
281 parent = parent.offsetParent;
286 var offset = jQuery(refElem).offset();
289 sl = sl - offset.scrollLeft;
290 st = st - offset.scrollTop;
296 width: elm.offsetWidth,
297 height: elm.offsetHeight,
298 borderTop: parseInt(jQuery.css(elm, 'borderTopWidth')) || 0,
299 borderLeft: parseInt(jQuery.css(elm, 'borderLeftWidth')) || 0,
300 marginTop: parseInt(jQuery.css(elm, 'marginTopWidth')) || 0,
301 marginLeft: parseInt(jQuery.css(elm, 'marginLeftWidth')) || 0,
304 pageYOffset: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
305 pageXOffset: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0