CODEWITHSUNDEEP
javascriptjquerycssjquery-isotope
EugenSunic
EugenSunic

Reputation: 13693

How to completely remove/disable isotope after animation finishes?

I'm using isotope js library to give some sorting animation to my div objects. Everything is fine until I preform some other action that I've programmed before that used to work until I applied isotope.js.

The problem is that the container div on which I'm applying isotope is affected by isotope. This affected div prevents me to make some actions that I programmed before.

Briefly, how do I remove the effects of isotope? How do I get rid of it?

Here is my fiddle, after the event occurs I would like the disable action to happen:

Code:

 var $container = $('#container').isotope({
    itemSelector: '.item',
    isResizeBound: false,
    getSortData: {
        weight: function (itemElem) {
            var weight = $(itemElem).find('.weight').text();
            return parseFloat(weight.replace(/[\(\)]/g, ''));
        }
    }
});
// bind sort button click
$('.button').click(function () {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({
        sortBy: sortByValue
    });
});
$container.isotope('on', 'arrangeComplete', function () {
    alert('arrange is complete'); 
    //remove isotope effects completly, disable it somehow,
});

Upvotes: 0

Views: 1359

Answers (1)

Macsupport
Macsupport

Reputation: 5444

Instead of removing isotope, try this, jsfiddle:

 $(".buttonz").click(function () {
 var $newItems = $('<div class="item"><p class="weight">7</p></div>');
 $('#container').prepend( $newItems).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });

 });

Upvotes: 1

Related Questions