title: Colorbox resize on form validation (jQuery validate)
body: <p>Okay so here's the deal :</p>
  
  <p>I call the form in Colorbox through AJAX, and have set up a callback to handle its validation, which works fine. Only problem is, when I try to resize the box when fields are invalid (which generates a label with a class of error), in only works on the second try.</p>
  
  <p>I call the resize method on a click event, and it works only at the second click.</p>
  
  <p>I suspect this is because it tries to resize before the labels are generated...I don't know how to circumvent that issue. Any help would be appreciated.</p>
  
  <pre><code>$(".colorbox").click(function(e) {
      e.preventDefault();
  
      var el = $(this),
          sdHref = (el.attr("data-sd-href") ? el.attr("data-sd-href") : el.attr("href")),
          sdTitle = (el.attr("data-sd-title") ? el.attr("data-sd-title") : el.attr("title")),
          sdIframe = (el.attr("data-sd-iframe") ? true : false),
          sdWidth = (el.attr("data-sd-width") ? el.attr("data-sd-width") : false),
          sdHeight = (el.attr("data-sd-height") ? el.attr("data-sd-height") : false);
  
      $.colorbox({
          href: sdHref,
          title: sdTitle,
          iframe: sdIframe,
          width: sdWidth,
          height: sdHeight,
          scrolling: false,
          onComplete: function() { // I validate the form once the content is loaded
              $("form").validate({
                  rules: {
                      phone: {
                          minlength: 10,
                          maxlength:10,
                          digits: true                    
                      }
                  }
              });         
          }
      });
  });
  
  $('body').click(function(event) { // Even bubbling works on clicking the button, but only on the second try...
     if ($(event.target).is('button[type=submit]')) {
       $.colorbox.resize();
     }
  });
  </code></pre>