Relative positioning with jQuery?

Question

JavaScript

Help position elements relative to each other, taking into account scrolling in different browsers.

Made an additional block when hovering the mouse. Here is a piece of code responsible for calculating the position of the new block on the page:

...<br/>
<br/>
var mytop = image.offset().top - (container.height() /2) + image.height()/2 + $(document).scrollTop();<br/>
var myleft = image.offset().left - (container.width() /2 ) + image.width()/2 + $(document).scrollLeft();<br/>
<br/>
if($.browser.msie){<br/>
 mytop = image.offset().top - (container.height() /2) + image.height()/2;<br/>
 myleft = image.offset().left - (container.width() /2 ) + image.width()/2;<br/>
}<br/>
<br/>
container.offset({top: mytop, left: myleft});<br/>
container.show();<br/>
<br/>
...<br/>

Those. we look at the coordinates of the current element, and if the browser is IE, then we add the height / width of the scroll.

Just yesterday, either Chrom was updated, or jQuery (loads the latest from the Google CDN), but Chrome began to add scroll (maybe it appears to IE). Maybe there is a way to position an element without writing all versions of "buggy" browsers?

Answer 1

In jQuery, everything is fine, the interpretation of chrome has changed, now it does not compensate for scrolling.

Answer 2

Is it common chrome or innovations in webkit?

Answer 3

Try using (with appropriate modifications) the $(…).position() method instead of the $(…).offset() method , if the conditions of the problem allow it.