diff options
author | Patrick Simianer <p@simianer.de> | 2010-08-17 15:33:02 +0200 |
---|---|---|
committer | Patrick Simianer <p@simianer.de> | 2010-08-17 15:33:02 +0200 |
commit | c272506529ea5fde9352a600417b2eaa6a230a6a (patch) | |
tree | ee8c1fe112151538803aaf639345834713709c98 /javascripts/lib/jquery.dimensions.js | |
parent | cba313f165096685b025eac23d0f4f6e372d8556 (diff) |
release
Diffstat (limited to 'javascripts/lib/jquery.dimensions.js')
-rw-r--r-- | javascripts/lib/jquery.dimensions.js | 504 |
1 files changed, 504 insertions, 0 deletions
diff --git a/javascripts/lib/jquery.dimensions.js b/javascripts/lib/jquery.dimensions.js new file mode 100644 index 0000000..2934714 --- /dev/null +++ b/javascripts/lib/jquery.dimensions.js @@ -0,0 +1,504 @@ +/* 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);
\ No newline at end of file |