Dynamic page/replacing content container height issue

[MagikoMyko]

Hi everyone, first time posting here. I am having some trouble with Chris’s Dynamic page/replacing content article found at https://css-tricks.com/dynamic-page-replacing-content/. The issue is with the height calculation for the resizing of the content container. A curious thing happens. The first time I click the link, the new height of the content container is drastically shorter than the content (for my page it is 165px vs. 245px, what it should be). When I click refresh, the container resizes properly. The content that I am loading in has an image and some text, and I believe what is happening is that the container is being resized before the image loads, and is not taking the image size into account when calculating the new container height. The fact that it functions properly upon refresh I am guessing is due to caching. Anyway, I’d appreciate any help on this that I can get. Is there same way to ensure that the image in the #content div on the new page loads before the container is resized? I’m kind of a newb when it comes to jQuery still. Here is the code. It’s virtually a copy-paste from Chris’s code, but with div names changed and the baseHeight calculations taken out (since on my site the content is basically the size of the container), and I believe I swapped the fadeIn and height animation according to my preference that the box resize before the content fades in (I checked, this has no bearing on the issue I’m having). Thanks!

$(document).ready(function() {





// Animation for main content box

var newHash = '';

var $mainContent = $('#mainContent');

var $mainBox = $("#mainBox");

$mainBox.height($mainBox.height());

baseHeight = $mainBox.height() - $mainContent.height();

$("#frontPageBtns").delegate("a", "click", function() {

window.location.hash = $(this).attr("href");

return false;

});

$(window).bind('hashchange', function() {

newHash = window.location.hash.substring(1);



if (newHash) {

$mainContent

.find("#content")

.fadeOut(200, function() {

$mainContent.hide().load(newHash + " #content", function() {

$mainBox.animate({

height: baseHeight + $mainContent.outerHeight() + "px"

});

$mainContent.fadeIn(200);

$("#frontPageBtns a").removeClass("current");

$("#frontPageBtns a[href='"+newHash+"']").addClass("current");

});

});

};

});

$(window).trigger('hashchange');

});

[Chris Coyier]

You’ll have to attach a load event to all images that come in with the content, in the callback function of .load(). Then when they fire, recalculate the container height and adjust it again.

[MagikoMyko]

Works perfectly. Thanks!

[DJErock]

How can i tell it to to recalculate the height once all the elements are loaded like add a (document).ready in somewhere??

[Author]

Posts