Animating and resizing a div after setting html - php

Question

I'm pretty new to jQuery, AJAX, and web dev in general, so this is driving me crazy.
I've got an AJAX request that pulls in page content into the current one, and I'm trying to coerce jQuery into displaying it like so:
Fade out current content
Smoothly resize the div to the new content
Fade in new content
So far, I've got it written up something like this. I've changed it a round a bunch, so this might not be the closest I've gotten, but the same problem still persists.
$("#page-data").fadeOut(600).html(data);
$("#page-data").ready(function() {
var newHeight = $('#' + divname).height();
$("#page-data").animate({
height: newHeight,
}, 600, function() {
$("#page-data").fadeIn(100);
});
});
Where page data's got this simple style:
#page-data { position: relative; overflow: hidden; }
My problem is that $('#' + divname).height() doesn't account for images and other things that could occur in the div. I tried using .load() instead of .ready(), but then the callback isn't called at all.

Answer 1

Since there isn't any HTML included in the question, I'm assuming that you have your container <div id="pageData"> that holds another <div> (identified by divname), into which you are loading your dynamic content.
Firstly, $(..).ready() can only be used used on the document object, so using applying it to a <div> goes against jQuery's documentation.
The best way I can think to acheive your goal is to keep track of any images in the HTML that you have dynamically loaded via AJAX and monitor them until they have all been loaded. Then you can apply your logic for setting the height of your container <div>.
The problem is that if we apply a load event handler to an image that has already loaded, then it won't fire. Working out whether an image has been already loaded can be tricky, but the received wisdom seems to be to check the complete property (if it exists) or check whether the the height of the image is greater than 0:
function imageLoaded(img) {
if(typeof img.complete != 'undefined') {
return img.complete;
}
else {
return(img.height > 0);
}
}
Now we can take the following steps:
Fade out the <div> (e.g. #pageContent) that will contain your AJAX
content
Load the AJAX content
Search through the new content for all
images, count how many there are, add a load event handler to each
one, then cycle through each image checking if it's already loaded
and manually firing the load event if so.
In the load event we decrement the counter. When the counter reaches zero, then calculate the height of the container <div> and fade in the content
For example (see here for a working jsfiddle):
$pageData = $('#pageData');
$pageContent = $('#pageContent');
$pageData.height($pageData.height());
$pageContent.fadeOut(function() {
$pageContent.load('http://your.dynamic.content', contentLoaded);
});
function contentLoaded() {
var $loadables = $(this).find('img');
var loadableCount = $loadables.length;
// Attach onLoad event handlers to each image
$loadables.load(function() {
loadableCount--;
checkAllLoaded(loadableCount);
});
// Trigger the onLoad events manually for any images that have already loaded
$loadables.each(function() {
if(imageLoaded(this)) {
$(this).trigger('load');
}
});
}
function checkAllLoaded(loadCount) {
if (loadCount <= 0) {
$('#pageData').animate({
height: $('#pageContent').height()
}, 600, function() {
$('#pageContent').fadeIn();
});
}
}