CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjquery-isotope
David
David

Reputation: 4767

trigger alert after jquery isotope filter completes

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;
  });

Upvotes: 2

Views: 12024

Answers (4)

arrow
arrow

Reputation: 174

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);

Upvotes: 1

nbonniot
nbonniot

Reputation: 1126

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 );

Upvotes: 6

mhkeller
mhkeller

Reputation: 712

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

Upvotes: 3

fk_
fk_

Reputation: 1436

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.

Upvotes: 10

Related Questions