CODEWITHSUNDEEP
jquerycssjquery-masonryjquery-isotope
poseid
poseid

Reputation: 7156

How to work with dynamic container in Isotope?

In the context of re-using an Isotope container on different parts of a web application, I need to resize the container. However, after adding and removing a CSS class for small layout, the container is not anymore taking up the full space.

See the JSFiddle: http://jsfiddle.net/mulderp/ptLzx/5/

$container.addClass('small');

This resizes the container as expected.

 $container.removeClass('small');
 $container.isotope('shuffle');

Expected would be to get back the original container. This does not work.

Any clues how to get the setup working?

Upvotes: 0

Views: 414

Answers (1)

Mike
Mike

Reputation: 833

It looks like a timing issue, this tends to happen a lot with Isotope.

If you put a setTimeout() of 1000ms around the shuffle method it works - therefore confirming the issue...

$('#large').click(function(){
    $container.removeClass('small');
    var timer = setTimeout(function(){
        $container.isotope('shuffle');      
    },1000);
});

The timeout is not ideal at all, but it does illustrate that Isotope needs to be finished before it can be updated. I would recommend testing with different timers until you find a nice fit.

I would also recommend using $container.isotope('reLayout') over $container.isotope('shuffle') unless you specifically need to shuffle the items, that method was created for doing exactly this.

Upvotes: 1

Related Questions