I'm trying to make an application in a facebook page with the use of fancybox 2 where a page is loaded as an iframe in the fancybox. It works all fine, except in IE (who would've known!).
In my fancybox 2 there is a button that submits a form and sends you to another page. this page is loaded in the same fancybox window as the previous page. When this page is loaded, the height of the fancybox is not adjusted properly, so half of my page is not visible.
What I'm trying to do now is change the height of the fancybox iframe, but I'm already stuck on getting the actual size of the iframe.
here my javascript code in the last page that is loaded in the fancybox iframe:
$(document).ready(function() {
var inner = $('.fancybox-inner');
console.log(inner);
});
This console.log gives me 'null' back, which tells me this class does not exist in the page. I have also tried the following:
parent.$('.fancybox-inner');
parent.$('.fancybox-iframe');
$('.fancybox-iframe');
$.fancybox;
parent.fancybox;
my fancybox load:
$(document).ready(function() {
$(".uploadbox").fancybox({
scrolling : 'no',
preload : true,
type : 'iframe',
width : '623px',
height : 'auto',
autoSize : true,
afterLoad : function () { $.fancybox.update(); }, //this does not work
closeBtn : false,
closeClick : false,
helpers : {
overlay : {closeClick: false}
}
});
});
Any help would be greatly appreciated!
I have never managed to solve this issue. I'll explain to you why:
Facebook pages use an iframe to show your website into their website. To show another page into fancybox 2 you need to use an iframe too. Because an iframe in an iframe is always giving problems (cross browser and so on), there was no way to give the parent window the height of my fancybox, because of the double iframe. Since the app had to go live, I decided to give it a static height. In the future I will not use Fancybox 2 anymore or any of that matter, it's just one big misery inside Facebook.
You will need parent.jQuery.fancybox.resize(); or even window.parent.jQuery.fancybox.resize();
If i remember correctly, there was a specification on their site about this very issue.