CODEWITHSUNDEEP
jquerycsslayoutjquery-masonry
Naota
Naota

Reputation: 668

Masonry Plugin: Resizing div wont cause reshuffle

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 :/

Upvotes: 6

Views: 9496

Answers (3)

frozenkoi
frozenkoi

Reputation: 3248

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.

Upvotes: 8

user1429980
user1429980

Reputation: 7148

Try triggering the resize event with jquery:

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

It worked for me!

Upvotes: -2

buzilla
buzilla

Reputation: 134

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

Upvotes: 10

Related Questions