Tuesday, 15 February 2011

jQuery Colorbox - resizing iframe to match content

The designers and HTMLers I work with are a pernickety bunch, and rightfully so. Quite often they want a lightbox-type overlay for a form that can vary in size depending on what selections the user makes in the form, and when the form is submitted a small thank you message is displayed. They want the overlay to resize itself when the content changes.

Until recently we were using colorbox with divs, not iframes, as there was seemingly no way of resizing the iframe to match content. The knock-on effect of this was a whole heap of trouble trying to avoid postbacks of the overlay content as the parent page would postback too.

Using an iframe would make things so much easier technically as we could postback all we wanted in our overlay, opening up the opportunity for server-validation, pagination, file uploading etc, without posting back the parent page. And so it was that I looked into iframe resizing.

I achieved this using colorbox v1.3.9, and assume it works on later versions. Working code is available on my github here. In summary, drop this code into your jquery.colorbox.js file just before the publicMethod.resize function:
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 then in your iframe content page use the following:

jQuery(document).ready(function (){
 jQuery(window).bind("load", function () {
 var frameWidth = jQuery(document).width();
 var frameHeight = jQuery(document).height() + 20;
 parent.$.fn.colorbox.myResize(frameWidth, frameHeight);
 });
}); 
This solution was adapted from a post found on the Google colorbox group.

13 comments:

  1. Thanks a lot...

    Found many tutorials and discussion over this, but this method really did worked well.
    Thanks again.

    ReplyDelete
  2. Thanks alot Bristol. I finding this solution from last 3 months... and now i got it over here... It is so much useful as i m creating facebook like photo gallery...again Thanks Alot....

    ReplyDelete
  3. Yes, this is a great solution for resizing the colorbox after the iframe content is loaded. It has been working great in all browser, now, except for IE9.

    Has anyone else experienced issues using this resizing method in IE9?

    ReplyDelete
  4. That´s the absolutly best hacking solution i ever seen. Thank you so much!

    ReplyDelete
  5. Hi, Can any one post demo files , using this solution. Thanks in Advance

    ReplyDelete
  6. Sorry, seems to be good solution, but I cant get it up and running.

    How does the script on the parent page need to like?

    Like this?

    $(".booking").colorbox({iframe:true, maxWidth:true, maxHeight:true, scrolling:true});

    A little demopage would be the best.

    Thanks for having a look!

    ReplyDelete
  7. Could not be more thankful. I've seen thousands of workarounds completely useless, and your method really saved my day!

    ReplyDelete
  8. I couldn't get this to work until I commented out this line...

    if (settings.scrolling) { return; }

    Any idea if this is needed and why? I'm running the latest version of colorbox 1.3.19.

    ReplyDelete
  9. It didn't work for me either initialy and but after I put
    "scrolling:true"
    when plugin loads initialy, it works fine.

    Thanks for this!

    ReplyDelete
  10. Thank you very very much. you saved my day. :)

    ReplyDelete
  11. i can't find out that publicMethod.resize in colobx-min.js file ! anything i missed?

    ReplyDelete
    Replies
    1. Have a look at the link I provided to the code on github

      Delete

Comments are moderated, so you'll have to wait a little bit before they appear!