Alexander Dimitrov Alexander Dimitrov -4 years ago 105
Javascript Question

jQuery not setting the right height

I have a basic html document which loads an html file depending on the url hash.
I have this code to do the loading and resizing of the main div:

$(function() {

var newHash = "",
$mainContent = $("#mainContent"),
$pageWrap = $("#kofa"),
baseHeight = 0,
$el;



$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");

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

$pageWrap.height($pageWrap.height());
/*baseHeight = $pageWrap.height() - $mainContent.height();*/

if (newHash) {
$mainContent
.find("#guts")
.fadeOut(20, function() {
$mainContent.hide().load(newHash + ".html",
function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
}, 100, "swing", function() {
$mainContent.fadeIn(100);
});
$("nav a").removeClass("selectedMenu");
$("nav a[href='#"+newHash+"']").addClass("selectedMenu");
});
});
};

return false;
});

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



});

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

});


The code works, but it seems that it doesn't wait for every part of the document to load before it changes the height, which results in .. well this: http://thecardinal.uphero.com/ (part of the content is outside of the main div).
It seems that after clicking on a button in the menu or refreshing the page via F5 it does the correct height.
(you can inspect the website given above for additional code)

Answer Source

why not use 100% height ? can thus

$("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");

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

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(20, function() {
                $mainContent.hide().load(newHash + ".html", 
                function() {
                    $pageWrap.animate({
                        height: '100%'
                    }, 100, "swing", function() {
                    $mainContent.fadeIn(100);
                    });
                    $("nav a").removeClass("selectedMenu");
                    $("nav a[href='#"+newHash+"']").addClass("selectedMenu");
                });
            });
    };

    return false;
});

and in css

#kofa {
   height: 100%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download