Colorbox iframe resize

user1223248 picture user1223248 · Feb 21, 2012 · Viewed 11.1k times · Source

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

Ghulam Ali picture Ghulam Ali · Jul 3, 2012

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)