Faults in jQuery measuring height at great numbers?

54 views Asked by At

I've 'solved' the problem I have encountered, yet it's still quite strange and the solution is hacky. On my site I've got pages that are sometimes a few thousands of pixels large, such as http://rodelynx.nl/judas-priest-redeemer-of-souls-missen-we-k-k-downing/ I'm setting elements to be a part of the total height of the document. But when the document is really large there appear to be some faults in the calculation.

This is the relevant code:

var bodyH = $(document).height(), 
    headerH = $('header').outerHeight(),
    footerH = $('footer').outerHeight(),
    zptH = 220,
    linksBalkenNweH = bodyH - (headerH + footerH + zptH);
    rechtsNweH = bodyH - (headerH + footerH);


if ((bodyH - (headerH + footerH)) > 1810) {
    $('.linksBalkenBuiten').height(linksBalkenNweH);
    $('.linksBalkenMiddenRechts').height(linksBalkenNweH);  
    $('.balkenRechts').find('img').height(rechtsNweH);
} 

So if all were well the bottoms of the relevant elements should be aligned. But that is not the case; the bottoms of the adapted elements are aligned but not to a element called tagNav, which is solved in this hacky way (also messing up design).

var zptPos = $('[title="Zoek per Tag"]').position().top,
    tagNavPos = $('.tagNav').position().top;

if (zptPos != tagNavPos) {
    $('.tagNav').css({'margin-top': '' + zptPos - tagNavPos + 'px'});
}

Most likely jQuery is not at fault but my code, yet I see no problems with my code, which is pretty straight forward.

// edit: ok, so it turns out that my solution did not solve the issue on all of my pages. Which brings me back to the original problem: how can jquery so blatantly mis-measure height? Take a look at the bottom of this screen: http://rodelynx.nl/video-fotos-en-verslag-van-demo-kampbewoners-osdorp-koekamp-2/ According to jquery, the vertical offset of the 'zoek per tag' element is 4767, and the tag nav's vertical offset is 4757. Yet they are obviously way further apart then that.

0

There are 0 answers