How to work with dynamic container in Isotope?


Tags: jquery,css,jquery-masonry,jquery-isotope

Problem :

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?



Solution :

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.


    CSS Howto..

    How to make a GWT-like CaptionPanel manually

    how to position div with css and force text to wrap around

    How to include several nested CSS classes into rails .erb file?

    How to efficiently update css on multiple selector classes in jquery

    How to specify another font size for IE7 and IE8

    How to put all Array values in $_GET[]

    How to change the Color of dynamically created divs on click event, who are having same class?

    Framework7->CSS: How to make tabs under popover scrollable

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    Want to override Bootstrap, but how to avoid the use of !important?

    CSS: How to get two DIVs side by side with automatic height, to the height of their container?

    How to make the slider move right and left alternatively

    how to remove the border-right for a last child in css

    How to add CSS Transition for button sliding

    How to reset input element style

    How to do line animation using CSS and SVG

    how to avoid the ID name in css file

    How to make JqueryUi Slider vertical-align middle?

    How to keep CSS class on menu item with dropdown

    How do I change background color of li elements

    How to center horizontally a div within an li in CSS

    How to switch between custom css layout and bootstrap css layout

    How to GPU accelerate CSS transform?

    How to Target Twitter Bootstrap <768px and 480px Breakpoints

    css code how to change active navigation button color

    toggleClass: How does this CSS work?

    How to change css dynamic by javascript

    How to display highlighted sprite

    how can I combine button with input?

    How to align horizontally nav bar in css?