/* Copyright (c) 2007 Paul Bakaus (paul.bakaus@googlemail.com) and Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * $LastChangedDate: 2007-06-22 04:38:37 +0200 (Fr, 22 Jun 2007) $ * $Rev: 2141 $ * * Version: 1.0b2 */ (function($){ // store a copy of the core height and width methods var height = $.fn.height, width = $.fn.width; $.fn.extend({ /** * If used on document, returns the document's height (innerHeight) * If used on window, returns the viewport's (window) height * See core docs on height() to see what happens when used on an element. * * @example $("#testdiv").height() * @result 200 * * @example $(document).height() * @result 800 * * @example $(window).height() * @result 400 * * @name height * @type Object * @cat Plugins/Dimensions */ height: function() { if ( this[0] == window ) return self.innerHeight || $.boxModel && document.documentElement.clientHeight || document.body.clientHeight; if ( this[0] == document ) return Math.max( document.body.scrollHeight, document.body.offsetHeight ); return height.apply(this, arguments); }, /** * If used on document, returns the document's width (innerWidth) * If used on window, returns the viewport's (window) width * See core docs on height() to see what happens when used on an element. * * @example $("#testdiv").width() * @result 200 * * @example $(document).width() * @result 800 * * @example $(window).width() * @result 400 * * @name width * @type Object * @cat Plugins/Dimensions */ width: function() { if ( this[0] == window ) return self.innerWidth || $.boxModel && document.documentElement.clientWidth || document.body.clientWidth; if ( this[0] == document ) return Math.max( document.body.scrollWidth, document.body.offsetWidth ); return width.apply(this, arguments); }, /** * Returns the inner height value (without border) for the first matched element. * If used on document, returns the document's height (innerHeight) * If used on window, returns the viewport's (window) height * * @example $("#testdiv").innerHeight() * @result 800 * * @name innerHeight * @type Number * @cat Plugins/Dimensions */ innerHeight: function() { return this[0] == window || this[0] == document ? this.height() : this.is(':visible') ? this[0].offsetHeight - num(this, 'borderTopWidth') - num(this, 'borderBottomWidth') : this.height() + num(this, 'paddingTop') + num(this, 'paddingBottom'); }, /** * Returns the inner width value (without border) for the first matched element. * If used on document, returns the document's Width (innerWidth) * If used on window, returns the viewport's (window) width * * @example $("#testdiv").innerWidth() * @result 1000 * * @name innerWidth * @type Number * @cat Plugins/Dimensions */ innerWidth: function() { return this[0] == window || this[0] == document ? this.width() : this.is(':visible') ? this[0].offsetWidth - num(this, 'borderLeftWidth') - num(this, 'borderRightWidth') : this.width() + num(this, 'paddingLeft') + num(this, 'paddingRight'); }, /** * Returns the outer height value (including border) for the first matched element. * Cannot be used on document or window. * * @example $("#testdiv").outerHeight() * @result 1000 * * @name outerHeight * @type Number * @cat Plugins/Dimensions */ outerHeight: function() { return this[0] == window || this[0] == document ? this.height() : this.is(':visible') ? this[0].offsetHeight : this.height() + num(this,'borderTopWidth') + num(this, 'borderBottomWidth') + num(this, 'paddingTop') + num(this, 'paddingBottom'); }, /** * Returns the outer width value (including border) for the first matched element. * Cannot be used on document or window. * * @example $("#testdiv").outerHeight() * @result 1000 * * @name outerHeight * @type Number * @cat Plugins/Dimensions */ outerWidth: function() { return this[0] == window || this[0] == document ? this.width() : this.is(':visible') ? this[0].offsetWidth : this.width() + num(this, 'borderLeftWidth') + num(this, 'borderRightWidth') + num(this, 'paddingLeft') + num(this, 'paddingRight'); }, /** * Returns how many pixels the user has scrolled to the right (scrollLeft). * Works on containers with overflow: auto and window/document. * * @example $("#testdiv").scrollLeft() * @result 100 * * @name scrollLeft * @type Number * @cat Plugins/Dimensions */ /** * Sets the scrollLeft property and continues the chain. * Works on containers with overflow: auto and window/document. * * @example $("#testdiv").scrollLeft(10).scrollLeft() * @result 10 * * @name scrollLeft * @param Number value A positive number representing the desired scrollLeft. * @type jQuery * @cat Plugins/Dimensions */ scrollLeft: function(val) { if ( val != undefined ) // set the scroll left return this.each(function() { if (this == window || this == document) window.scrollTo( val, $(window).scrollTop() ); else this.scrollLeft = val; }); // return the scroll left offest in pixels if ( this[0] == window || this[0] == document ) return self.pageXOffset || $.boxModel && document.documentElement.scrollLeft || document.body.scrollLeft; return this[0].scrollLeft; }, /** * Returns how many pixels the user has scrolled to the bottom (scrollTop). * Works on containers with overflow: auto and window/document. * * @example $("#testdiv").scrollTop() * @result 100 * * @name scrollTop * @type Number * @cat Plugins/Dimensions */ /** * Sets the scrollTop property and continues the chain. * Works on containers with overflow: auto and window/document. * * @example $("#testdiv").scrollTop(10).scrollTop() * @result 10 * * @name scrollTop * @param Number value A positive number representing the desired scrollTop. * @type jQuery * @cat Plugins/Dimensions */ scrollTop: function(val) { if ( val != undefined ) // set the scroll top return this.each(function() { if (this == window || this == document) window.scrollTo( $(window).scrollLeft(), val ); else this.scrollTop = val; }); // return the scroll top offset in pixels if ( this[0] == window || this[0] == document ) return self.pageYOffset || $.boxModel && document.documentElement.scrollTop || document.body.scrollTop; return this[0].scrollTop; }, /** * Returns the top and left positioned offset in pixels. * The positioned offset is the offset between a positioned * parent and the element itself. * * @example $("#testdiv").position() * @result { top: 100, left: 100 } * * @name position * @param Map options Optional settings to configure the way the offset is calculated. * @option Boolean margin Should the margin of the element be included in the calculations? False by default. * @option Boolean border Should the border of the element be included in the calculations? False by default. * @option Boolean padding Should the padding of the element be included in the calculations? False by default. * @param Object returnObject An object to store the return value in, so as not to break the chain. If passed in the * chain will not be broken and the result will be assigned to this object. * @type Object * @cat Plugins/Dimensions */ position: function(options, returnObject) { var elem = this[0], parent = elem.parentNode, op = elem.offsetParent, options = $.extend({ margin: false, border: false, padding: false, scroll: false }, options || {}), x = elem.offsetLeft, y = elem.offsetTop, sl = elem.scrollLeft, st = elem.scrollTop; // Mozilla and IE do not add the border if ($.browser.mozilla || $.browser.msie) { // add borders to offset x += num(elem, 'borderLeftWidth'); y += num(elem, 'borderTopWidth'); } if ($.browser.mozilla) { do { // Mozilla does not add the border for a parent that has overflow set to anything but visible if ($.browser.mozilla && parent != elem && $.css(parent, 'overflow') != 'visible') { x += num(parent, 'borderLeftWidth'); y += num(parent, 'borderTopWidth'); } if (parent == op) break; // break if we are already at the offestParent } while ((parent = parent.parentNode) && (parent.tagName.toLowerCase() != 'body' || parent.tagName.toLowerCase() != 'html')); } var returnValue = handleOffsetReturn(elem, options, x, y, sl, st); if (returnObject) { $.extend(returnObject, returnValue); return this; } else { return returnValue; } }, /** * Returns the location of the element in pixels from the top left corner of the viewport. * * For accurate readings make sure to use pixel values for margins, borders and padding. * * Known issues: * - Issue: A div positioned relative or static without any content before it and its parent will report an offsetTop of 0 in Safari * Workaround: Place content before the relative div ... and set height and width to 0 and overflow to hidden * * @example $("#testdiv").offset() * @result { top: 100, left: 100, scrollTop: 10, scrollLeft: 10 } * * @example $("#testdiv").offset({ scroll: false }) * @result { top: 90, left: 90 } * * @example var offset = {} * $("#testdiv").offset({ scroll: false }, offset) * @result offset = { top: 90, left: 90 } * * @name offset * @param Map options Optional settings to configure the way the offset is calculated. * @option Boolean margin Should the margin of the element be included in the calculations? True by default. * @option Boolean border Should the border of the element be included in the calculations? False by default. * @option Boolean padding Should the padding of the element be included in the calculations? False by default. * @option Boolean scroll Should the scroll offsets of the parent elements be included in the calculations? True by default. * When true it adds the totla scroll offets of all parents to the total offset and also adds two properties * to the returned object, scrollTop and scrollLeft. * @options Boolean lite Will use offsetLite instead of offset when set to true. False by default. * @param Object returnObject An object to store the return value in, so as not to break the chain. If passed in the * chain will not be broken and the result will be assigned to this object. * @type Object * @cat Plugins/Dimensions */ offset: function(options, returnObject) { var x = 0, y = 0, sl = 0, st = 0, elem = this[0], parent = this[0], op, parPos, elemPos = $.css(elem, 'position'), mo = $.browser.mozilla, ie = $.browser.msie, sf = $.browser.safari, oa = $.browser.opera, absparent = false, relparent = false, options = $.extend({ margin: true, border: false, padding: false, scroll: true, lite: false }, options || {}); // Use offsetLite if lite option is true if (options.lite) return this.offsetLite(options, returnObject); if (elem.tagName.toLowerCase() == 'body') { // Safari is the only one to get offsetLeft and offsetTop properties of the body "correct" // Except they all mess up when the body is positioned absolute or relative x = elem.offsetLeft; y = elem.offsetTop; // Mozilla ignores margin and subtracts border from body element if (mo) { x += num(elem, 'marginLeft') + (num(elem, 'borderLeftWidth')*2); y += num(elem, 'marginTop') + (num(elem, 'borderTopWidth') *2); } else // Opera ignores margin if (oa) { x += num(elem, 'marginLeft'); y += num(elem, 'marginTop'); } else // IE does not add the border in Standards Mode if (ie && jQuery.boxModel) { x += num(elem, 'borderLeftWidth'); y += num(elem, 'borderTopWidth'); } } else { do { parPos = $.css(parent, 'position'); x += parent.offsetLeft; y += parent.offsetTop; // Mozilla and IE do not add the border if (mo || ie) { // add borders to offset x += num(parent, 'borderLeftWidth'); y += num(parent, 'borderTopWidth'); // Mozilla does not include the border on body if an element isn't positioned absolute and is without an absolute parent if (mo && parPos == 'absolute') absparent = true; // IE does not include the border on the body if an element is position static and without an absolute or relative parent if (ie && parPos == 'relative') relparent = true; } op = parent.offsetParent; if (options.scroll || mo) { do { if (options.scroll) { // get scroll offsets sl += parent.scrollLeft; st += parent.scrollTop; } // Mozilla does not add the border for a parent that has overflow set to anything but visible if (mo && parent != elem && $.css(parent, 'overflow') != 'visible') { x += num(parent, 'borderLeftWidth'); y += num(parent, 'borderTopWidth'); } parent = parent.parentNode; } while (parent != op); } parent = op; if (parent.tagName.toLowerCase() == 'body' || parent.tagName.toLowerCase() == 'html') { // Safari and IE Standards Mode doesn't add the body margin for elments positioned with static or relative if ((sf || (ie && $.boxModel)) && elemPos != 'absolute' && elemPos != 'fixed') { x += num(parent, 'marginLeft'); y += num(parent, 'marginTop'); } // Mozilla does not include the border on body if an element isn't positioned absolute and is without an absolute parent // IE does not include the border on the body if an element is positioned static and without an absolute or relative parent if ( (mo && !absparent && elemPos != 'fixed') || (ie && elemPos == 'static' && !relparent) ) { x += num(parent, 'borderLeftWidth'); y += num(parent, 'borderTopWidth'); } break; // Exit the loop } } while (parent); } var returnValue = handleOffsetReturn(elem, options, x, y, sl, st); if (returnObject) { $.extend(returnObject, returnValue); return this; } else { return returnValue; } }, /** * Returns the location of the element in pixels from the top left corner of the viewport. * This method is much faster than offset but not as accurate. This method can be invoked * by setting the lite option to true in the offset method. * * @name offsetLite * @param Map options Optional settings to configure the way the offset is calculated. * @option Boolean margin Should the margin of the element be included in the calculations? True by default. * @option Boolean border Should the border of the element be included in the calculations? False by default. * @option Boolean padding Should the padding of the element be included in the calculations? False by default. * @option Boolean scroll Should the scroll offsets of the parent elements be included in the calculations? True by default. * When true it adds the totla scroll offets of all parents to the total offset and also adds two properties * to the returned object, scrollTop and scrollLeft. * @param Object returnObject An object to store the return value in, so as not to break the chain. If passed in the * chain will not be broken and the result will be assigned to this object. * @type Object * @cat Plugins/Dimensions */ offsetLite: function(options, returnObject) { var x = 0, y = 0, sl = 0, st = 0, parent = this[0], op, options = $.extend({ margin: true, border: false, padding: false, scroll: true }, options || {}); do { x += parent.offsetLeft; y += parent.offsetTop; op = parent.offsetParent; if (options.scroll) { // get scroll offsets do { sl += parent.scrollLeft; st += parent.scrollTop; parent = parent.parentNode; } while(parent != op); } parent = op; } while (parent && parent.tagName.toLowerCase() != 'body' && parent.tagName.toLowerCase() != 'html'); var returnValue = handleOffsetReturn(this[0], options, x, y, sl, st); if (returnObject) { $.extend(returnObject, returnValue); return this; } else { return returnValue; } } }); /** * Handles converting a CSS Style into an Integer. * @private */ var num = function(el, prop) { return parseInt($.css(el.jquery?el[0]:el,prop))||0; }; /** * Handles the return value of the offset and offsetLite methods. * @private */ var handleOffsetReturn = function(elem, options, x, y, sl, st) { if ( !options.margin ) { x -= num(elem, 'marginLeft'); y -= num(elem, 'marginTop'); } // Safari and Opera do not add the border for the element if ( options.border && ($.browser.safari || $.browser.opera) ) { x += num(elem, 'borderLeftWidth'); y += num(elem, 'borderTopWidth'); } else if ( !options.border && !($.browser.safari || $.browser.opera) ) { x -= num(elem, 'borderLeftWidth'); y -= num(elem, 'borderTopWidth'); } if ( options.padding ) { x += num(elem, 'paddingLeft'); y += num(elem, 'paddingTop'); } // do not include scroll offset on the element if ( options.scroll ) { sl -= elem.scrollLeft; st -= elem.scrollTop; } return options.scroll ? { top: y - st, left: x - sl, scrollTop: st, scrollLeft: sl } : { top: y, left: x }; }; })(jQuery);