initial version of the new cross-browser compatible dimensions plugin, which replaces...

diff --git a/src/dimensions/dimensions.js b/src/dimensions/dimensions.js
new file mode 100644 (file)
index 0000000..cc24820
--- /dev/null
+++ b/src/dimensions/dimensions.js
@@ -0,0 +1,165 @@
+/** \r
+ * This plugin overrides jQuery's height() and width() functions and\r
+ * adds more handy stuff for cross-browser compatibility.\r
+ */\r
+\r
+/**\r
+ * Returns the css height value for the first matched element.\r
+ * If used on document, returns the document's height (innerHeight)\r
+ * If used on window, returns the viewports (window's) height\r
+ *\r
+ * @example $("#testdiv").height()\r
+ * @result [ 200px ]\r
+ * \r
+ * @name height\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.height = function() {\r
+\r
+       if(this.get(0) == window) {\r
+               if (self.innerHeight) return self.innerHeight;  \r
+               else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;\r
+               else if (document.body) return document.body.clientHeight;\r
+       }\r
+       \r
+       if(this.get(0) == document) {\r
+\r
+               var test1 = document.body.scrollHeight;\r
+               var test2 = document.body.offsetHeight;\r
+               if (test1 > test2) return document.body.scrollHeight;\r
+               else return document.body.offsetHeight;         \r
+       }\r
+       \r
+       return this.css("height");\r
+}\r
+/**\r
+ * Returns the css width value for the first matched element.\r
+ * If used on document, returns the document's width (innerWidth)\r
+ * If used on window, returns the viewports (window's) width\r
+ *\r
+ * @example $("#testdiv").width()\r
+ * @result [ 200px ]\r
+ * \r
+ * @name width\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.width = function() {\r
+\r
+       if(this.get(0) == window) {\r
+               if (self.innerWidth) return self.innerWidth;    \r
+               else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;\r
+               else if (document.body) return document.body.clientWidth;\r
+       }\r
+       \r
+       if(this.get(0) == document) {\r
+\r
+               var test1 = document.body.scrollWidth;\r
+               var test2 = document.body.offsetWidth;\r
+               if (test1 > test2) return document.body.scrollWidth;\r
+               else return document.body.offsetWidth;          \r
+       }\r
+       \r
+       return this.css("width");\r
+}\r
+/**\r
+ * Returns the inner height value (without border) for the first matched element.\r
+ * If used on document, returns the document's height (innerHeight)\r
+ * If used on window, returns the viewports (window's) height\r
+ *\r
+ * @example $("#testdiv").innerHeight()\r
+ * @result [ 800px ]\r
+ * \r
+ * @name innerHeight\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.innerHeight = function() {\r
+       if(this.get(0) == window || this.get(0) == document) return this.height();\r
+       return this.get(0).offsetHeight - (parseInt(this.css("borderTop")) + parseInt(this.css("borderBottom")));\r
+}\r
+/**\r
+ * Returns the inner width value (without border) for the first matched element.\r
+ * If used on document, returns the document's Width (innerWidth)\r
+ * If used on window, returns the viewports (window's) width\r
+ *\r
+ * @example $("#testdiv").innerWidth()\r
+ * @result [ 1000px ]\r
+ * \r
+ * @name innerWidth\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.innerWidth = function() {\r
+       if(this.get(0) == window || this.get(0) == document) return this.width();\r
+       return this.get(0).offsetWidth - (parseInt(this.css("borderLeft")) + parseInt(this.css("borderRight")));\r
+}\r
+/**\r
+ * Returns the outer height value (including border) for the first matched element.\r
+ * Cannot be used on document or window.\r
+ *\r
+ * @example $("#testdiv").outerHeight()\r
+ * @result [ 1000px ]\r
+ * \r
+ * @name outerHeight\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.outerHeight = function() {\r
+       if(this.get(0) == window || this.get(0) == document) return 0;\r
+       return this.get(0).offsetHeight;        \r
+}\r
+/**\r
+ * Returns the outer width value (including border) for the first matched element.\r
+ * Cannot be used on document or window.\r
+ *\r
+ * @example $("#testdiv").outerWidth()\r
+ * @result [ 1000px ]\r
+ * \r
+ * @name outerWidth\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.outerWidth = function() {\r
+       if(this.get(0) == window || this.get(0) == document) return 0;\r
+       return this.get(0).offsetWidth; \r
+}\r
+/**\r
+ * Returns how many pixels the user has scrolled to the right (scrollLeft).\r
+ * Works on containers with overflow: auto and window/document.\r
+ *\r
+ * @example $("#testdiv").scrollLeft()\r
+ * @result [ 100px ]\r
+ * \r
+ * @name scrollLeft\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.scrollLeft = function() {\r
+       if(this.get(0) == window || this.get(0) == document) {\r
+       if (self.pageXOffset) return self.pageXOffset;\r
+       else if (document.documentElement && document.documentElement.scrollLeft) return document.documentElement.scrollLeft;\r
+       else if (document.body) return document.body.scrollLeft;\r
+       }\r
+       return this.get(0).scrollLeft;\r
+}\r
+/**\r
+ * Returns how many pixels the user has scrolled to the bottom (scrollTop).\r
+ * Works on containers with overflow: auto and window/document.\r
+ *\r
+ * @example $("#testdiv").scrollTop()\r
+ * @result [ 100px ]\r
+ * \r
+ * @name scrollTop\r
+ * @type jQuery\r
+ * @cat Dimensions\r
+ */\r
+$.fn.scrollTop = function() {\r
+       if(this.get(0) == window || this.get(0) == document) {\r
+       if (self.pageYOffset) return self.pageYOffset;\r
+       else if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;\r
+       else if (document.body) return document.body.scrollTop;\r
+       }       \r
+       return this.get(0).scrollTop;\r
+}
\ No newline at end of file