* Fixed a bug in jQuery.fn.offset relating to the calculation of scroll offsets.

* Fixed jQuery.fn.height and jQuery.fn.width to properly pass on a value for setting the height and width of an element if passed in.
This commit is contained in:
Brandon Aaron 2006-10-10 02:41:44 +00:00
parent dbee06de85
commit 016bd18ba3

View File

@ -1,307 +1,312 @@
/** /**
* This plugin overrides jQuery's height() and width() functions and * This plugin overrides jQuery's height() and width() functions and
* adds more handy stuff for cross-browser compatibility. * adds more handy stuff for cross-browser compatibility.
*/ */
/** /**
* Returns the css height value for the first matched element. * Returns the css height value for the first matched element.
* If used on document, returns the document's height (innerHeight) * If used on document, returns the document's height (innerHeight)
* If used on window, returns the viewport's (window) height * If used on window, returns the viewport's (window) height
* *
* @example $("#testdiv").height() * @example $("#testdiv").height()
* @result "200px" * @result "200px"
* *
* @example $(document).height(); * @example $(document).height();
* @result 800 * @result 800
* *
* @example $(window).height(); * @example $(window).height();
* @result 400 * @result 400
* *
* @name height * @name height
* @type Object * @type Object
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.height = function() { jQuery.fn.height = function() {
if ( this.get(0) == window ) if ( this.get(0) == window )
return self.innerHeight || return self.innerHeight ||
jQuery.boxModel && document.documentElement.clientHeight || jQuery.boxModel && document.documentElement.clientHeight ||
document.body.clientHeight; document.body.clientHeight;
if ( this.get(0) == document ) if ( this.get(0) == document )
return Math.max( document.body.scrollHeight, document.body.offsetHeight ); return Math.max( document.body.scrollHeight, document.body.offsetHeight );
return this.css("height"); return this.css("height", arguments[0]);
}; };
/** /**
* Returns the css width value for the first matched element. * Returns the css width value for the first matched element.
* If used on document, returns the document's width (innerWidth) * If used on document, returns the document's width (innerWidth)
* If used on window, returns the viewport's (window) width * If used on window, returns the viewport's (window) width
* *
* @example $("#testdiv").width() * @example $("#testdiv").width()
* @result "200px" * @result "200px"
* *
* @example $(document).width(); * @example $(document).width();
* @result 800 * @result 800
* *
* @example $(window).width(); * @example $(window).width();
* @result 400 * @result 400
* *
* @name width * @name width
* @type Object * @type Object
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.width = function() { jQuery.fn.width = function() {
if ( this.get(0) == window ) if ( this.get(0) == window )
return self.innerWidth || return self.innerWidth ||
jQuery.boxModel && document.documentElement.clientWidth || jQuery.boxModel && document.documentElement.clientWidth ||
document.body.clientWidth; document.body.clientWidth;
if ( this.get(0) == document ) if ( this.get(0) == document )
return Math.max( document.body.scrollWidth, document.body.offsetWidth ); return Math.max( document.body.scrollWidth, document.body.offsetWidth );
return this.css("width"); return this.css("width", arguments[0]);
}; };
/** /**
* Returns the inner height value (without border) for the first matched element. * 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 document, returns the document's height (innerHeight)
* If used on window, returns the viewport's (window) height * If used on window, returns the viewport's (window) height
* *
* @example $("#testdiv").innerHeight() * @example $("#testdiv").innerHeight()
* @result 800 * @result 800
* *
* @name innerHeight * @name innerHeight
* @type Number * @type Number
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.innerHeight = function() { jQuery.fn.innerHeight = function() {
return this.get(0) == window || this.get(0) == document ? return this.get(0) == window || this.get(0) == document ?
this.height() : this.height() :
this.get(0).offsetHeight - parseInt(this.css("borderTop") || 0) - parseInt(this.css("borderBottom") || 0); this.get(0).offsetHeight - parseInt(this.css("borderTop") || 0) - parseInt(this.css("borderBottom") || 0);
}; };
/** /**
* Returns the inner width value (without border) for the first matched element. * 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 document, returns the document's Width (innerWidth)
* If used on window, returns the viewport's (window) width * If used on window, returns the viewport's (window) width
* *
* @example $("#testdiv").innerWidth() * @example $("#testdiv").innerWidth()
* @result 1000 * @result 1000
* *
* @name innerWidth * @name innerWidth
* @type Number * @type Number
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.innerWidth = function() { jQuery.fn.innerWidth = function() {
return this.get(0) == window || this.get(0) == document ? return this.get(0) == window || this.get(0) == document ?
this.width() : this.width() :
this.get(0).offsetWidth - parseInt(this.css("borderLeft") || 0) - parseInt(this.css("borderRight") || 0); this.get(0).offsetWidth - parseInt(this.css("borderLeft") || 0) - parseInt(this.css("borderRight") || 0);
}; };
/** /**
* Returns the outer height value (including border) for the first matched element. * Returns the outer height value (including border) for the first matched element.
* Cannot be used on document or window. * Cannot be used on document or window.
* *
* @example $("#testdiv").outerHeight() * @example $("#testdiv").outerHeight()
* @result 1000 * @result 1000
* *
* @name outerHeight * @name outerHeight
* @type Number * @type Number
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.outerHeight = function() { jQuery.fn.outerHeight = function() {
return this.get(0) == window || this.get(0) == document ? return this.get(0) == window || this.get(0) == document ?
this.height() : this.height() :
this.get(0).offsetHeight; this.get(0).offsetHeight;
}; };
/** /**
* Returns the outer width value (including border) for the first matched element. * Returns the outer width value (including border) for the first matched element.
* Cannot be used on document or window. * Cannot be used on document or window.
* *
* @example $("#testdiv").outerWidth() * @example $("#testdiv").outerWidth()
* @result 1000 * @result 1000
* *
* @name outerWidth * @name outerWidth
* @type Number * @type Number
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.outerWidth = function() { jQuery.fn.outerWidth = function() {
return this.get(0) == window || this.get(0) == document ? return this.get(0) == window || this.get(0) == document ?
this.width() : this.width() :
this.get(0).offsetWidth; this.get(0).offsetWidth;
}; };
/** /**
* Returns how many pixels the user has scrolled to the right (scrollLeft). * Returns how many pixels the user has scrolled to the right (scrollLeft).
* Works on containers with overflow: auto and window/document. * Works on containers with overflow: auto and window/document.
* *
* @example $("#testdiv").scrollLeft() * @example $("#testdiv").scrollLeft()
* @result 100 * @result 100
* *
* @name scrollLeft * @name scrollLeft
* @type Number * @type Number
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.scrollLeft = function() { jQuery.fn.scrollLeft = function() {
if ( this.get(0) == window || this.get(0) == document ) if ( this.get(0) == window || this.get(0) == document )
return self.pageXOffset || return self.pageXOffset ||
jQuery.boxModel && document.documentElement.scrollLeft || jQuery.boxModel && document.documentElement.scrollLeft ||
document.body.scrollLeft; document.body.scrollLeft;
return this.get(0).scrollLeft; return this.get(0).scrollLeft;
}; };
/** /**
* Returns how many pixels the user has scrolled to the bottom (scrollTop). * Returns how many pixels the user has scrolled to the bottom (scrollTop).
* Works on containers with overflow: auto and window/document. * Works on containers with overflow: auto and window/document.
* *
* @example $("#testdiv").scrollTop() * @example $("#testdiv").scrollTop()
* @result 100 * @result 100
* *
* @name scrollTop * @name scrollTop
* @type Number * @type Number
* @cat Dimensions * @cat Dimensions
*/ */
jQuery.fn.scrollTop = function() { jQuery.fn.scrollTop = function() {
if ( this.get(0) == window || this.get(0) == document ) if ( this.get(0) == window || this.get(0) == document )
return self.pageYOffset || return self.pageYOffset ||
jQuery.boxModel && document.documentElement.scrollTop || jQuery.boxModel && document.documentElement.scrollTop ||
document.body.scrollTop; document.body.scrollTop;
return this.get(0).scrollTop; return this.get(0).scrollTop;
}; };
/** /**
* This returns an object with top, left, width, height, borderLeft, * This returns an object with top, left, width, height, borderLeft,
* borderTop, marginLeft, marginTop, scrollLeft, scrollTop, * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
* pageXOffset, pageYOffset. * pageXOffset, pageYOffset.
* *
* The top and left values include the scroll offsets but the * The top and left values include the scroll offsets but the
* scrollLeft and scrollTop properties of the returned object * scrollLeft and scrollTop properties of the returned object
* are the combined scroll offets of the parent elements * are the combined scroll offets of the parent elements
* (not including the window scroll offsets). This is not the * (not including the window scroll offsets). This is not the
* same as the element's scrollTop and scrollLeft. * same as the element's scrollTop and scrollLeft.
* *
* For accurate readings make sure to use pixel values. * For accurate readings make sure to use pixel values.
* *
* @name offset * @name offset
* @type Object * @type Object
* @cat Dimensions * @cat Dimensions
* @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
*/ */
/** /**
* This returns an object with top, left, width, height, borderLeft, * This returns an object with top, left, width, height, borderLeft,
* borderTop, marginLeft, marginTop, scrollLeft, scrollTop, * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
* pageXOffset, pageYOffset. * pageXOffset, pageYOffset.
* *
* The top and left values include the scroll offsets but the * The top and left values include the scroll offsets but the
* scrollLeft and scrollTop properties of the returned object * scrollLeft and scrollTop properties of the returned object
* are the combined scroll offets of the parent elements * are the combined scroll offets of the parent elements
* (not including the window scroll offsets). This is not the * (not including the window scroll offsets). This is not the
* same as the element's scrollTop and scrollLeft. * same as the element's scrollTop and scrollLeft.
* *
* For accurate readings make sure to use pixel values. * For accurate readings make sure to use pixel values.
* *
* @name offset * @name offset
* @type Object * @type Object
* @param String refElement This is an expression. The offset returned will be relative to the first matched element. * @param String refElement This is an expression. The offset returned will be relative to the first matched element.
* @cat Dimensions * @cat Dimensions
* @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
*/ */
/** /**
* This returns an object with top, left, width, height, borderLeft, * This returns an object with top, left, width, height, borderLeft,
* borderTop, marginLeft, marginTop, scrollLeft, scrollTop, * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
* pageXOffset, pageYOffset. * pageXOffset, pageYOffset.
* *
* The top and left values include the scroll offsets but the * The top and left values include the scroll offsets but the
* scrollLeft and scrollTop properties of the returned object * scrollLeft and scrollTop properties of the returned object
* are the combined scroll offets of the parent elements * are the combined scroll offets of the parent elements
* (not including the window scroll offsets). This is not the * (not including the window scroll offsets). This is not the
* same as the element's scrollTop and scrollLeft. * same as the element's scrollTop and scrollLeft.
* *
* For accurate readings make sure to use pixel values. * For accurate readings make sure to use pixel values.
* *
* @name offset * @name offset
* @type Object * @type Object
* @param jQuery refElement The offset returned will be relative to the first matched element. * @param jQuery refElement The offset returned will be relative to the first matched element.
* @cat Dimensions * @cat Dimensions
* @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
*/ */
/** /**
* This returns an object with top, left, width, height, borderLeft, * This returns an object with top, left, width, height, borderLeft,
* borderTop, marginLeft, marginTop, scrollLeft, scrollTop, * borderTop, marginLeft, marginTop, scrollLeft, scrollTop,
* pageXOffset, pageYOffset. * pageXOffset, pageYOffset.
* *
* The top and left values include the scroll offsets but the * The top and left values include the scroll offsets but the
* scrollLeft and scrollTop properties of the returned object * scrollLeft and scrollTop properties of the returned object
* are the combined scroll offets of the parent elements * are the combined scroll offets of the parent elements
* (not including the window scroll offsets). This is not the * (not including the window scroll offsets). This is not the
* same as the element's scrollTop and scrollLeft. * same as the element's scrollTop and scrollLeft.
* *
* For accurate readings make sure to use pixel values. * For accurate readings make sure to use pixel values.
* *
* @name offset * @name offset
* @type Object * @type Object
* @param HTMLElement refElement The offset returned will be relative to this element. * @param HTMLElement refElement The offset returned will be relative to this element.
* @cat Dimensions * @cat Dimensions
* @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
*/ */
jQuery.fn.offset = function(refElem) { jQuery.fn.offset = function(refElem) {
if (!this[0]) throw 'jQuery.fn.offset requires an element.'; if (!this[0]) throw 'jQuery.fn.offset requires an element.';
refElem = (refElem) ? jQuery(refElem)[0] : null; refElem = (refElem) ? jQuery(refElem)[0] : null;
var x = 0, y = 0, elm = this[0], parent = this[0], pos = null, borders = [0,0], isElm = true, sl = 0, st = 0; var x = 0, y = 0, elem = this[0], parent = this[0], sl = 0, st = 0;
do { do {
if (parent.tagName == 'BODY' || parent.tagName == 'HTML') { if (parent.tagName == 'BODY' || parent.tagName == 'HTML') {
// Safari and IE don't add margin for static and relative // Safari and IE don't add margin for static and relative
if ((jQuery.browser.safari || jQuery.browser.msie) && pos != 'absolute') { if ((jQuery.browser.safari || jQuery.browser.msie) && jQuery.css(parent, 'position') != 'absolute') {
x += parseInt(jQuery.css(parent, 'marginLeft')) || 0; x += parseInt(jQuery.css(parent, 'marginLeft')) || 0;
y += parseInt(jQuery.css(parent, 'marginTop')) || 0; y += parseInt(jQuery.css(parent, 'marginTop')) || 0;
} }
break; break;
} }
pos = jQuery.css(parent, 'position'); x += parent.offsetLeft || 0;
border = [parseInt(jQuery.css(parent, 'borderLeftWidth')) || 0, y += parent.offsetTop || 0;
parseInt(jQuery.css(parent, 'borderTopWidth')) || 0];
sl = parent.scrollLeft; // Mozilla and IE do not add the border
st = parent.scrollTop; if (jQuery.browser.mozilla || jQuery.browser.msie) {
x += parseInt(jQuery.css(parent, 'borderLeftWidth')) || 0;
x += (parent.offsetLeft || 0) + border[0] - sl; y += parseInt(jQuery.css(parent, 'borderTopWidth')) || 0;
y += (parent.offsetTop || 0) + border[1] - st; }
// Safari and Opera include the border already for parents with position = absolute|relative // Need to get scroll offsets in-between offsetParents
if ((jQuery.browser.safari || jQuery.browser.opera) && !isElm && (pos == 'absolute' || pos == 'relative')) { var op = parent.offsetParent;
x -= border[0]; do {
y -= border[1]; sl += parent.scrollLeft || 0;
} st += parent.scrollTop || 0;
parent = parent.parentNode;
parent = parent.offsetParent; } while (parent != op);
isElm = false; } while (parent);
} while(parent);
if (refElem) { // Get the relative offset
if (refElem) { var offset = jQuery(refElem).offset();
var offset = jQuery(refElem).offset(); x = x - offset.left;
x = x - offset.left; y = y - offset.top;
y = y - offset.top; sl = sl - offset.scrollLeft;
sl = sl - offset.scrollLeft; st = st - offset.scrollTop;
st = st - offset.scrollTop; }
}
// Safari and Opera do not add the border for the element
return { if (jQuery.browser.safari || jQuery.browser.opera) {
top: y, x += parseInt(jQuery.css(elem, 'borderLeftWidth')) || 0;
left: x, y += parseInt(jQuery.css(elem, 'borderTopWidth')) || 0;
width: elm.offsetWidth, }
height: elm.offsetHeight,
borderTop: parseInt(jQuery.css(elm, 'borderTopWidth')) || 0, return {
borderLeft: parseInt(jQuery.css(elm, 'borderLeftWidth')) || 0, top: y - st,
marginTop: parseInt(jQuery.css(elm, 'marginTopWidth')) || 0, left: x - sl,
marginLeft: parseInt(jQuery.css(elm, 'marginLeftWidth')) || 0, width: elem.offsetWidth,
scrollTop: st, height: elem.offsetHeight,
scrollLeft: sl, borderTop: parseInt(jQuery.css(elem, 'borderTopWidth')) || 0,
pageYOffset: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, borderLeft: parseInt(jQuery.css(elem, 'borderLeftWidth')) || 0,
pageXOffset: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 marginTop: parseInt(jQuery.css(elem, 'marginTopWidth')) || 0,
}; marginLeft: parseInt(jQuery.css(elem, 'marginLeftWidth')) || 0,
scrollTop: st,
scrollLeft: sl,
pageYOffset: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
pageXOffset: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}; };