CODEWITHSUNDEEP
jquery
user1184100
user1184100

Reputation: 6894

Reorganize all element's after hiding a element using jquery masonry

I'm hiding a li and after hiding it there is a gap left in the html and i want to reload masonry and re-arrange the contents. I tried .masonry( 'reload' ) but i didn't work . Any help

Fiddle http://jsfiddle.net/emtBX/1/

JS

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

                isAnimated: true,
                  animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                  }
              });

              $('#butn1').click(function() {

                    $('#container ul li').eq(2).hide();
                    $('#container').masonry('reload');

              });
            });

Upvotes: 9

Views: 16206

Answers (3)

St3ph
St3ph

Reputation: 2290

To answer Lewis comment and provide answer to people looking for solution in v3, in v3 hide method no longer exist you just have to use the hide() method of jquery and after you trigger a masonry layout. So idea is for hidding elements :

$('.something-to-hide').each(function(){
   $(this).hide();
});
$('.grid').masonry('layout'); //we assume grid is your class use to masonry container.

Then to show back the hidden elements :

$('.class-for-all-elements').show()
$('.grid').masonry('layout');

In my case I add to make some search before to hide that is why I used a each() function.

Stéphane

Upvotes: 4

mountriv99
mountriv99

Reputation: 918

jquery masonry itself has a method called "hide" (http://masonry.desandro.com/methods.html#hide)

use it like this:

$('#container').masonry( 'hide', $('#container ul li').eq(2) ).masonry();

the last masonry() call does what you want: "reload" the tiles

Upvotes: 3

anderssonola
anderssonola

Reputation: 2195

You can hide the li-element and remove the .item class to reorder the elements, http://jsfiddle.net/emtBX/11/

$('#container ul li').eq(2)
    .css({'visibility': 'hidden', 'display': 'none'})
    .removeClass("item masonry-brick");

Upvotes: 9

Related Questions