jQuery position problem with Chrome
When I alert the value .开发者_JS百科position().left, it returns 0 on Chrome. With other browsers it returns the actual number. Why does this happen?
Webkit based browsers (like Chrome and Safari) can access images width and height properties only after images have been fully loaded. Other browsers can access this information as soon as just the DOM is loaded (they don't need to load the images entirely to know their size).
So, if you have images in your page, with Webkit based browsers you should access offset information after the $(window).load event fires, and not after the $(document).ready event.
By reading comments from http://api.jquery.com/position/, there are several ways to fix this. The one I found working is
Ajaho [Moderator] :This plugin function fixes problems with wrong position in Chrome
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
Webkit can be too fast sometimes, but it's often taken care of in jQuery. You can debug using something like:
var v, elem = $('.myElement');
window.setTimeout(function() {
v = elem.position().left;
console.log(v);
if (v) {
return false;
}
window.setTimeout(arguments.callee, 1);
}, 1);
This will check if and when the position is available. If you are logging "0" in infinity, the position().left is "never" available and you need to debug elsewhere.
I had the same problem..
I fixed it using: .offset().left instead. But be aware that are not the same:
http://api.jquery.com/offset/
.position().left worked in Chrome in some tests I did, using
a similar approach than David (the value was available since the
first try).
In my "real" application failed even
reading the position on click event (which may eliminate any loading
speed problem).
Some comments (in other forum) say it may be related
to the use of display:inline-block. However I couldn't
reproduce the problem using inline-block. So it may
be other thing.
Perhaps a bit outdated since the questions dates from 2010 but this did the trick for my positioning problems in Chrome:
$(window).load(function(){
p = $('element').offset();
// et cetera
});
use jQuery(window).load() instead of jQuery(document).ready()
For me it worked by placing the javascript code in a document ready just before the closing of the body tag
That way it executes the code after it has loaded everything
<body>
<div>content</div>
<div class='footer'>footer</div>
.
.
.
<script type='text/javascript>
$(document).ready(function(){
var footer_position = $(".footer").offset().top;
console.log(footer_position);
});
</script>
</body>
I use this function to correct it.
function getElementPosition(id) {
var offsetTrail = document.getElementById(id);
var offsetBottom = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetBottom += offsetTrail.offsetBottom;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {
bottom: offsetBottom,
toppos: offsetTop
};
}
加载中,请稍侯......
精彩评论