CODEWITHSUNDEEP
javascriptjquerycssjquery-masonry
jpruizs
jpruizs

Reputation: 485

jquery masonry toggle visibility issue

I am using Desandro's Masonry Plugin v3.1.2. I am loading multiple content sections from a database which should be displayed with this layout type (different widths and heights; with and without images, etc). I have some buttons on top to toggle the different content rows. However when I hide all the rows and show the selected by the user the masonry stop working. I have to change the browser size to make the boxes get the correct layout again.

Here is a fiddle with the code: http://jsfiddle.net/jpruizs/x66nY/1/

As you can see when you first load the page, the boxes are layed out properly, however when you click on one of the links on top, the boxes are displayed in a single vertical column. 

$(function(){
  // Apply masonry layout to all containers
  var $container = $('.container');
  $container.masonry({
    columnWidth: 50,
    itemSelector: '.activity',
    gutter: 15
  });


  $('.link').click(function(){
    // Hide all visible containers
    $(".container:visible").hide();

    // Get the container to show
    row = $(this).attr('data-row');
    var $container = $("." + row);

    $container.toggle('slow');

    $container.masonry({
        columnWidth: 50,
        itemSelector: '.activity',
        gutter: 15
    }).masonry();
  });

});

If you resize the browser window (or the fiddle panel) you will see that the masonry layout reloads again.

Anyone knows how to fix this issue?

Thanks

Upvotes: 0

Views: 1829

Answers (2)

jpruizs
jpruizs

Reputation: 485

@Parfait thanks.

I was able to fix this issue adding this line before reloading the masonry again on the click event:

$container.style.display = 'block';

Actually this solution was posted by the author on his github issue tracker

Here is the updated working fiddle http://jsfiddle.net/jpruizs/gedav/

Upvotes: 1

Parfait
Parfait

Reputation: 1750

@ If you resize the browser window (or the fiddle panel) you will see that the masonry layout reloads again

$container.masonry({
    columnWidth: 50,
    itemSelector: '.activity',
    isResizeBound: false,
    gutter: 15
});

set isResizeBound to false

http://jsfiddle.net/zksvh/

isResizeBound binds layout only when the Masonry instance is first initialized. You can bind and unbind resize layout afterwards with the bindResize and unbindResize methods.

http://masonry.desandro.com/options.html

Upvotes: 0

Related Questions