I want to show a fancybox on my page displaying an iframe with a source of another domain that has dynamic height (since within the iframe I'll go to different pages or might have some dynamic content). I have access to the other domain's code as well. So I can use postMessage to send the iframe's source's height to my page. But I can't seem to figure how to change the fancybox's height through code.
I tried setting the height of all the divs that contain the iframe, including the iframe itself:
document.getElementById('fancybox-frame').height = parseInt(height);
document.getElementById('fancybox-content').height = parseInt(height);
document.getElementById('fancybox-outer').height = parseInt(height);
document.getElementById('fancybox-wrap').height = parseInt(height);
and I know that I'm getting the height through all right since it works perfectly on a directly integrated iframe.
Anyone got any ideas?
Thanks
Edit: I also tried $.fancybox.update() but I'm not really sure on how to implement that:
$.fancybox({
'height': height
});
$.fancybox.update();
Have you tried the built in
$.fancybox.update()
method? The the documentation suggests (under API Methods) that this method should provide the functionality you're looking for.Found it, you have to change following attributes