How to resize colorbox after ajax success response

Question

Normally to make colorbox adjust it's size to the content I use this snippet:

          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });

But this time it does not work, when I try the same thing in an ajax function, after the success response:

    $.ajax({
      data:number,
      dataType: "json",
      type:"POST",
      url : "payment/request1",
      cache: false,
      success: function (response) {
        console.log(response);
        if(response === true){
          $.colorbox({html:'<div id="paymentblock"><div><h2 style="color:#444;">Open app in your phone</h2></div><div style="text-align:center;"><p>Payment with '+number+'</p><img src="/images/giphy.gif"></div>'});
          $('#edit-commerce-payment-payment-details-number').css('background','#fff').val('');
          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });
        }else{
          $.colorbox({html:'<div id="paymentblock"><div><h2 style="color:#444;">An error occurred</h2></div><div style="text-align:center;"><p>Kontakta oss.</p></div>'});
          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });
        }
      }
    });

The result is that the colorbox opens with a too small size and don't resize to fit the content. What am I doing wrong?

Answer 1

I created a custom function to resize the colorbox after loading content, after resizing the browser window or, on mobile, after an orientation change that also effectively changes the browser window width.

Modern web design has to deal with widely varying browser widths, especially with so many users on cell phones and tablets, so the content you are loading should be responsive, from about a 320 pixel width on up. Then, let the colorbox size be determined by the available browser width as well as a maximum reasonable size for aesthetic reasons.

This goes in a javascript file included at the bottom of each page:

/* Colorbox resize function */
var resizeTimer;
var resizeColorBox = function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($("#cboxOverlay").is(":visible")) {
            $.colorbox.resize({maxWidth:"400px",width:"95%"});
        }
    }, 300);
};

// Resize Colorbox when resizing window or changing mobile device orientation
$(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

Then, the colorbox function itself has a few parameters that need to be set correctly. Note that I have closebutton set to false because my HTML content includes a close button that calls the colorbox close function.

$.colorbox({
    width:"95%",
    maxWidth:400,
    maxHeight:"95%",
    speed:300,
    closeButton:false,
    onComplete : function() {
        $(this).colorbox.resize({width:"95%",maxWidth:400});
        $(window).trigger("resize");
    },
    html:'Your HTML Here'
});

So, your code need only call the resizeColorBox() function after loading AJAX content and you should be good to go. Plus, it handles other resize situations.

[Edit] If you REALLY need to resize to the width of inner content, then the resize function should first get the width of the container div of the inner content, then resize to that width (possibly plus the width of colorbox padding, etc). In that case, the resize function would be more along the lines of:

var resizeColorBox = function() {
    var w = $('content_container').width() + padding_w;
    var h = $('content-container').height() + padding_h;

    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($("#cboxOverlay").is(":visible")) {
            $.colorbox.resize({width:w, height:h});
        }
    }, 300);
};