Callback for jquery plugin Isotope

Question

I\'m using isotope ( http://isotope.metafizzy.co ) with expandable items, and i would like to use ScrollTo so that i can automatically scroll to the newly expanded item..

Answer 1

allright,

sneaking in the isotope code, i found that the animation options are passed directly to the animate jquery method, so i added the complete callback to these options:

animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: iwannascroll
}

then i was able to filter my expanded object and scroll to it :

            function iwannascroll(){
                var target = $(this);
                if (target.hasClass('expanded'))
                    $.scrollTo(target, 800);                
            }

obviously it will work only if you use the jQuery animate method for the animation.. If anyone knows a better and "universal" way, i would love to hear it ;)

Answer 2

I recently tried to implement your idea with the animationOptions/complete-function but didn't get it to work properly. that's when I came up with this one, getting the animation done by directly appending these jquery commands to the isotope call..

first load isotope for the layout/masonry display:

container.isotope({
    itemSelector: '.selector',
    masonry: {
        columnWidth: smallWidth,
    }
}); 

..and then in a second call include the reLayout/resizing inside a click function:

$('.selector').click(function(){
var $this = $(this),
    tileStyle = $this.hasClass('large') ? { width: smallWidth } : { width: largeWidth };
$this.toggleClass('large');     
$this.find('.selector').stop().animate( tileStyle );   

    // Here we search for the enlarged isotope-selector and apply the scroll
    // function to it...the item position is available to jquery at this point.
$container.isotope( 'reLayout' ).find($this).each(function() {
    var target = $(this);
    if (target.hasClass('large'))
                $.scrollTo(target, 800,{offset:-50});
    });
});

... I know the code isn't perfect and the auto scrolling is only working on the first clicked item, but not anymore when there's already one or more enlarged items. maybe somebody has an idea on how to extend this.

Answer 3

I was able to tie into the webkitTransitionEnd and transitionend events of my container along with the animationOptions.complete callback to get the desired results across browsers. You can use a common function which gets executed by these 3 and put any needed logic in there.

Answer 4

The callback for the Isotope reLayout fires too soon indeed.

I used bind to detect when the animation ended.

It works works for both the jquery and css animation engine.

$("#isotope").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){

});

ps: this has to be placed after the regular isotope code of course.

Greetings, Manuel

Answer 5

i use this hack for the callback. Maybe it works for you to.

setTimeout(function(){
        $container.isotope('reLayout');
    }, 1000);