1

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.

Sjerp van Wouden
  • 41
  • 7
  • Your demo looks correct to me? What exactly is the issue on that page? What is showing where it isn't meant to be? – Rob Schmuecker Aug 03 '14 at 11:45
  • 1
    Thank you. As I said, I 'solved' the issue by adding a margin top if the positions are not equal. Thus on http://rodelynx.nl/judas-priest-redeemer-of-souls-missen-we-k-k-downing/ the .tagNav element gets about 10 pixels worth of margin. Now this works, but 1) it messes up the design 2) it's a hack, not a solution, and the mystery remains. Heights are set in a very straightforward way, but for some reason, pixels appear out of nowhere, apparently proportional to the total length when I look at other pages. – Sjerp van Wouden Aug 03 '14 at 12:34

0 Answers0