added Brandon's offset function
authorPaul Bakaus <paul.bakaus@googlemail.com>
Thu, 5 Oct 2006 07:40:31 +0000 (07:40 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Thu, 5 Oct 2006 07:40:31 +0000 (07:40 +0000)
src/dimensions/dimensions.js

index 6e6e6d6..ce87862 100644 (file)
@@ -171,4 +171,142 @@ $.fn.scrollTop = function() {
                        document.body.scrollTop;
 \r
        return this.get(0).scrollTop;\r
+};\r
+\r
+/* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)\r
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) \r
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.\r
+ */\r
+\r
+/**\r
+ * This returns an object with top, left, width, height, borderLeft,\r
+ * borderTop, marginLeft, marginTop, scrollLeft, scrollTop, \r
+ * pageXOffset, pageYOffset.\r
+ *\r
+ * The top and left values include the scroll offsets but the\r
+ * scrollLeft and scrollTop properties of the returned object\r
+ * are the combined scroll offets of the parent elements \r
+ * (not including the window scroll offsets). This is not the\r
+ * same as the element's scrollTop and scrollLeft.\r
+ * \r
+ * For accurate readings make sure to use pixel values.\r
+ *\r
+ * @name offset        \r
+ * @type Object\r
+ * @cat Dimensions\r
+ * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)\r
+ */\r
+/**\r
+ * This returns an object with top, left, width, height, borderLeft,\r
+ * borderTop, marginLeft, marginTop, scrollLeft, scrollTop, \r
+ * pageXOffset, pageYOffset.\r
+ *\r
+ * The top and left values include the scroll offsets but the\r
+ * scrollLeft and scrollTop properties of the returned object\r
+ * are the combined scroll offets of the parent elements \r
+ * (not including the window scroll offsets). This is not the\r
+ * same as the element's scrollTop and scrollLeft.\r
+ * \r
+ * For accurate readings make sure to use pixel values.\r
+ *\r
+ * @name offset        \r
+ * @type Object\r
+ * @param String refElement This is an expression. The offset returned will be relative to the first matched element.\r
+ * @cat Dimensions\r
+ * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)\r
+ */\r
+/**\r
+ * This returns an object with top, left, width, height, borderLeft,\r
+ * borderTop, marginLeft, marginTop, scrollLeft, scrollTop, \r
+ * pageXOffset, pageYOffset.\r
+ *\r
+ * The top and left values include the scroll offsets but the\r
+ * scrollLeft and scrollTop properties of the returned object\r
+ * are the combined scroll offets of the parent elements \r
+ * (not including the window scroll offsets). This is not the\r
+ * same as the element's scrollTop and scrollLeft.\r
+ * \r
+ * For accurate readings make sure to use pixel values.\r
+ *\r
+ * @name offset        \r
+ * @type Object\r
+ * @param jQuery refElement The offset returned will be relative to the first matched element.\r
+ * @cat Dimensions\r
+ * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)\r
+ */\r
+/**\r
+ * This returns an object with top, left, width, height, borderLeft,\r
+ * borderTop, marginLeft, marginTop, scrollLeft, scrollTop, \r
+ * pageXOffset, pageYOffset.\r
+ *\r
+ * The top and left values include the scroll offsets but the\r
+ * scrollLeft and scrollTop properties of the returned object\r
+ * are the combined scroll offets of the parent elements \r
+ * (not including the window scroll offsets). This is not the\r
+ * same as the element's scrollTop and scrollLeft.\r
+ * \r
+ * For accurate readings make sure to use pixel values.\r
+ *\r
+ * @name offset        \r
+ * @type Object\r
+ * @param HTMLElement refElement The offset returned will be relative to this element.\r
+ * @cat Dimensions\r
+ * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)\r
+ */\r
+$.fn.offset = function(refElem) {\r
+       if (!this[0]) throw '$.fn.offset requires an element.';\r
+       \r
+       refElem = (refElem) ? $(refElem)[0] : null;\r
+       var x = 0, y = 0, elm = this[0], parent = this[0], pos = null, borders = [0,0], isElm = true, sl = 0, st = 0;\r
+       do {\r
+               if (parent.tagName == 'BODY' || parent.tagName == 'HTML') {\r
+                       // Safari and IE don't add margin for static and relative\r
+                       if (($.browser.safari || $.browser.msie) && pos != 'absolute') {\r
+                               x += parseInt($.css(parent, 'marginLeft')) || 0;\r
+                               y += parseInt($.css(parent, 'marginTop'))  || 0;\r
+                       }\r
+                       break;\r
+               }\r
+               \r
+               pos    = $.css(parent, 'position');\r
+               border = [parseInt($.css(parent, 'borderLeftWidth')) || 0,\r
+                                                       parseInt($.css(parent, 'borderTopWidth'))  || 0];\r
+               sl = parent.scrollLeft;\r
+               st = parent.scrollTop;\r
+               \r
+               x += (parent.offsetLeft || 0) + border[0] - sl;\r
+               y += (parent.offsetTop  || 0) + border[1] - st;\r
+               \r
+               // Safari and Opera include the border already for parents with position = absolute|relative\r
+               if (($.browser.safari || $.browser.opera) && !isElm && (pos == 'absolute' || pos == 'relative')) {\r
+                       x -= border[0];\r
+                       y -= border[1];\r
+               }\r
+               \r
+               parent = parent.offsetParent;\r
+               isElm  = false;\r
+       } while(parent);\r
+       \r
+       if (refElem) {\r
+               var offset = $(refElem).offset();\r
+               x  = x  - offset.left;\r
+               y  = y  - offset.top;\r
+               sl = sl - offset.scrollLeft;\r
+               st = st - offset.scrollTop;\r
+       }\r
+       \r
+       return {\r
+               top:  y,\r
+               left: x,\r
+               width:  elm.offsetWidth,\r
+               height: elm.offsetHeight,\r
+               borderTop:  parseInt($.css(elm, 'borderTopWidth'))  || 0,\r
+               borderLeft: parseInt($.css(elm, 'borderLeftWidth')) || 0,\r
+               marginTop:  parseInt($.css(elm, 'marginTopWidth'))  || 0,\r
+               marginLeft: parseInt($.css(elm, 'marginLeftWidth')) || 0,\r
+               scrollTop:  st,\r
+               scrollLeft: sl,\r
+               pageYOffset: window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop  || 0,\r
+               pageXOffset: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0\r
+       };\r
 };
\ No newline at end of file