From 514aef10d785165704d49f780fc6fe20eb4ec690 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Fri, 8 Sep 2006 09:37:29 +0000 Subject: [PATCH] initial version of the new cross-browser compatible dimensions plugin, which replaces height() and width() and adds other convenient stuff. --- src/dimensions/dimensions.js | 165 +++++++++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 src/dimensions/dimensions.js diff --git a/src/dimensions/dimensions.js b/src/dimensions/dimensions.js new file mode 100644 index 00000000..cc248202 --- /dev/null +++ b/src/dimensions/dimensions.js @@ -0,0 +1,165 @@ +/** + * This plugin overrides jQuery's height() and width() functions and + * adds more handy stuff for cross-browser compatibility. + */ + +/** + * Returns the css height value for the first matched element. + * If used on document, returns the document's height (innerHeight) + * If used on window, returns the viewports (window's) height + * + * @example $("#testdiv").height() + * @result [ 200px ] + * + * @name height + * @type jQuery + * @cat Dimensions + */ +$.fn.height = function() { + + if(this.get(0) == window) { + if (self.innerHeight) return self.innerHeight; + else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight; + else if (document.body) return document.body.clientHeight; + } + + if(this.get(0) == document) { + + var test1 = document.body.scrollHeight; + var test2 = document.body.offsetHeight; + if (test1 > test2) return document.body.scrollHeight; + else return document.body.offsetHeight; + } + + return this.css("height"); +} +/** + * Returns the css width value for the first matched element. + * If used on document, returns the document's width (innerWidth) + * If used on window, returns the viewports (window's) width + * + * @example $("#testdiv").width() + * @result [ 200px ] + * + * @name width + * @type jQuery + * @cat Dimensions + */ +$.fn.width = function() { + + if(this.get(0) == window) { + if (self.innerWidth) return self.innerWidth; + else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; + else if (document.body) return document.body.clientWidth; + } + + if(this.get(0) == document) { + + var test1 = document.body.scrollWidth; + var test2 = document.body.offsetWidth; + if (test1 > test2) return document.body.scrollWidth; + else return document.body.offsetWidth; + } + + return this.css("width"); +} +/** + * 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 viewports (window's) height + * + * @example $("#testdiv").innerHeight() + * @result [ 800px ] + * + * @name innerHeight + * @type jQuery + * @cat Dimensions + */ +$.fn.innerHeight = function() { + if(this.get(0) == window || this.get(0) == document) return this.height(); + return this.get(0).offsetHeight - (parseInt(this.css("borderTop")) + parseInt(this.css("borderBottom"))); +} +/** + * 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 viewports (window's) width + * + * @example $("#testdiv").innerWidth() + * @result [ 1000px ] + * + * @name innerWidth + * @type jQuery + * @cat Dimensions + */ +$.fn.innerWidth = function() { + if(this.get(0) == window || this.get(0) == document) return this.width(); + return this.get(0).offsetWidth - (parseInt(this.css("borderLeft")) + parseInt(this.css("borderRight"))); +} +/** + * Returns the outer height value (including border) for the first matched element. + * Cannot be used on document or window. + * + * @example $("#testdiv").outerHeight() + * @result [ 1000px ] + * + * @name outerHeight + * @type jQuery + * @cat Dimensions + */ +$.fn.outerHeight = function() { + if(this.get(0) == window || this.get(0) == document) return 0; + return this.get(0).offsetHeight; +} +/** + * Returns the outer width value (including border) for the first matched element. + * Cannot be used on document or window. + * + * @example $("#testdiv").outerWidth() + * @result [ 1000px ] + * + * @name outerWidth + * @type jQuery + * @cat Dimensions + */ +$.fn.outerWidth = function() { + if(this.get(0) == window || this.get(0) == document) return 0; + return this.get(0).offsetWidth; +} +/** + * 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 [ 100px ] + * + * @name scrollLeft + * @type jQuery + * @cat Dimensions + */ +$.fn.scrollLeft = function() { + if(this.get(0) == window || this.get(0) == document) { + if (self.pageXOffset) return self.pageXOffset; + else if (document.documentElement && document.documentElement.scrollLeft) return document.documentElement.scrollLeft; + else if (document.body) return document.body.scrollLeft; + } + return this.get(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 [ 100px ] + * + * @name scrollTop + * @type jQuery + * @cat Dimensions + */ +$.fn.scrollTop = function() { + if(this.get(0) == window || this.get(0) == document) { + if (self.pageYOffset) return self.pageYOffset; + else if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; + else if (document.body) return document.body.scrollTop; + } + return this.get(0).scrollTop; +} \ No newline at end of file