[jQuery] Incorrect work position and offset
html 1:
<body>
<div>
<table>
<tr>
<td>
<div id="pos"></div>
<div id="id1" style="position:absolute;">test</div>
</td>
</tr>
</table>
</div>
</body>
html 2:
<body>
<div id="pos" style="position:absolute;">
<div id="id1" style="position:absolute;">test</div>
</div>
</body>
When I try to make this:
var el = $("$pos"), pos = el.position();
$("$id1").css( { left : pos.left + 'px', top : pos.top + el.outerHeight
() + 'px' } );
for html1 everything OK... for html2 #id1 was positioned from #pos use
left and top from body
trying to use "offset":
var el = $("$pos"), pos = el.offset();
$("$id1").css( { left : pos.left + 'px', top : pos.top + el.outerHeight
() + 'px' } );
for html1 work not proper (have error 11px ???)... for html2
everything OK
I'll try to use own function:
jQuery.fn.positionedOffset = function() {
var offsetParent = this.offsetParent(), offset = this.offset(),
position = this.position();
if ( !/^body|html$/i.test( offsetParent[ 0 ].tagName ) ) {
return { left : position.left, top : position.top, from :
offsetParent }
} else {
return { left : offset.left, top : offset.top, from : offsetParent }
}
}
work fine on both cases.