set fancybox height with jquery

Question

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

possible duplicate of [fancy box work with iframes in beforeShow function?](http://stackoverflow.com/questions/10769151/fancy-box-work-with-iframes-in-beforeshow-function) — JFK, Nov 09 '13 at 19:10
the problem is that the fancybox iframe source is from another domain which seems to cause something like that not to work. I can't access the iframes contents in that way. — Mats Raemen, Nov 09 '13 at 20:15
you said you are getting the height right so try putting them into a variable and set `this.height` withing the fancybox callback using that variable — JFK, Nov 09 '13 at 21:45

score 0 · Answer 1 · answered Nov 09 '13 at 15:23

0

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.

answered Nov 09 '13 at 15:23

cssimsek

1,179
13
17

so how do I pass the height to that? – Mats Raemen Nov 09 '13 at 15:42

score 0 · Answer 2 · answered Nov 09 '13 at 20:17

0

Found it, you have to change following attributes

document.getElementById('fancybox-content').style.height = parseInt(height) + 'px';
document.getElementById('fancybox-frame').height = parseInt(height);

answered Nov 09 '13 at 20:17

Mats Raemen

1,679
1
27
39

set fancybox height with jquery

2 Answers2

Linked