Adjust jQuery Fancybox iframe dynamic height to fit the modified content inside

Question

I am using jQuery Fancybox to display forms in a modal window. I am using the following code:

$("a.iframe").fancybox({
'padding': 0,
'width': 650,
'showCloseButton': false,
'hideOnContentClick': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'onComplete': function () {
  $('#fancybox-frame').load(function () {
    $('#fancybox-content').height($(this).contents().find('body').height() + 20);
  });
}
});

With the optional onComplete function, I can adjust the height of the iframe to match the height of the content inside.

However, I hid some elements with jQuery.hide () inside the iframe. Whenever I want .show () these elements, the iframe itself does not resize along with the extra height of the now visible elements.

How can i do this? Thank!

Answer 1

Put on the page

following function:

$.fn.ResizeFancy = function(){
   $('#fancybox-content').height($('#fancybox-frame').contents().find('body').height() + 20);
};

showHide. :

function yourShowHideFn(){
    //bla bla bla

    $.fn.ResizeFancy();
}