I'm using jQuery Fancybox to display forms in a modal window. I'm 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 additional onComplete function, I'm able to adjust the height of the iframe accordingly to the height of the contents inside.
However, I've hidden a few elements with jQuery's .hide() inside the iframe. Whenever I want to .show() these elements, the iframe itself doesn't resize along with the extra height of the now visible elements.
How can I accomplish this? Thanks!
Put the following function to the page
$.fn.ResizeFancy = function(){
$('#fancybox-content').height($('#fancybox-frame').contents().find('body').height() + 20);
};
After, trigger this function to your showHide function. For example;
function yourShowHideFn(){
//bla bla bla
$.fn.ResizeFancy();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With