Autosize div height after inner html has been changed by javascript

Here's where the site is located: http://pwnage.me/

The javascript is located here: {site}/scripts/main.js

I'm using jQuery to dynamically load the content into the #container div on the main page. When you click a link on the main page (eg. "Test Project 1"), it loads the content from ajax.php and sticks the new html in the #container div. I've tried tons of different solutions but I can't get the height to fit the new content. It just ends up extending past the end of the div. However, if you go to http://pwnage.me/projects/test, it works as intended. I tried the same way I use on page load, but it doesn't work:

$('#container').html(d);
var h = $('#container').height();
$('#container').html(load_html); // load_html is a predefined var that holds html of a loading image
$('#container').animate({ height: h, opacity: 0 }, 300); // open to new height and fade out loading image
setTimeout("$('#container').html(d);", 300); //  d is saved in a global var so this works
setTimeout("$('#container').animate({ opacity: 1 }, 300);", 300);

So it should:

1. Get the new height
2. Load the loading image html
3. Slide the height out to the new value and fade out
4. Load the new html
开发者_运维知识库
5. Fade in

It works as it should except that when it loads the new html the first time, the div never expands the height to fit the new content, so it gets the old height value.

You might try doing this in your animate instead of trying to specify an exact height. In addition, put your loading spinner in a div that's separate from your content area:

$('#container').animate({ height: 'hide', opacity: 0 }, 300, function() {
    $('#container').empty();
    $('#loading').fadeIn();
});

Then do this when you have your new content (i.e. at the end of your AJAX request):

$('#loading').hide();
$('#container').html(d).animate({ height: 'show', opacity: 1 }, 300);

I hope this will help you get on track.

Have you tried $.slideDown() ?

var html = $(d);
d.wrap('<div />')
    .hide()
    .appendTo($('#container'))
    .slideDown();

The reason the container isn't re-sizing properly is because the content has a static height set on it that is too small.

The problem appears to be that you have fixed the container height at 67px. Vs the example that didn't have a fixed container height until the html was loaded.