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..

I first tried to use the callback with the reLayout method, something like:

container.isotope('reLayout', iwannascroll(origin));

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}

origin being a variable where i put "this" from the click handler.
Unfortunately, i always get the old position of the object..

Actually i'm not sure if the callback is called too soon or if i'm unable to understand how storing my jQuery object makes it more like a copy or a "pointer" ;-)

Any thought ?

EDIT : i am now sure that the callback is called before the end of the animation, so my question would be : how can i now the animation has finished ?

score 7 · Answer 1 · answered Mar 25 '11 at 15:18

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

i am looking for callback, where would you place this blok of code? `animationOptions: { duration: 4000, easing: 'easeInOutQuad', queue: false, complete: iwannascroll } ` — t q, Oct 22 '12 at 18:10

score 5 · Accepted Answer · answered May 21 '13 at 20:41

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

score 2 · Answer 3 · answered May 10 '13 at 13:04

2

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

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

answered May 10 '13 at 13:04

Adem Ak

55
8

score 2 · Answer 4 · answered Jul 01 '11 at 12:22

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.

score 1 · Answer 5 · answered Aug 02 '11 at 13:58

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.

Callback for jquery plugin Isotope

5 Answers5

Linked