src/dimensions/dimensions.js

   1 /** \r
   2  * This plugin overrides jQuery's height() and width() functions and\r
   3  * adds more handy stuff for cross-browser compatibility.\r
   4  */\r
   5 \r
   6 /**\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
  10  *\r
  11  * @example $("#testdiv").height()\r
  12  * @result [ 200px ]\r
  13  * \r
  14  * @name height\r
  15  * @type jQuery\r
  16  * @cat Dimensions\r
  17  */\r
  18 $.fn.height = function() {\r
  19 \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
  24         }\r
  25         \r
  26         if(this.get(0) == document) {\r
  27 \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
  32         }\r
  33         \r
  34         return this.css("height");\r
  35 }\r
  36 /**\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
  40  *\r
  41  * @example $("#testdiv").width()\r
  42  * @result [ 200px ]\r
  43  * \r
  44  * @name width\r
  45  * @type jQuery\r
  46  * @cat Dimensions\r
  47  */\r
  48 $.fn.width = function() {\r
  49 \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
  54         }\r
  55         \r
  56         if(this.get(0) == document) {\r
  57 \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
  62         }\r
  63         \r
  64         return this.css("width");\r
  65 }\r
  66 /**\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
  70  *\r
  71  * @example $("#testdiv").innerHeight()\r
  72  * @result [ 800px ]\r
  73  * \r
  74  * @name innerHeight\r
  75  * @type jQuery\r
  76  * @cat Dimensions\r
  77  */\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
  81 }\r
  82 /**\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
  86  *\r
  87  * @example $("#testdiv").innerWidth()\r
  88  * @result [ 1000px ]\r
  89  * \r
  90  * @name innerWidth\r
  91  * @type jQuery\r
  92  * @cat Dimensions\r
  93  */\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
  97 }\r
  98 /**\r
  99  * Returns the outer height value (including border) for the first matched element.\r
 100  * Cannot be used on document or window.\r
 101  *\r
 102  * @example $("#testdiv").outerHeight()\r
 103  * @result [ 1000px ]\r
 104  * \r
 105  * @name outerHeight\r
 106  * @type jQuery\r
 107  * @cat Dimensions\r
 108  */\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
 112 }\r
 113 /**\r
 114  * Returns the outer width value (including border) for the first matched element.\r
 115  * Cannot be used on document or window.\r
 116  *\r
 117  * @example $("#testdiv").outerWidth()\r
 118  * @result [ 1000px ]\r
 119  * \r
 120  * @name outerWidth\r
 121  * @type jQuery\r
 122  * @cat Dimensions\r
 123  */\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
 127 }\r
 128 /**\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
 131  *\r
 132  * @example $("#testdiv").scrollLeft()\r
 133  * @result [ 100px ]\r
 134  * \r
 135  * @name scrollLeft\r
 136  * @type jQuery\r
 137  * @cat Dimensions\r
 138  */\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
 144         }\r
 145         return this.get(0).scrollLeft;\r
 146 }\r
 147 /**\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
 150  *\r
 151  * @example $("#testdiv").scrollTop()\r
 152  * @result [ 100px ]\r
 153  * \r
 154  * @name scrollTop\r
 155  * @type jQuery\r
 156  * @cat Dimensions\r
 157  */\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
 163         }       \r
 164         return this.get(0).scrollTop;\r
 165 }