Lukáš Rutar Lukáš Rutar - 3 months ago 13
jQuery Question

Jquery colorbox not resizing properly after $.html()

I have this code in success hook on ajax event:

success: function (data) {
$(loadTarget).html(data.details);
$.colorbox.resize();
}


loadTarget
is div in already opened colorbox.

Problem is that color box will sometimes not resize properly, as if $.html() was asynchronous.

According to this question Resizing colorbox after loading HTML content into a DIV Ajax callback work somehow mysteriously and that they are responsible for this, but I don't understand how that could be a reason if $.html() is in ajax callback too.

Why is that and how to fix it?

Answer

It turned out to be issue of images.

$.html() just inserted img tags, and $.colorbox.resize() happened before images were loaded.

Found two ways to fix

  1. Using jquery Load hook
  2. Setting height property to img that (if known)