Question

I’m using colorbox (jquery plug-in) to display a multi-step sign-up process. I’m using colorbox in “iframe” mode.

$('#signup').colorbox({
    width:     '500px', 
    height:    '250px', 
    opacity:   '.5',
    scrolling: false,
    fixed:     true,
    iframe:    true
});

Since the content of the different steps have different heights, I would like for colorbox to resize itself automatically when it loads a new step.

I use the following code in the iframe content (simply in a script tag near the end of the document):

$(function() {
    var iH = $(document.body).height();
    console.log("iframe height: " + iH);
    parent.$.colorbox.resize('height', iH);
}); 

Before that I had tried a simpler version:

parent.$.colorbox.resize();

But in both cases I end up with what seems to be an infinite loop: the content of the iframe is endlessly reloaded and never actually displayed (I can actually see it blink sometimes).
The iframe is resized in the process (during the first loop), so it seems to be partially working. However the new size appears to be too small for the intended content, so I don’t really know…

Any idea why this doesn’t work and how to solve this?

Update:
If I put the above script (simple version) on the second step and not on the first, I avoid the infinite loop, but when I click to go to the second step, the first step is actually loaded instead of the second step.
Same goes if I put this script on the third step: the first step is loaded instead.
So it seems that when executing its “resize” function, colorbox kind of restarts it all from the beginning?…

Answer 1

I found a solution here: http://groups.google.com/group/colorbox/browse_thread/thread/fadc3d68ca764de3/c38fa24136a6abd7?pli=1

Added this to the colorbox.js (ColorBox v1.3.17.2, right before publicMethod.resize on r 533):

publicMethod.myResize = function (iW, iH) { 
 if (!open) {
    return;
 }
 if (settings.scrolling) {
    return;
    }
 var speed = settings.transition === "none" ? 0 : settings.speed;
 $window.unbind('resize.' + prefix);
 settings.w = iW;
 settings.h = iH;
 $loaded.css({
    width: settings.w,
    height: settings.h
 });
 publicMethod.position(speed);
}; 

and I added this to the page opening in the iframe:

 $(document).ready(function (){
    $(window).bind('load', function () {
        var frameWidth = $(document).width();
        var frameHeight = $(document).height();
        parent.$.fn.colorbox.myResize(frameWidth, frameHeight);
    });
 });

To bind the colorbox function i used this options:

$('.item').colorbox({
    transition: 'none',
    iframe      : true,
    scrolling   : false
});