diff options
| -rw-r--r-- | src/offset.js | 20 | ||||
| -rw-r--r-- | test/data/offset/fixed.html | 32 | ||||
| -rw-r--r-- | test/data/offset/scroll.html | 38 | ||||
| -rw-r--r-- | test/data/offset/static.html | 28 | ||||
| -rw-r--r-- | test/data/offset/table.html | 42 | ||||
| -rw-r--r-- | test/unit/offset.js | 64 |
6 files changed, 209 insertions, 15 deletions
diff --git a/src/offset.js b/src/offset.js index e74556cd2..257035816 100644 --- a/src/offset.js +++ b/src/offset.js @@ -5,7 +5,7 @@ jQuery.fn.offset = function() { var left = 0, top = 0, elem = this[0], results; if ( elem ) with ( jQuery.browser ) { - var parent = elem.parentNode, + var parent = elem.parentNode, offsetChild = elem, offsetParent = elem.offsetParent, doc = elem.ownerDocument, @@ -17,10 +17,8 @@ jQuery.fn.offset = function() { var box = elem.getBoundingClientRect(); // Add the document scroll offsets - add( - box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft), - box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop) - ); + add(box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft), + box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop)); // IE adds the HTML element's border, by default it is medium which is 2px // IE 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; } @@ -35,7 +33,7 @@ jQuery.fn.offset = function() { // Initial element offsets add( elem.offsetLeft, elem.offsetTop ); - + // Get parent offsets while ( offsetParent ) { // Add offsetParent offsets @@ -58,8 +56,8 @@ jQuery.fn.offset = function() { // Get parent scroll offsets while ( parent.tagName && !/^body|html$/i.test(parent.tagName) ) { - // Remove parent scroll UNLESS that parent is inline or a table-row to work around Opera inline/table scrollLeft/Top bug - if ( !/^inline|table-row.*$/i.test(jQuery.css(parent, "display")) ) + // Remove parent scroll UNLESS that parent is inline or a table to work around Opera inline/table scrollLeft/Top bug + if ( !/^inline|table.*$/i.test(jQuery.css(parent, "display")) ) // Subtract parent scroll offsets add( -parent.scrollLeft, -parent.scrollTop ); @@ -79,10 +77,8 @@ jQuery.fn.offset = function() { // Add the document scroll offsets if position is fixed if ( fixed ) - add( - Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft), - Math.max(doc.documentElement.scrollTop, doc.body.scrollTop) - ); + add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft), + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop)); } // Return an object with top and left properties diff --git a/test/data/offset/fixed.html b/test/data/offset/fixed.html new file mode 100644 index 000000000..15855763b --- /dev/null +++ b/test/data/offset/fixed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> + <head> + <meta http-equiv="Content-type" content="text/html; charset=utf-8"> + <title>fixed</title> + <style type="text/css" media="screen"> + body { margin: 1px; padding: 5px; } + div.fixed { position: fixed; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; } + #fixed-1 { top: 0; left: 0; } + #fixed-2 { top: 20px; left: 20px; } + #forceScroll { width: 5000px; height: 5000px; } + #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; } + </style> + <script type="text/javascript" src="../../../dist/jquery.js"></script> + <script type="text/javascript" charset="utf-8"> + $(function() { + window.scrollTo(1000,1000); + $('.fixed').click(function() { + $('#marker').css( $(this).offset() ); + return false; + }); + }); + </script> + </head> + <body> + <div id="fixed-1" class="fixed"></div> + <div id="fixed-2" class="fixed"></div> + <div id="forceScroll"></div> + <div id="marker"></div> + </body> +</html>
\ No newline at end of file diff --git a/test/data/offset/scroll.html b/test/data/offset/scroll.html new file mode 100644 index 000000000..fa21e6b9f --- /dev/null +++ b/test/data/offset/scroll.html @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> + <head> + <meta http-equiv="Content-type" content="text/html; charset=utf-8"> + <title>scroll</title> + <style type="text/css" media="screen"> + body { margin: 1px; padding: 5px; } + div.scroll { position: relative; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: auto; } + #scroll-1 { top: 0; left: 0; } + #scroll-1-1 { top: 1px; left: 1px; } + #scroll-1-1-1 { top: 1px; left: 1px; } + #forceScroll { width: 5000px; height: 5000px; } + #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; } + </style> + <script type="text/javascript" src="../../../dist/jquery.js"></script> + <script type="text/javascript" charset="utf-8"> + $(function() { + window.scrollTo(1000,1000); + $('#scroll-1')[0].scrollLeft = 5; + $('#scroll-1')[0].scrollTop = 5; + $('.scroll').click(function() { + $('#marker').css( $(this).offset() ); + return false; + }); + }); + </script> + </head> + <body> + <div id="scroll-1" class="scroll"> + <div id="scroll-1-1" class="scroll"> + <div id="scroll-1-1-1" class="scroll"></div> + </div> + </div> + <div id="forceScroll"></div> + <div id="marker"></div> + </body> +</html>
\ No newline at end of file diff --git a/test/data/offset/static.html b/test/data/offset/static.html new file mode 100644 index 000000000..a18469e1f --- /dev/null +++ b/test/data/offset/static.html @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> + <head> + <meta http-equiv="Content-type" content="text/html; charset=utf-8"> + <title>static</title> + <style type="text/css" media="screen"> + body { margin: 1px; padding: 5px; } + div.static { position: static; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; } + #static-2 { top: 20px; left: 20px; } + #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; } + </style> + <script type="text/javascript" src="../../../dist/jquery.js"></script> + <script type="text/javascript" charset="utf-8"> + $(function() { + $('.static').click(function() { + $('#marker').css( $(this).offset() ); + return false; + }); + }); + </script> + </head> + <body> + <div id="static-1" class="static"><div id="static-1-1" class="static"><div id="static-1-1-1" class="static"></div></div></div> + <div id="static-2" class="static"></div> + <div id="marker"></div> + </body> +</html>
\ No newline at end of file diff --git a/test/data/offset/table.html b/test/data/offset/table.html new file mode 100644 index 000000000..f10b76d5d --- /dev/null +++ b/test/data/offset/table.html @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> + <head> + <meta http-equiv="Content-type" content="text/html; charset=utf-8"> + <title>table</title> + <style type="text/css" media="screen"> + body { margin: 1px; padding: 5px; } + table { border: 2px solid #000; } + th, td { border: 1px solid #000; width: 100px; height: 100px; } + #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; } + </style> + <script type="text/javascript" src="../../../dist/jquery.js"></script> + <script type="text/javascript" charset="utf-8"> + $(function() { + $('table, th, td').click(function() { + $('#marker').css( $(this).offset() ); + return false; + }); + }); + </script> + </head> + <body> + <table id="table-1"> + <thead> + <tr valign="top"> + <th id="th-1">th-1</th> + <th id="th-2">th-2</th> + <th id="th-3">th-3</th> + </tr> + </thead> + <tbody> + <tr valign="top"> + <td id="td-1">td-1</td> + <td id="td-2">td-2</td> + <td id="td-3">td-3</td> + </tr> + </tbody> + </table> + <div id="marker"></div> + </body> +</html>
\ No newline at end of file diff --git a/test/unit/offset.js b/test/unit/offset.js index 857e0898e..328442ac1 100644 --- a/test/unit/offset.js +++ b/test/unit/offset.js @@ -41,14 +41,72 @@ testwin("absolute", function() { testwin("relative", function() { var $w = testwin["relative"].$; - equals( $w('#relative-1').offset().top, jQuery.browser.msie ? 6 : 7, "$('#relative-1').offset().top" ); + equals( $w('#relative-1').offset().top, $.browser.msie ? 6 : 7, "$('#relative-1').offset().top" ); equals( $w('#relative-1').offset().left, 7, "$('#relative-1').offset().left" ); - equals( $w('#relative-1-1').offset().top, jQuery.browser.msie ? 13 : 15, "$('#relative-1-1').offset().top" ); + equals( $w('#relative-1-1').offset().top, $.browser.msie ? 13 : 15, "$('#relative-1-1').offset().top" ); equals( $w('#relative-1-1').offset().left, 15, "$('#relative-1-1').offset().left" ); - equals( $w('#relative-2').offset().top, jQuery.browser.msie ? 141 : 142, "$('#relative-2').offset().top" ); + equals( $w('#relative-2').offset().top, $.browser.msie ? 141 : 142, "$('#relative-2').offset().top" ); equals( $w('#relative-2').offset().left, 27, "$('#relative-2').offset().left" ); testwin["relative"].close(); +}); + +testwin("static", function() { + var $w = testwin["static"].$; + + equals( $w('#static-1').offset().top, $.browser.msie ? 6 : 7, "$('#static-1').offset().top" ); + equals( $w('#static-1').offset().left, 7, "$('#static-1').offset().left" ); + + equals( $w('#static-1-1').offset().top, $.browser.msie ? 13 : 15, "$('#static-1-1').offset().top" ); + equals( $w('#static-1-1').offset().left, 15, "$('#static-1-1').offset().left" ); + + equals( $w('#static-1-1-1').offset().top, $.browser.msie ? 20 : 23, "$('#static-1-1-1').offset().top" ); + equals( $w('#static-1-1-1').offset().left, 23, "$('#static-1-1-1').offset().left" ); + + equals( $w('#static-2').offset().top, $.browser.msie ? 121 : 122, "$('#static-2').offset().top" ); + equals( $w('#static-2').offset().left, 7, "$('#static-2').offset().left" ); + + testwin["static"].close(); +}); + +if ( !$.browser.msie || ($.browser.msie && parseInt($.browser.version) > 6) ) + testwin("fixed", function() { + var $w = testwin["fixed"].$; + + equals( $w('#fixed-1').offset().top, 1001, "$('#fixed-1').offset().top" ); + equals( $w('#fixed-1').offset().left, $.browser.msie ? 994 : 1001, "$('#fixed-1').offset().left" ); + + equals( $w('#fixed-2').offset().top, 1021, "$('#fixed-2').offset().top" ); + equals( $w('#fixed-2').offset().left, $.browser.msie ? 1014 : 1021, "$('#fixed-2').offset().left" ); + + testwin["fixed"].close(); + }); + +testwin("table", function() { + var $w = testwin["table"].$; + + equals( $w('#table-1').offset().top, 6, "$('#table-1').offset().top" ); + equals( $w('#table-1').offset().left, 6, "$('#table-1').offset().left" ); + + equals( $w('#th-1').offset().top, 10, "$('#table-1').offset().top" ); + equals( $w('#th-1').offset().left, 10, "$('#table-1').offset().left" ); + + equals( $w('#th-2').offset().top, 10, "$('#table-1').offset().top" ); + equals( $w('#th-2').offset().left, 116, "$('#table-1').offset().left" ); + + testwin["table"].close(); +}); + +testwin("scroll", function() { + var $w = testwin["scroll"].$; + + equals( $w('#scroll-1').offset().top, $.browser.msie ? 6 : 7, "$('#scroll-1').offset().top" ); + equals( $w('#scroll-1').offset().left, 7, "$('#scroll-1').offset().left" ); + + equals( $w('#scroll-1-1').offset().top, $.browser.msie ? 9 : 11, "$('#scroll-1-1').offset().top" ); + equals( $w('#scroll-1-1').offset().left, 11, "$('#scroll-1-1').offset().left" ); + + testwin["scroll"].close(); });
\ No newline at end of file |