trigger alert after jquery isotope filter completes

Question

I have jquery isotope setup and have created some filters. When i create I select a filter, isotope does a nice little animation. I want to trigger an alert at the end of the animation.

This example demostrates the animation that occurs:

http://isotope.metafizzy.co/demos/filtering.html

Any ideas?

Here is the code for the on click of a filter:

$('.filter').on( 'click', 'a', function( event ) {
        event.preventDefault();
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }

        // console.log('hello world');
        var $optionSet = $this.parents('.option-set');
        var group = $optionSet.attr('data-filter-group');
        options.comboFilters[ group ] = $this.attr('data-filter-value');
        $.bbq.pushState( options );

        // COUNT
        var $filtered = $('#isotope-container').data('isotope').$filteredAtoms;
        // get count of all filtered item
        alert($filtered.length);
        // get count of all filtered items that match a selector
        //$filtered.filter('.blue').length;
  });

Solution 1

Since v1.5 (changelog), Isotope provides a callback to do just that; it is described in Isotope's Introduction (just search the page for callback):

Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.

onAnimationFinished = function(){
  // code to be executed after the animation finishes
};

$('#container').isotope({ filter: '.my-selector' }, onAnimationFinished);

For live examples take a look at this jsFiddle which throws an alert when changing a filter via the checkbox inputs or peep Isotope's Callback Test source and search for changeBGColor.

Solution 2

None of them worked for me. Instead, I used what is explained in event sections : http://isotope.metafizzy.co/events.html

function onLayout() {
        // What to do when layout fully rendered
    }
    // bind event listener
    $isotope.isotope( 'on', 'layoutComplete', onLayout ); 

Solution 3

This didn't work for me using Isotope 2.0. I'm also not using jQuery so perhaps the usage is different with vanilla JS.

Either way, if anyone runs into this problme, I got it to work using 2.0's event callback: iso.on('layoutComplete', myFunction).

More info on Isotope events: http://isotope.metafizzy.co/events.html

Solution 4

None of these worked for me. I'm not sure if it's the latest version of Isotope, and/or jQuery 2.1.1. Regardless, I found a solution on github:

$isotope.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", myFunction);

View more solutions

Comments

[Johan]

This might help: stackoverflow.com/questions/5433862/…