jquery - Autosize div height after inner html has been changed by javascript -
here's site located: http://pwnage.me/
javascript located here: {site}/scripts/main.js
i'm using jquery dynamically load content #container div on main page. when click link on main page (eg. "test project 1"), loads content ajax.php , sticks new html in #container div. i've tried tons of different solutions can't height fit new content. ends extending past end of div. however, if go http://pwnage.me/projects/test, works intended. tried same way use on page load, doesn't work:
$('#container').html(d); var h = $('#container').height(); $('#container').html(load_html); // load_html predefined var holds html of loading image $('#container').animate({ height: h, opacity: 0 }, 300); // open new height , fade out loading image settimeout("$('#container').html(d);", 300); // d saved in global var works settimeout("$('#container').animate({ opacity: 1 }, 300);", 300); so should:
- get new height
- load loading image html
- slide height out new value , fade out
- load new html
- fade in
it works should except when loads new html first time, div never expands height fit new content, gets old height value.
you might try doing in animate instead of trying specify exact height. in addition, put loading spinner in div that's separate content area:
$('#container').animate({ height: 'hide', opacity: 0 }, 300, function() { $('#container').empty(); $('#loading').fadein(); }); then when have new content (i.e. @ end of ajax request):
$('#loading').hide(); $('#container').html(d).animate({ height: 'show', opacity: 1 }, 300); i hope on track.
Comments
Post a Comment