Colorbox iframe resize

Question

I've looked at many of the responses to similar questions and I can't find anything that works. I'm new to javascript but have got far enough to get my results to show in an iframe, but when I try the suggested code:

$.colorbox({ ... url, iframe true, etc

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

the window resizes to 150pixels high. regardless of what is in the html of the page. Ideally it would open to the search results size, and then I could call it each time a new search is run, but none of the variations of colorbox.resize() that I have found reference to do anything. Nada.

Any assistance would be most appreciated.

Answer 1

If you want to resize according to contents of Iframe then your code to resize should be inside the Iframe contents. Because as far as I think only the Iframe knows what contents it contains, not the parent window that loads it. In your Iframe Contents put this code in head section

<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 be executed and your Colorbox window will be resized. (Make sure this code only works when you are using same domain for Parent and Iframe)

Answer 2

Did you try resize() without any argument ? It should resize with its own auto-calculations. But you can also try

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

Check this link for more information.