ajaxed div will slideDown to the wrong height
If anyone could help point me in the right direction, it would be much appreciated. I've learned a lot in the last few days struggling with this.
I have a site that is a grid made out of li elements that are a fixed width and height and all float:left. Some have hrefs and are ajax links. The site finds the li elements that are on the left and adds a special class. It then moves a content container (#wrapper) infront of the nearest one of those. And then loads content.
When I animate the open and close of the content container, however, it uses the height of previously loaded content. For instance, if I load a tall page, and then load a short page, during slideDown for the short page it opens up very tall, to the height of the tall page, then jumps back to the right height.
Thanks a lot, I really appreciate any advice.
- <script type="text/javascript">
$(document).ready(function(){
$('li.box').each(function(){
var _p = $(this);
var position = _p.position();
if (position.left == 50){
_p.addClass('onside');
}
});
var hash = window.location.hash.substr(1);
var href = $('.ajax').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #wrapper';
$('#wrapper').load(toLoad)
}
});
$('li.ajax').bind('click', function(){
$('html,body').animate({ scrollTop: $("#wrapper").offset().top }, { duration: 'slow', easing: 'swing'});
$(this).prevAll(".onside:first").before($("#wrapper"));
var toLoad = $(this).attr('href')+' #wrapper';
$('#wrapper').slideUp('600','easeInQuad',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#wrapper').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#wrapper').slideDown('1000','easeInQuad');
$('html,body').animate({ scrollTop: $("#wrapper").offset().top }, { duration: 'slow', easing: 'swing'});
}
return false;
});
});
</script>