jQuery Columnizer plugin only working correctly on window resize.

Question

Hi, I'm using the jQuery Columnizer plugin, and I'm running into a weird problem. Using 3 columns, I columnize content from a hidden <div> into a target <div>. It distributes only one paragraph to each of the first two columns and then puts all the remaining paragraphs into the last column.

The strange thing is that it auto-corrects itself when the window is resized. I'm guessing it has something to do with the target <div> resizing since opening a firebug console window also causes it to auto-correct itself. Setting lastNeverTallest:true doesn't seem to do anything.

$('#hidden-about').columnize({ columns: 3, 
                               target: '#interiors',
                               lastNeverTallest: true,
                               doneFunc: function() {
                                   $('#interiors').css('white-space', 'normal');
                                   $('#interiors').fadeIn(200);
                                } 
                             });

Thanks for any suggestions!

Answer 1

Make sure that's it's running after the DOM elements are ready by wrapping it appropriately, like this:

$(function() {  //document.ready shortcut
  $('#hidden-about').columnize({ ... }); 
});
//or...
$(document).ready(function() { 
  $('#hidden-about').columnize({ ... }); 
}); 
//or, if it depends on image sizing, make sure they're loaded with window.load
$(window).load(function() {  //runs after images are loaded
  $('#hidden-about').columnize({ ... }); 
});

If that doesn't resolve the issue, you can manually invoke the event it's bound to re-rendering on, using .resize() like this:

$(window).resize();