Freemasonry plugin: resizing a div will not result in a permutation

Question

You have Freemasonry elements wrapped in a div with a width of 1000 pixels, I have a button for resizing the div to 2000x using jQuery addClass() , the problem is that Freemasonry does not drag elements to fill the extra space of 1000 pixels, I know That resizing works because resizing the browser window results in a permutation.

Freemasonry:

 $(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 the Freemasonry button using the same button, and it seems to work fine, but the problem still exists.

Any tips? I'm at a standstill: /

Answer 1

I believe that you need to run the masonry function when you press the re-size button.

 $("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 }); }); 

Answer 2

From http://masonry.desandro.com/methods.html#reloaditems, calling .masonry('reloadItems') will capture (possibly new) items that match itemSelector and move the bricks, but calling .masonry() will just move elements based on the latest measurements of its elements.

Answer 3

Try to trigger the resize event using jquery:

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

It worked for me!