Masonry Plugin: Resizing div wont cause reshuffle

Question

Have Masonry items wrapped in 1000px wide div, I have a button to resize the div to 2000x using jQuery's addClass(), problem is Masonry won't reshuffle the items to fill the extra 1000px space, I know the resize works because resizing the browser window causes a reshuffle.

Masonry:

$(function(){
    $('#container').masonry({
        // options
        itemSelector : '.item',
        columnWidth : 240
    });
});

Button:

$("a.button").toggle(function(){
    $(this).addClass("flip");
    $("div#container").fadeOut("fast", function() {
        $(this).fadeIn("fast").addClass("resize");
    });

CSS:

width: 1000px; /* default */
width: 2000px !important; /* on button press */

I tried running ('a').click on the Masonry function using the same button, and it seems to work normally but the problem is still there.

Any advice? I'm stumped :/

Answer 1

From http://masonry.desandro.com/methods.html#reloaditems , calling .masonry('reloadItems') will grab (possibly new) items that match itemSelector and reposition the bricks, but calling .masonry() will just reposition items based on the most recent dimensions of its items.

Answer 2

Try triggering the resize event with jquery:

$(window).trigger('resize');

It worked for me!

Answer 3

I believe you need to run the masonry function agian when your re-size button is clicked.

$("a.button").toggle(function(){
    $(this).addClass("flip");
    $("div#container").fadeOut("fast", function() {
    $(this).fadeIn("fast").addClass("resize");
    // run masonry again
    $('#container').masonry({      
      itemSelector : '.item',
      columnWidth : 240
    });
});