admin管理员组

文章数量:1430715

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 acplish this? Thanks!

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 acplish this? Thanks!

  • javascript
  • jquery
  • iframe
  • height
  • fancybox
Share Improve this question asked Sep 15, 2011 at 12:13 Martijn van TurnhoutMartijn van Turnhout 2711 gold badge6 silver badges20 bronze badges 1
  • 1 I think this trend has the answer to your request: Problem Adjusting Fancybox Iframe Overlay Width and Height – JAY Commented Dec 16, 2011 at 8:12
Add a ment  | 

1 Answer 1

Reset to default 2

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

本文标签：

版权声明：本文标题：javascript - Adjust jQuery Fancybox' iframe height dynamically according to changed contents inside - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745462210a2659374.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。