Auto adjust the height of a FancyBox when the content changes

[ArnoM.nl]

Hi everyone,

I've got a problem:
I load the content of a popup using the jQuery post-method and then
call FancyBox to show the popup on the page using this code:
$.fancybox(data, {
'autoDimensions' : false,
'width' : 450,
'height' : 'auto',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titleShow' : 'false',
'enableEscapeButton' : 'true'
});

It works perfectly so far, but sometimes a pop-up contains a form
which is validated through jQuery.
Any notifications (like errors) that may occure are added to the top
of the form, which makes the form larger.
Since the form is in the FancyBox popup, I want the FancyBox popup to
resize with it.
But using this code, FancyBox only resizes to fit the initial content
and when this becomes larger it just shows a scrollbar (which I want
to get rid off).

Any ideas on how to accomplish this?
Maybe there's a function within FancyBox that I can call to let it
have another look at the size of its contents?
(Although it would be nicer if it would happen automatically, since I
use a jQuery slideDown-method to make the notifications appear)

Hope someone can help, if so thanks a lot!

Kind Regards,
Arno Moonen

[ArnoM.nl]

Okay, I found the function I was looking for (pretty changed I didn't
see it the first time I checked out the API page) and I've added a
callback function to the slideDown-call:
function(){$.fancybox.resize();}

It "works", but it looks really cheesy: the loaded content slides down
(which makes a scrollbar appear) and then the height is adjusted.
Does anyone know a trick to make it look more fluidly (so the FancyBox
will "slide down" together with the loaded content)?

Thanks in advance!

Arno

[ArnoM.nl]

After another search on Google and some cursing and head-scratching I
came up with this code which does the trick:

$(this).find('.notifications').slideUp( {
duration : 'normal',
easing : 'easeOutExpo',
step : function() {
$.fancybox.resize();
},
complete : function() {
$(this).html('<!-- # -->');
currentMe = this;
$.post('beheerhandler.php', data, function() {
$(currentMe).slideDown( {
duration : 'slow',
easing : 'easeOutExpo',
complete : function() {
$.fancybox.resize();
},
step : function() {
$.fancybox.resize();
}
});
}, 'script');
}
});

I used to have the slideUp and slideDown within the code I load using
jQuery.post, but it made things a lot easier to place it in this chunk
of code.
Ofcourse this code is within an event function and 'data' contains the
POST-data to be send (it's basically a serialization of the form with
a few var's added to identify the form and user).
The most important thing to make it work 'fluidly' is the function I
added to the step-event of the slideUp and slideDown effect.
Basically every time the animation adjusts something, it also calls
the Resize method of FancyBox which makes FancyBox resizes with the
same intervals.

But, this codes seems rather 'expensive' to me; meaning that the
method to get FancyBox resized is called a lot.
So, if they're is away to make it a bit 'cheaper', please let me know!

Arno