File: D:/web/expressmusic/isotope-docs/isotope-docs/events.html
<!doctype html>
<html class="export">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="filter & sort magical layouts">
<title>Isotope · Events</title>
<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="css/isotope-docs.css" media="screen">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@metafizzyco">
<meta name="twitter:url" content="http://isotope.metafizzy.co/events.html">
<meta name="twitter:title" content="Isotope Events">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--events" data-page="events">
<div class="nav">
<h1 class="nav__title"><a href=".">Isotope</a></h1>
<ol class="site-nav">
<li class="site-nav__item site-nav__item--filtering">
<a class="site-nav__item__link" href="filtering.html">Filtering</a></li>
<li class="site-nav__item site-nav__item--sorting">
<a class="site-nav__item__link" href="sorting.html">Sorting</a></li>
<li class="site-nav__item site-nav__item--layout ">
<a class="site-nav__item__link" href="layout.html">Layout</a>
</li>
<li class="site-nav__item site-nav__item--layout-modes sub-nav-parent">
<a class="site-nav__item__link" href="layout-modes.html">Layout modes</a>
<ul class="sub-nav">
<li class="sub-nav__item sub-nav__item--masonry">
<a class="sub-nav__item__link" href="layout-modes/masonry.html">masonry</a></li>
<li class="sub-nav__item sub-nav__item--fitrows">
<a class="sub-nav__item__link" href="layout-modes/fitrows.html">fitRows</a></li>
<li class="sub-nav__item sub-nav__item--vertical">
<a class="sub-nav__item__link" href="layout-modes/vertical.html">vertical</a></li>
<li class="sub-nav__item sub-nav__item--packery">
<a class="sub-nav__item__link" href="layout-modes/packery.html">packery</a></li>
<li class="sub-nav__item sub-nav__item--cellsbyrow">
<a class="sub-nav__item__link" href="layout-modes/cellsbyrow.html">cellsByRow</a></li>
<li class="sub-nav__item sub-nav__item--masonryhorizontal">
<a class="sub-nav__item__link" href="layout-modes/masonryhorizontal.html">masonryHorizontal</a></li>
<li class="sub-nav__item sub-nav__item--fitcolumns">
<a class="sub-nav__item__link" href="layout-modes/fitcolumns.html">fitColumns</a></li>
<li class="sub-nav__item sub-nav__item--cellsbycolumn">
<a class="sub-nav__item__link" href="layout-modes/cellsbycolumn.html">cellsByColumn</a></li>
<li class="sub-nav__item sub-nav__item--horizontal">
<a class="sub-nav__item__link" href="layout-modes/horizontal.html">horizontal</a></li>
</ul>
</li>
<li class="site-nav__item site-nav__item--options">
<a class="site-nav__item__link" href="options.html">Options</a></li>
<li class="site-nav__item site-nav__item--methods">
<a class="site-nav__item__link" href="methods.html">Methods</a></li>
<li class="site-nav__item site-nav__item--events">
<a class="site-nav__item__link" href="events.html">Events</a></li>
<li class="site-nav__item site-nav__item--license">
<a class="site-nav__item__link" href="license.html">License</a></li>
<li class="site-nav__item site-nav__item--appendix">
<a class="site-nav__item__link" href="appendix.html">Appendix</a></li>
<li class="site-nav__item site-nav__item--faq">
<a class="site-nav__item__link" href="faq.html">FAQ</a></li>
</ol>
<ul class="page-nav" data-js-module="page-nav">
<li class="page-nav__item page-nav__item--h3"><a href="#arrangecomplete">arrangeComplete</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layoutcomplete">layoutComplete</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#removecomplete">removeComplete</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>Events</h1>
<div id="notification"></div>
<p>Bind listeners to events with the <a href="methods.html#on">on</a> and <a href="methods.html#off">off</a> methods.</p>
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({...});
<span class="function"><span class="keyword">function</span> <span class="title">onArrange</span><span class="params">()</span> </span>{
<span class="built_in">console</span>.log(<span class="string">'layout done'</span>);
}
<span class="comment">// bind event listener</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'arrangeComplete'</span>, onArrange );
<span class="comment">// un-bind event listener</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'off'</span>, <span class="string">'arrangeComplete'</span>, onArrange );
<span class="comment">// bind event listener to be triggered just once</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'once'</span>, <span class="string">'arrangeComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="built_in">console</span>.log(<span class="string">'arrange done, just this one time'</span>);
});
</code></pre>
<h3 id="arrangecomplete">arrangeComplete</h3>
<p>Triggered after <a href="http://localhost/isotope-docs/build/methods.html#arrange-isotope"><code>.isotope({...})</code>/<code>arrange</code></a>, when all layout, hide, and reveal transitions have completed.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'arrangeComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">( filteredItems )</span> </span>{} )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.on( <span class="string">'arrangeComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">( filteredItems )</span> </span>{} )
</code></pre>
<p class="variable">
<code class="variable__code">filteredItems</code>
<span class="variable__type"><i>Array</i> of <i>Isotope.Item</i>s</span>
<span class="variable__description">Items that are visible</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'arrangeComplete'</span>,
<span class="function"><span class="keyword">function</span><span class="params">( filteredItems )</span> </span>{
<span class="built_in">console</span>.log( <span class="string">'Isotope arrange completed on '</span> +
filteredItems.length + <span class="string">' items'</span> );
}
);
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="arrange-complete-demo">
<div class="button-group js-radio-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".grid-item--width2">width 2</button>
<button class="button" data-filter=".grid-item--height2">height 2</button>
</div>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/pvXxRN">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="layoutcomplete">layoutComplete</h3>
<p>Triggered after a layout and all positioning transitions have been completed.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'layoutComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">( laidOutItems )</span> </span>{} )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.on( <span class="string">'layoutComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">( laidOutItems )</span> </span>{} )
</code></pre>
<p class="variable">
<code class="variable__code">laidOutItems</code>
<span class="variable__type"><i>Array</i> of <i>Isotope.Item</i>s</span>
<span class="variable__description">Items that were laid out</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'layoutComplete'</span>,
<span class="function"><span class="keyword">function</span><span class="params">( laidOutItems )</span> </span>{
<span class="built_in">console</span>.log( <span class="string">'Isotope layout completed on '</span> +
laidOutItems.length + <span class="string">' items'</span> );
}
);
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="layout-complete-demo">
<p class="instruction">Resize browser or click item to toggle size</p>
<div class="grid grid--clickable">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/scajv">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="removecomplete">removeComplete</h3>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'removeComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">( removedItems )</span> </span>{} )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.on( <span class="string">'removeComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">( removedItems )</span> </span>{ <span class="comment">//...</span>
</code></pre>
<p>Triggered after an item element has been removed.</p>
<p class="variable">
<code class="variable__code">removedItems</code>
<span class="variable__type"><i>Array</i> of <i>Isotope.Item</i>s</span>
<span class="variable__description">Items that were removed</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'removeComplete'</span>,
<span class="function"><span class="keyword">function</span><span class="params">( removedItems )</span> </span>{
notify( <span class="string">'Removed '</span> + removedItems.length + <span class="string">' items'</span> );
}
);
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="remove-complete-demo">
<p class="instruction">Click items to remove</p>
<div class="grid grid--clickable">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/wErky">Edit this demo on CodePen</a>
</p>
</div>
</div>
</div>
</div>
<div class="site-footer">
<div class="primary-content">
<p class="footer-copy">Follow <a href="https://twitter.com/metafizzyco">@metafizzyco on Twitter for Isotope updates</a></p>
</div>
<div class="site-footer__brand">
<a class="site-footer__brand__logo" href="http://metafizzy.co">M<span class="etafizzy">etafizzy</span></a>
<span class="site-footer__brand__copyright">© 2011–2015</span>
</div>
</div>
<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script>
<script src="js/isotope-docs.min.js"></script>
<!-- Google Analytics - Remove this if you copy/pasted this page -->
<script>
// Google Analytics
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-58739927-3','auto');ga('send','pageview');
</script>
</body>
</html>