开发者

jQuery Columnizer plugin only working correctly on window resize

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!


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();
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜