Define/call a function in isotope onLayout

Question

I'm using http://isotope.metafizzy.co/docs/options.html#onlayout and it says this:

"Similiar to a callback, onLayout is a function that will be triggered after every time an Isotope instance runs through its layout logic."

$('#container').isotope({
   onLayout: function( $elems ) {
    // `this` refers to jQuery object of the container element
    console.log( this.height() );
    // callback provides jQuery object of laid-out item elements
    $elems.css({ background: 'blue' });
    }
});

That means that when "Layout" has finished i can run this:

 $elems.css({ background: 'blue' });

I don't have "$elems" but from what i can understand that means that when "onLayout" has finished i can run what i want and I would like to run this:

$("#container").width(); 
$("#head").animate({ width: newWidth}, "fast");

But how and what is "$elems" inside the "( )" ?

Thanks

Answer 1

You can bind custom events on to elements like so:

$('#container').bind('my_event', function ()
{
    alert('my_event has just fired!');
});

And then call it with .trigger():

$('#container').trigger('my_event');

Using this, you should be able to set up what you want pretty easily, I think.

---

Update:

Instead of calling this code:

$('#container').isotope({
   onLayout: function( $elems ) {
    // `this` refers to jQuery object of the container element
    console.log( this.height() );
    // callback provides jQuery object of laid-out item elements
    $elems.css({ background: 'blue' });
    }
});

Call this:

$('#container').isotope({
   onLayout: function( $elems ) {
        // `this` refers to jQuery object of the container element
        console.log( this.height() );
        // callback provides jQuery object of laid-out item elements
        $elems.css({ background: 'blue' });
        $("#container").width(); 
        $("#head").animate({ width: newWidth}, "fast");
    }
});