2ne 2ne - 1 year ago 98
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 Source

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