CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steven Lu
Steven Lu

Reputation: 43427

jQuery.offset() on <body> element provides incorrect "top" value

FIDDLE IS HERE (logs to console)

The situation is when the page starts out with a <H1> that has a margin-top greater than the margin found on <body>.

This causes the <body> to be pushed lower in the page yet $('body').offset().top remains set to the <body>'s margin-top. This of course causes my debug element (which highlights the position of elements) to be incorrect since the body's dummy element is now in the wrong position.

Curiously the rest of the $(elem).offset() values are correct for any descendant of <body>.

Is there a fix for this short of manually checking the margin-top of the recursively first childs of body with a while loop?

Noticing the issue on Safari 6 though I suspect I'll find it on Chrome as well.

Upvotes: 2

Views: 5928

Answers (4)

Steven Lu
Steven Lu

Reputation: 43427

jQuery 1.9.0 has addressed this issue. Thanks so much, jQuery is awesome.

Upvotes: 1

teynon
teynon

Reputation: 8288

It might work to use the offset plus the difference of the height of the html element minus the body element.

console.log("body.offset().top = "+ ($('html').offset().top + $('html').height() - $('body').height()));

Update: This solution will only work if there is not a margin-bottom on the page.

You could additionally add a clear div at the bottom of the page.

$('body').append("<div style=\"clear: all;\">&nbsp;</div>");

Note that the div must have content to work.

http://jsfiddle.net/SCGdZ/7/

Upvotes: 2

ameya rote
ameya rote

Reputation: 1114

Find Here

a[0].style.marginTop it remains uninitialized even after declaring it in css that's why it was returning nothing.

Therefore we must take care of initializing a[0].style.marginTop

Upvotes: 0

Steven Lu
Steven Lu

Reputation: 43427

I found a John Resig post about how fast and awesome getBoundingClientRect is here... I wonder why it is not used for jQuery's offset()!

I shall use this method instead and hopefully it will not suffer from this same issue.

Update: Looks good! (the non integer top value is due to the somehow having style -webkit-margin-before: 0.67em;)

You can see that the body has margin=8

enter image description here

Upvotes: 1

Related Questions