Jquery, .height() changing on page refresh but not on load

Question

I have already seen the following topic:

Jquery Loading problem on first load / hard refresh

Which seems to be some inverse version of the problem I'm experiencing. In that case a hard refresh is the problem, in this case it is the solution.

Because of some issues designing a complex web application UI to work on different monitor heights I decided to turn to jQUery to alter heights for me. I was originally using percentage heights but these led to large gaps at points, and using max and min heights proved tricky for dragging elements out of context. Use of the application is far slower without JavaScript enabled (though it is built on progressive enhancement) so its assumed a user will have it switched on. That's for those who will suggest a CSS solution.

Link to test This has been removed as the domain is no longer valid

The issue is that when the page is loaded through a hyperlink it sizes correctly - if you have opened it you should see this, with about 30px between the bottom of the yellow/green boxes and the bottom of the browser. However refresh it (you might need to refresh it a few times) and you'll see the yellow box vanish off the bottom of the page, and the green box stretch to join it. This only happens live on my server - I never noticed this error whilst developing it on my localhost because it doesn't happen.

The jquery code is located in sandpit1.1webservices.co.uk/ground-control/examples/scripts/jumpers.js and the particular snippet is:

function loadResize()
{
 //var window=$(window).height();
 var window=$('div.main').height();
 //window=parseInt(window);
 window-=50;
 $('div.staff ul').css('height',window);
 window-=175;
 $('div.loads').css('height',window);
 window-=150;
 $('div.loads div.list').css('height',window);
}

You can see I've got a few things commented out there, and there are more in the actual code for testing. When the window height is alerted at the start of testing it says 885 on my browser (1024px screen height), however refreshing gives random values between 1133 and 1785. Do a hard refresh or page load and its back to 885. The function is called right at the end of document.ready:

$(window).resize(loadResize);
loadResize();

I used to have the resize event trigger itself but removed it in case it caused the problem.

Any ideas?

Answer 1

I eventually fixed this issue by moving the loadResize() function from the $(document).ready() event to the $(window).load() event. This is correct, as document ready fires after the DOM has been constructed but before additional elements are downloaded. For this reason items such as images and custom fonts (both of which were on the page) affected the size calculations - depending on the network speed and what was loaded at the time, different heights would be given for the first event.

Answer 2

Try writing it as $(function loadresize(){ and end with });