Ajuste la altura del iframe de jQuery Fancybox de acuerdo con los contenidos modificados dentro de

Question

Estoy usando jQuery Fancybox para mostrar formularios en una ventana modal. Estoy usando el siguiente código:

$("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); 
    }); 
} 
}); 

Con la función onComplete adicional, soy capaz de ajustar la altura del iframe en consecuencia a la altura de los contenidos en su interior.

Sin embargo, he ocultado algunos elementos con .hide() de jQuery dentro del iframe. Siempre que quiera mostrar() estos elementos, el propio iframe no cambia de tamaño junto con la altura extra de los elementos ahora visibles.

¿Cómo puedo lograr esto? ¡Gracias!

Answer 1

ponga la siguiente función para la página

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

Después, activa esta función a la función MostrarOcultar. Por ejemplo;

function yourShowHideFn(){ 
    //bla bla bla 

    $.fn.ResizeFancy(); 
}