2ne 2ne - 6 months ago 37
jQuery Question

Isotope - reLayout on container width change

My container is 800px. This space is occupied with the portfolio container. When then button is clicked to enable the filter menu then the portfolio container is told to have a width of 610px which leaves the remainder of the space for the filter menu. I am using the reLayout call to try and update the items but it only seems to work when the filters menu is disabled. Can anyone see where I am going wrong here? Any help would be much appreciated.

See below for the snippet of my button code. View DEMO to see all code.

$('button').click(function () {
filtertoggle.toggleClass("filter-active");
$container.isotope('reLayout');
});

Answer

Try this:

  $('button').click(function(){
    filtertoggle.toggleClass("filter-active");
    setTimeout(function(){
            $container.isotope('reLayout');
        }, filtertoggle.hasClass("filter-active") ? 100: 755);
  });

example: http://codepen.io/anon/pen/nDmyB