CODEWITHSUNDEEP
javascriptjquerycssjquery-isotopejquery-masonry
sardine
sardine

Reputation: 157

jQuery Isotope doesn't rearrange properly after items have been dynamically adjusted

I have an isotope layout and everything - sorting and filtering and general display - works great. But I have to make the isotope items expandable on click. I did this via a span class which is hidden via JavaScript on initial page load but can be toggled via click on a different span class <span class='Point'>.

This works to a certain degree: the text is toggable - but the layout doesn't resize on click, despite me including .isotope('layout'). The specific jQuery code looks as follows: 

   $(".risknotes").hide(); $grid.on( 'click', '.Point', function() {
    $(this).parent().find(".risknotes").toggle(2000);
    $(this).parent().toggleClass('bigger');
     $grid.isotope('layout')
    });

Funny thing is: if I click a filter, or a sort button, everything resizes perfectly. Just not on initial load or click. I made a jsfiddle reproducing the problem: http://jsfiddle.net/3t2fk5aq/

Upvotes: 3

Views: 1364

Answers (1)

takid1412
takid1412

Reputation: 358

Your problem is jquery take a time to finish toggle .ricknotes but isotope relayout instantly. You can use complete option of .toggle() to handle it like this:

$grid.on('click', '.Point', function() {
            $(this)
                .parent()
                .find(".risknotes")
                .toggle({ duration: 200,complete: function(){ $grid.isotope('layout') } });
            $(this)
                .parent()
                .toggleClass('bigger');

        });

Upvotes: 2

Related Questions