jQuery - div resizing script works correctly when navigating within the site but not on reload?

Question

Hi

I have a really weird bug and cant figure out why things are not working consistently.

I have two content divs, eaither one of them could be shorter than the other.

I have a script that checks to see which one is taller, and then I make the other equal it.

It works when i click around within the site, so say I click on "Next" or click on a page link direcly, the script works like it should.

If i go to the page directly via my browser address bar, or if i refresh the page, it doesn't do it. Why on earth?!

here is the script:

jQuery(function($) { 
$(document).ready(function(){   

var getCreditsHeight = $("#project_credits").outerHeight()-30;
var getDescriptionHeight = $("#project_description").outerHeight()-30;

if ( getCreditsHeight > getDescriptionHeight ) {
    $("div#project_description").height(getCreditsHeight);
} else {
    $("div#project_credits").height(getDescriptionHeight);
};
}); 
}); 

As you can see it's on document ready.

If I load a new page, then click onto the page in question for the first time, it also does it. but if i go back to the homepage and then click in again, it works...

Thanks, Marc

Answer 1

can u try removing the jQuery function but you have wrapped around document ready? so its like this:

$(document).ready(function(){   

var getCreditsHeight = $("#project_credits").outerHeight()-30;
var getDescriptionHeight = $("#project_description").outerHeight()-30;

if ( getCreditsHeight > getDescriptionHeight ) {
    $("div#project_description").height(getCreditsHeight);
} else {
    $("div#project_credits").height(getDescriptionHeight);
};
});