Question

In my page I load content dynamic in a div by .load(). In this loaded div I have a subanvi where I load additional content in the loaded content. This works perfect so far.

But after the load I want to animate the height of the wrapper (which is all alround the page, except the footer) but don’t know how cause my function only gets the hight of the first shown content. How do I get height of the new loaded content?

This is my function:

$(function(){

        var 
        $subContent = $(".subcontent"),
        $subWrap    = $(".maincontent"),
        $newWrap    = $("#wrapper"),
        subHeight   = 0,
        $el;

        $newWrap.height($newWrap.height());
        subHeight = $newWrap.height() - $subContent.height();

        $("ul.linkbox li a").live('click', function (e) {
    newLink = $(this).attr("href");
        e.preventDefault();

    $(".textbox").find(".subcontent").fadeTo(200,0, function() {

    $(".textbox").load(newLink +  " .subcontent" , function() {

    $(".subcontent").fadeTo(200,1, function() {

        $newWrap.animate({height: subHeight + $subContent.height() + "px"});

    }); 
    }); 
    });   
        });

});

Answer 1

You calculated subHeight before any animation happens

subHeight = $newWrap.height() - $subContent.height();

Then used it after some animation happened to your elements

 $newWrap.animate({height: subHeight + $subContent.height() + "px"});

This may affect your code behavior.
I would suggest recalculate the subHeight again when you need it:

$newWrap.animate({height: $newWrap.height() - $subContent.height() + $subContent.height() + "px"});