Fancybox inside fancybox setting heights

Question

I have main page where I am calling fancybox2. When fancybox iframe opens, I have a link inside that page that will open another fancybox iframe. Now issue is:

When content is "smaller" I can't get it to move to the top of the opened page (take a look at source on example site)
When content is larger - I can't set height in order to avoid scrollbars.

When I use selector like: parent.$('.SELECTOR').fancybox({ ...in that case my "first" fancybox page will close, and I need that open as second "fancybox" will send some data to "first" fancybox page (where form resides) and finally once when that form is submitted it's all transferred to "main page"...

I know it is difficult to understand, but here is a link with example:

http://wwiz.webatu.com/

So how to set height of first "fancybox" dynamically ?

Thanks !

What is the code you use to open your fancybox ? There's some options you can use to set max height and width. — Philippe Boissonneault
Take a look at example + I don't know exact height - it is dynamically generated via PHP... — Peter
I would try (inside iframe1.html) afterShow: function(){parent.$.fancybox.update()} — JFK

Peter Peter · Accepted Answer · 2013-02-15T22:17:43

OK, I figured out this and here is solution.... more like hack... but it works on all browsers... And what this does: it actually MASKS (doesn't remove it -> because I need to pass callbacks to it) first iframe (removing shadows, content even close button) and after close event - it restores the first iframe :)

Oh, there is additional "post message" stuff since whole site is actually loaded via iframe (cross-domain stuff) and this is solution that works in regular iframe which loads fancybox1 that loads fancybox2 with popup... anyway it's too complicated to explain, and anybody who seeks for viable solution - here you go:

        $('.addmember').fancybox({
            openEffect : 'elastic',
            closeEffect : 'elastic',
            fitToView : false,
            nextSpeed: 0, //important
            prevSpeed: 0, //important
            beforeShow: function(){
            $_returnvalue = false;
             this.width = ($('.fancybox-iframe').contents().find('#popup-add-member').width());
             this.height = ($('.fancybox-iframe').contents().find('#popup-add-member').height());
     var ifrchild = $('.fancybox-iframe').contents().find('#popup-add-member').height()+60;
     parent.$('.fancybox-skin').attr('style', function(i,s) { return s + 'height: '+ifrchild+'px;' });
     parent.$('.fancybox-inner').attr('style', function(i,s) { return s + 'height: '+ifrchild+'px;' });
     $('.fancybox-wrap').attr('style', 'top: 15px !important;');
     parent.$('.fancybox-close').addClass("fancynodisplay");
     parent.$('.fancybox-overlay').addClass("fancybox-hidescroll");
     $('.fancybox-overlay').addClass("fancybox-hideoverlay");
     $('.fancybox-overlay').addClass("fancybox-hidescroll");
     $('.fancybox-skin').addClass("fancybox-hideshadow");
     parent.$('.fancybox-skin').addClass("fancybox-hideshadow");
     parent.$('.fancybox-skin').addClass("fancybox-hideskin");
     $('#hide-on-open').attr('style', 'display:none;');
            }, 
            afterShow: function(){
     },
            afterClose : function() {
                $('#hide-on-open').attr('style', 'display:block;');
                var ifrmain = $('#schedule-members').height();
                parent.$('.fancybox-skin').attr('style', function(i,s) { return s + 'height: '+ifrmain+'px;' });
      parent.$('.fancybox-inner').attr('style', function(i,s) { return s + 'height: '+ifrmain+'px;' });

                parent.$('.fancybox-close').removeClass("fancynodisplay");
                parent.$('.fancybox-overlay').removeClass("fancybox-hidescroll");
                $('.fancybox-overlay').removeClass("fancybox-hidescroll");
                parent.$('.fancybox-skin').removeClass("fancybox-hideskin");
                        if ($_returnvalue != false && $_returnvalue.response == "OK" )
                        {
                            // MY CALLBACK FUNCTIONS 
                        }

                        window.top.postMessage($('#wrap').height()+80, 'myiframe');
            },
            onUpdate : { autoHeight: true},
            beforeLoad :    function() {
     var ifrchild = $('.fancybox-iframe').contents().find('#popup-add-member').height()+60;
     window.top.postMessage(ifrchild, 'myiframe');                  
            },
            helpers : {
                  overlay : {closeClick: false}
            }
    });

And CSS to make this happen:

.fancybox-close.fancynodisplay {
height: 0px !important;
width: 0px !important;
display: none !important;}
.fancybox-overlay.fancybox-hidescroll {
overflow: hidden !important;
}
.fancybox-opened .fancybox-skin.fancybox-hideshadow {
-webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
        box-shadow:none !important;}
.fancybox-hideskin {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0) !important;
position: relative !important;
text-shadow: none !important;
}
.fancybox-hideoverlay {
background: none;
}

Fancybox inside fancybox setting heights

1 Answers