CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alexander Dimitrov
Alexander Dimitrov

Reputation: 121

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)

Upvotes: 0

Views: 79

Answers (1)

tealcake
tealcake

Reputation: 51

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%;
}

Upvotes: 1

Related Questions