Resizing an iframe in Colorbox

Question

I have looked through many answers to similar questions, and I cannot find anything that works. I am new to javascript, but got far enough so that my results appear in an iframe, but when I try the suggested code:

$.colorbox({ ... url, iframe true, etc onComplete : function() { $.fn.colorbox.resize(innerHeight); } 

window size reaches 150 pixels. no matter what is in the html page. Ideally, this will open the size of the search results, and then I can call it every time a new search is performed, but not one of the colorbox.resize() options that I found a link to do something. Nada.

Any help would be most appreciated.

Answer 1

If you want to resize to fit Iframe content, then your resize code must be inside Iframe content. Since, as far as I know, only Iframe knows what content it contains, and not the parent window that loads it. In your Iframe Contents, put this code in the section of the chapter.

 <script type="text/javascript"> function Resize_Box(){ var x = $('body').width(); var y = $('body').height(); parent.$.fn.colorbox.resize({ innerWidth: x, innerHeight: y }); } $(document).ready(function(){ Resize_Box(); }); </script> 

When Iframe is fully loaded, this code will execute and your Colorbox will be resized. (Make sure this code only works if you use the same domain for the parent and iframe)

Answer 2

Did you try resize() without any arguments? He must resize using his own auto-calculation. But you can also try

 $.fn.colorbox.resize({innerHeight:innerHeight}); 

For more information, see the link.