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 viewport's (window) height\r
  10  *\r
  11  * @example $("#testdiv").height()\r
  12  * @result "200px"
  13  *
  14  * @example $(document).height();
  15  * @result 800
  16  *
  17  * @example $(window).height();
  18  * @result 400\r
  19  * \r
  20  * @name height\r
  21  * @type Object\r
  22  * @cat Dimensions\r
  23  */\r
  24 $.fn.height = function() {\r
  25         if ( this.get(0) == window )
  26                 return self.innerHeight ||
  27                         jQuery.boxModel && document.documentElement.clientHeight ||\r
  28                         document.body.clientHeight;\r
  29         \r
  30         if ( this.get(0) == document )\r
  31                 return Math.max( document.body.scrollHeight, document.body.offsetHeight );\r
  32         \r
  33         return this.css("height");\r
  34 };
  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 viewport's (window) width\r
  40  *\r
  41  * @example $("#testdiv").width()\r
  42  * @result "200px"
  43  *
  44  * @example $(document).width();
  45  * @result 800
  46  *
  47  * @example $(window).width();
  48  * @result 400\r
  49  * \r
  50  * @name width\r
  51  * @type Object\r
  52  * @cat Dimensions\r
  53  */\r
  54 $.fn.width = function() {\r
  55         if ( this.get(0) == window )
  56                 return self.innerWidth ||
  57                         jQuery.boxModel && document.documentElement.clientWidth ||\r
  58                         document.body.clientWidth;\r
  59         \r
  60         if ( this.get(0) == document )\r
  61                 return Math.max( document.body.scrollWidth, document.body.offsetWidth );\r
  62         \r
  63         return this.css("width");\r
  64 };
  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 viewport's (window) height\r
  70  *\r
  71  * @example $("#testdiv").innerHeight()\r
  72  * @result 800\r
  73  * \r
  74  * @name innerHeight\r
  75  * @type Number\r
  76  * @cat Dimensions\r
  77  */\r
  78 $.fn.innerHeight = function() {\r
  79         return this.get(0) == window || this.get(0) == document ?
  80                 this.height() :
  81                 this.get(0).offsetHeight - parseInt(this.css("borderTop") || 0) - parseInt(this.css("borderBottom") || 0);\r
  82 };
  83 \r
  84 /**\r
  85  * Returns the inner width value (without border) for the first matched element.\r
  86  * If used on document, returns the document's Width (innerWidth)\r
  87  * If used on window, returns the viewport's (window) width\r
  88  *\r
  89  * @example $("#testdiv").innerWidth()\r
  90  * @result 1000\r
  91  * \r
  92  * @name innerWidth\r
  93  * @type Number\r
  94  * @cat Dimensions\r
  95  */\r
  96 $.fn.innerWidth = function() {\r
  97         return this.get(0) == window || this.get(0) == document ?
  98                 this.width() :
  99                 this.get(0).offsetWidth - parseInt(this.css("borderLeft") || 0) - parseInt(this.css("borderRight") || 0);\r
 100 };
 101 \r
 102 /**\r
 103  * Returns the outer height value (including border) for the first matched element.\r
 104  * Cannot be used on document or window.\r
 105  *\r
 106  * @example $("#testdiv").outerHeight()\r
 107  * @result 1000\r
 108  * \r
 109  * @name outerHeight\r
 110  * @type Number\r
 111  * @cat Dimensions\r
 112  */\r
 113 $.fn.outerHeight = function() {\r
 114         return this.get(0) == window || this.get(0) == document ?
 115                 this.height() :
 116                 this.get(0).offsetHeight;       \r
 117 };
 118 \r
 119 /**\r
 120  * Returns the outer width value (including border) for the first matched element.\r
 121  * Cannot be used on document or window.\r
 122  *\r
 123  * @example $("#testdiv").outerWidth()\r
 124  * @result 1000\r
 125  * \r
 126  * @name outerWidth\r
 127  * @type Number\r
 128  * @cat Dimensions\r
 129  */\r
 130 $.fn.outerWidth = function() {\r
 131         return this.get(0) == window || this.get(0) == document ?
 132                 this.width() :
 133                 this.get(0).offsetWidth;        \r
 134 };
 135 \r
 136 /**\r
 137  * Returns how many pixels the user has scrolled to the right (scrollLeft).\r
 138  * Works on containers with overflow: auto and window/document.\r
 139  *\r
 140  * @example $("#testdiv").scrollLeft()\r
 141  * @result 100\r
 142  * \r
 143  * @name scrollLeft\r
 144  * @type Number\r
 145  * @cat Dimensions\r
 146  */\r
 147 $.fn.scrollLeft = function() {\r
 148         if ( this.get(0) == window || this.get(0) == document )
 149                 return self.pageXOffset ||
 150                         jQuery.boxModel && document.documentElement.scrollLeft ||
 151                         document.body.scrollLeft;
 152         \r
 153         return this.get(0).scrollLeft;\r
 154 };
 155 \r
 156 /**\r
 157  * Returns how many pixels the user has scrolled to the bottom (scrollTop).\r
 158  * Works on containers with overflow: auto and window/document.\r
 159  *\r
 160  * @example $("#testdiv").scrollTop()\r
 161  * @result 100\r
 162  * \r
 163  * @name scrollTop\r
 164  * @type Number\r
 165  * @cat Dimensions\r
 166  */\r
 167 $.fn.scrollTop = function() {\r
 168         if ( this.get(0) == window || this.get(0) == document )
 169                 return self.pageYOffset ||
 170                         jQuery.boxModel && document.documentElement.scrollTop ||
 171                         document.body.scrollTop;
 172 \r
 173         return this.get(0).scrollTop;\r
 174 };