2 * This plugin overrides jQuery's height() and width() functions and
\r
3 * adds more handy stuff for cross-browser compatibility.
\r
7 * Returns the css height value for the first matched element.
\r
8 * If used on document, returns the document's height (innerHeight)
\r
9 * If used on window, returns the viewports (window's) height
\r
11 * @example $("#testdiv").height()
\r
18 $.fn.height = function() {
\r
20 if(this.get(0) == window) {
\r
21 if (self.innerHeight) return self.innerHeight;
\r
22 else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
\r
23 else if (document.body) return document.body.clientHeight;
\r
26 if(this.get(0) == document) {
\r
28 var test1 = document.body.scrollHeight;
\r
29 var test2 = document.body.offsetHeight;
\r
30 if (test1 > test2) return document.body.scrollHeight;
\r
31 else return document.body.offsetHeight;
\r
34 return this.css("height");
\r
37 * Returns the css width value for the first matched element.
\r
38 * If used on document, returns the document's width (innerWidth)
\r
39 * If used on window, returns the viewports (window's) width
\r
41 * @example $("#testdiv").width()
\r
48 $.fn.width = function() {
\r
50 if(this.get(0) == window) {
\r
51 if (self.innerWidth) return self.innerWidth;
\r
52 else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
\r
53 else if (document.body) return document.body.clientWidth;
\r
56 if(this.get(0) == document) {
\r
58 var test1 = document.body.scrollWidth;
\r
59 var test2 = document.body.offsetWidth;
\r
60 if (test1 > test2) return document.body.scrollWidth;
\r
61 else return document.body.offsetWidth;
\r
64 return this.css("width");
\r
67 * Returns the inner height value (without border) for the first matched element.
\r
68 * If used on document, returns the document's height (innerHeight)
\r
69 * If used on window, returns the viewports (window's) height
\r
71 * @example $("#testdiv").innerHeight()
\r
78 $.fn.innerHeight = function() {
\r
79 if(this.get(0) == window || this.get(0) == document) return this.height();
\r
80 return this.get(0).offsetHeight - (parseInt(this.css("borderTop")) + parseInt(this.css("borderBottom")));
\r
83 * Returns the inner width value (without border) for the first matched element.
\r
84 * If used on document, returns the document's Width (innerWidth)
\r
85 * If used on window, returns the viewports (window's) width
\r
87 * @example $("#testdiv").innerWidth()
\r
88 * @result [ 1000px ]
\r
94 $.fn.innerWidth = function() {
\r
95 if(this.get(0) == window || this.get(0) == document) return this.width();
\r
96 return this.get(0).offsetWidth - (parseInt(this.css("borderLeft")) + parseInt(this.css("borderRight")));
\r
99 * Returns the outer height value (including border) for the first matched element.
\r
100 * Cannot be used on document or window.
\r
102 * @example $("#testdiv").outerHeight()
\r
103 * @result [ 1000px ]
\r
105 * @name outerHeight
\r
109 $.fn.outerHeight = function() {
\r
110 if(this.get(0) == window || this.get(0) == document) return 0;
\r
111 return this.get(0).offsetHeight;
\r
114 * Returns the outer width value (including border) for the first matched element.
\r
115 * Cannot be used on document or window.
\r
117 * @example $("#testdiv").outerWidth()
\r
118 * @result [ 1000px ]
\r
124 $.fn.outerWidth = function() {
\r
125 if(this.get(0) == window || this.get(0) == document) return 0;
\r
126 return this.get(0).offsetWidth;
\r
129 * Returns how many pixels the user has scrolled to the right (scrollLeft).
\r
130 * Works on containers with overflow: auto and window/document.
\r
132 * @example $("#testdiv").scrollLeft()
\r
133 * @result [ 100px ]
\r
139 $.fn.scrollLeft = function() {
\r
140 if(this.get(0) == window || this.get(0) == document) {
\r
141 if (self.pageXOffset) return self.pageXOffset;
\r
142 else if (document.documentElement && document.documentElement.scrollLeft) return document.documentElement.scrollLeft;
\r
143 else if (document.body) return document.body.scrollLeft;
\r
145 return this.get(0).scrollLeft;
\r
148 * Returns how many pixels the user has scrolled to the bottom (scrollTop).
\r
149 * Works on containers with overflow: auto and window/document.
\r
151 * @example $("#testdiv").scrollTop()
\r
152 * @result [ 100px ]
\r
158 $.fn.scrollTop = function() {
\r
159 if(this.get(0) == window || this.get(0) == document) {
\r
160 if (self.pageYOffset) return self.pageYOffset;
\r
161 else if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
\r
162 else if (document.body) return document.body.scrollTop;
\r
164 return this.get(0).scrollTop;
\r