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

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
    });
});