JQuery offset() return negative value with CSS3 column? -
i newbie of jquery. want top offset of particular element. use following method:
var top = $("img").offset().top;
however, returns negative value. can't understand why return negative value? smallest value should zero, or wrong?
p.s. use css3 column break in html file.
thanks lot!!!
edit: body of html file:
<div id="chapter-0"> <div> <h1 xml:lang="en-us" id="toc-anchor">main title</h1> <h2 xml:lang="en-us" id="toc-anchor-1">subtitle 1</h2> <p xml:lang="zh-hk"> text</p> <p xml:lang="zh-hk"> text</p> <h2 xml:lang="en-us" id="toc-anchor-2">subtitle2</h2> <p xml:lang="zh-hk"> text</p> <p xml:lang="zh-hk"> text</p> <h2 xml:lang="en-us" id="toc-anchor-3">subtitle3</h2> <p xml:lang="zh-hk"> text</p> <p xml:lang="zh-hk"> text</p> </div> <div> <img src="images/table-01_fmt.jpeg" alt="table-01.indd"> </div> </div>
the code have used detecting height of image:
$(\"img\").each(function(i) { var top = $(this).offset().top; alert(top); }
it easy if post html part img
, css applied it.
edit:
i checked code posted, , had syntax errors in jquery part, after correcting them tried both in firefox , google chrome, works fine.
so can please try following html file , see? difference double-quotes , adding closing bracket missing in jquery code.
this works in chrome.
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function () { $("img").each(function(i) { var top = $(this).offset().top; alert(top); }); }); </script> </head> <body> <div id="chapter-0"> <div> <h1 xml:lang="en-us" id="toc-anchor">main title</h1> <h2 xml:lang="en-us" id="toc-anchor-1">subtitle 1</h2> <p xml:lang="zh-hk"> text</p> <p xml:lang="zh-hk"> text</p> <h2 xml:lang="en-us" id="toc-anchor-2">subtitle2</h2> <p xml:lang="zh-hk"> text</p> <p xml:lang="zh-hk"> text</p> <h2 xml:lang="en-us" id="toc-anchor-3">subtitle3</h2> <p xml:lang="zh-hk"> text</p> <p xml:lang="zh-hk"> text</p> </div> <div> <img src="images/table-01_fmt.jpeg" alt="table-01.indd" /> </div> </div> </body> </html>
Comments
Post a Comment