File: D:/web/expressmusic/isotope-docs/isotope-docs/methods.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 · Methods</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/methods.html">
<meta name="twitter:title" content="Isotope Methods">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--methods" data-page="methods">
<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--h2"><a href="#arranging-and-layout">Arranging and layout</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#arrange-isotope">arrange / .isotope()</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layout">layout</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layoutitems">layoutItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#updatesortdata">updateSortData</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#shuffle">shuffle</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#stamp">stamp</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#unstamp">unstamp</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#hide">hide</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#reveal">reveal</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#adding-and-removing-items">Adding and removing items</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#appended">appended</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#prepended">prepended</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#insert">insert</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#additems">addItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#remove">remove</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#events">Events</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#on">on</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#off">off</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#once">once</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#utilities">Utilities</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#reloaditems">reloadItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#destroy">destroy</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#getitemelements">getItemElements</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#jquery-fn-data-isotope">jQuery.fn.data('isotope')</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#isotope-data">Isotope.data</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>Methods</h1>
<p>Methods are actions done by Isotope instances.</p>
<p>With jQuery, methods follow the jQuery UI pattern <code>.isotope( <span class="string">'methodName'</span> <span class="comment">/* arguments */</span> )</code>.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope()
.append( elem )
.isotope( <span class="string">'appended'</span>, elem )
.isotope(<span class="string">'layout'</span>);
</code></pre>
<div class="call-out">
<p>jQuery chaining is broken by methods that return values: (i.e.
<a href="#getitemelements"><code>getItemElements</code></a>,
<a href="#getitem"><code>getItem</code></a>,
<a href="#on"><code>on</code></a>, and
<a href="#off"><code>off</code></a>).</p>
</div>
<p>Vanilla JavaScript methods look like <code>isotope.methodName( <span class="comment">/* arguments */</span> )</code>. Unlike jQuery methods, they cannot be chained together.</p>
<pre><code class="js"><span class="comment">// vanilla JS</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>(<span class="string">'.grid'</span>);
container.appendChild( elem );
<span class="isotope_var">iso</span>.appended( elem );
<span class="isotope_var">iso</span>.layout();
</code></pre>
<h2 id="arranging-and-layout">Arranging and layout</h2>
<h3 id="arrange-isotope">arrange / .isotope()</h3>
<p>Filters, sorts, and lays out items. <code>arrange</code> is the principle method of Isotope. It is the default method with jQuery <code>.isotope()</code>. Pass in <a href="options.html"><code>options</code></a> to apply filtering and sorting.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( options )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.arrange( options )
</code></pre>
<p class="variable">
<code class="variable__code">options</code>
<span class="variable__type">Object</span>
</p>
<pre><code class="js"><span class="comment">// filter metal, sort by number, and layout</span>
<span class="jquery_var">$grid</span>.isotope({
filter: <span class="string">'.metal'</span>,
sortBy: <span class="string">'number'</span>
});
<span class="comment">// triggering method without options will</span>
<span class="comment">// re-apply filtering, sorting, and layout</span>
<span class="jquery_var">$grid</span>.isotope();
</code></pre>
<pre><code class="js"><span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.arrange({
filter: <span class="string">'.metal'</span>,
sortBy: <span class="string">'number'</span>
})
<span class="comment">// re-apply filtering, sorting, and layout</span>
<span class="isotope_var">iso</span>.arrange();
</code></pre>
<h3 id="layout">layout</h3>
<p>Lays out all item elements. <code>layout</code> is useful when an item has changed size, and all items need to be laid out again. <code>layout</code> does not apply filtering or sorting.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope(<span class="string">'layout'</span>)
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.layout()
</code></pre>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
masonry: {
columnWidth: <span class="number">50</span>
}
});
<span class="comment">// change size of item by toggling gigante class</span>
<span class="jquery_var">$grid</span>.on( <span class="string">'click'</span>, <span class="string">'.grid-item'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
$(<span class="keyword">this</span>).toggleClass(<span class="string">'gigante'</span>);
<span class="comment">// trigger layout after item size changes</span>
<span class="jquery_var">$grid</span>.isotope(<span class="string">'layout'</span>);
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="layout-demo">
<p class="instruction">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/qzhIb">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="layoutitems">layoutItems</h3>
<p>Lays out specified items.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'layoutItems'</span>, items, isStill )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.layoutItems( items, isStill )
</code></pre>
<p class="variable">
<code class="variable__code">items</code>
<span class="variable__type"><i>Array</i> of <i>Isotope.Item</i>s</span>
</p>
<p class="variable">
<code class="variable__code">isStill</code>
<span class="variable__type"><i>Boolean</i></span>
<span class="variable__description">Disables transitions</span>
</p>
<h3 id="updatesortdata">updateSortData</h3>
<p>Updates sort data.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'updateSortData'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.updateSortData( elements )
</code></pre>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
<span class="variable__description">Optional</span>
</p>
<h3 id="shuffle">shuffle</h3>
<p>Shuffles items in a random order.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope(<span class="string">'shuffle'</span>)
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.shuffle()
</code></pre>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">'.shuffle-button'</span>).on( <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="jquery_var">$grid</span>.isotope(<span class="string">'shuffle'</span>);
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="shuffle-demo">
<button class="button shuffle-button">Shuffle</button>
<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/EluFg">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="stamp">stamp</h3>
<p>Stamps elements in the layout. Isotope will lay out item elements <em>around</em> stamped elements.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'stamp'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.stamp( elements )
</code></pre>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<p>Stamping is only supported by some layout modes: <a href="layout-modes/masonry.html">masonry</a>, <a href="layout-modes/packery.html">packery</a> and <a href="layout-modes/masonryhorizontal.html">masonryhorizontal</a>.</p>
<p>Set <a href="options.html#itemselector"><code>itemSelector</code></a> so that stamps do not get used as layout items.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
<span class="comment">// specify itemSelector so stamps do get laid out</span>
itemSelector: <span class="string">'.grid-item'</span>,
masonry: {
columnWidth: <span class="number">50</span>
}
});
<span class="keyword">var</span> $stampElem = $demo.find(<span class="string">'.stamp'</span>);
<span class="keyword">var</span> isStamped = <span class="literal">false</span>;
$(<span class="string">'.stamp-button'</span>).on( <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// stamp or unstamp element</span>
<span class="keyword">if</span> ( isStamped ) {
<span class="jquery_var">$grid</span>.isotope( <span class="string">'unstamp'</span>, $stampElem );
} <span class="keyword">else</span> {
<span class="jquery_var">$grid</span>.isotope( <span class="string">'stamp'</span>, $stampElem );
}
<span class="comment">// trigger layout</span>
<span class="jquery_var">$grid</span>.isotope(<span class="string">'layout'</span>);
<span class="comment">// set flag</span>
isStamped = !isStamped;
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="stamp-methods-demo">
<button class="button stamp-button">Toggle stamped</button>
<div class="grid grid--has-stamp grid--stamp-methods-demo">
<div class="stamp stamp--stamp-methods-demo"></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 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/wguvo">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="unstamp">unstamp</h3>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'unstamp'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.unstamp( elements )
</code></pre>
<p>Un-stamps elements in the layout, so that Isotope will no longer layout item elements around them. <a href="#stamp">See demo above</a>.</p>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<h3 id="hide">hide</h3>
<p>Hide items.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'hide'</span>, items )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.hide( items )
</code></pre>
<p class="variable">
<code class="variable__code">items</code>
<span class="variable__type"><i>Array</i> of <i>Isotope.Item</i>s</span>
</p>
<h3 id="reveal">reveal</h3>
<p>Reveals hidden items.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope( <span class="string">'reveal'</span>, items )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.reveal( items )
</code></pre>
<p class="variable">
<code class="variable__code">items</code>
<span class="variable__type"><i>Array</i> of <i>Isotope.Item</i>s</span>
</p>
<h2 id="adding-and-removing-items">Adding and removing items</h2>
<h3 id="appended">appended</h3>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'appended'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.appended( elements )
</code></pre>
<p>Adds and lays out newly appended item elements to the end of the layout.</p>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">'.append-button'</span>).on( <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// create new item elements</span>
<span class="keyword">var</span> $items = $(<span class="string">'<div class="grid-item">...</div>'</span>);
<span class="comment">// append items to grid</span>
<span class="jquery_var">$grid</span>.append( $items )
<span class="comment">// add and lay out newly appended items</span>
.isotope( <span class="string">'appended'</span>, $items );
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="appended-demo">
<button class="button append-button">Append items</button>
<div class="grid">
<div class="grid-item grid-item--width3"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/ECKiw">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="prepended">prepended</h3>
<p>Adds and lays out newly prepended item elements at the beginning of layout.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="isotope_var">iso</span>.prepended( elements )
<span class="comment">// vanilla JS</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'prepended'</span>, elements )
</code></pre>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">'.prepend-button'</span>).on( <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// create new item elements</span>
<span class="keyword">var</span> $items = $(<span class="string">'<div class="grid-item">...</div>'</span>);
<span class="comment">// prepend items to grid</span>
<span class="jquery_var">$grid</span>.prepend( $items )
<span class="comment">// add and lay out newly prepended items</span>
.isotope( <span class="string">'prepended'</span>, $items );
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="prepended-demo">
<button class="button prepend-button">Prepend items</button>
<div class="grid">
<div class="grid-item grid-item--width3"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/fuwdk">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="insert">insert</h3>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'insert'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.insert( elements )
</code></pre>
<p>Appends elements into container element, adds elements as items, and arranges items with filtering and sorting.</p>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'grid'</span>).isotope({
masonry: {
columnWidth: <span class="number">50</span>
},
<span class="comment">// filter items with odd numbers</span>
filter: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="keyword">var</span> number = $( <span class="keyword">this</span> ).find(<span class="string">'.number'</span>).text();
<span class="keyword">return</span> <span class="built_in">parseInt</span>( number, <span class="number">10</span> ) % <span class="number">2</span>;
},
<span class="comment">// sort by number</span>
sortBy: <span class="string">'number'</span>,
getSortData: {
<span class="string">'number'</span>: <span class="string">'.number parseInt'</span>
}
});
$(<span class="string">'.insert-button'</span>).on( <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// create new item elements</span>
<span class="keyword">var</span> elems = [];
<span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="number">3</span>; i++ ) {
<span class="keyword">var</span> $elem = $(<span class="string">'<div class="grid-item" />'</span>);
<span class="comment">// set number</span>
<span class="keyword">var</span> num = <span class="built_in">Math</span>.floor( <span class="built_in">Math</span>.random() * <span class="number">100</span> );
$elem.append( <span class="string">'<p class="number">'</span> + num + <span class="string">'</p>'</span> );
elems.push( $elem[<span class="number">0</span>] );
}
<span class="comment">// insert new elements</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'insert'</span>, elems );
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="insert-demo">
<button class="button insert-button">Insert items</button>
<div class="grid">
<div class="grid-item grid-item--width3"><p class="number">59</p></div>
<div class="grid-item grid-item--height3"><p class="number">41</p></div>
<div class="grid-item grid-item--width2"><p class="number">93</p></div>
<div class="grid-item"><p class="number">5</p></div>
<div class="grid-item grid-item--height2"><p class="number">17</p></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/byqcz">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="additems">addItems</h3>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'addItems'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.addItems( elements )
</code></pre>
<p>Adds item elements to the Isotope instance. <code>addItems</code> does not lay out items like <a href="#appended"><code>appended</code></a>, <a href="#prepended"><code>prepended</code></a>, or <a href="#insert"><code>insert</code></a>.</p>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<h3 id="remove">remove</h3>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'remove'</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.remove( elements )
</code></pre>
<p>Removes elements from the Isotope instance and DOM.</p>
<p class="variable">
<code class="variable__code">elements</code>
<span class="variable__type">
<i>Element</i>,
<i>jQuery</i> Object,
<i>NodeList</i>, or
<i>Array</i> of Elements
</span>
</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.on( <span class="string">'click'</span>, <span class="string">'.grid-item'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// remove clicked element</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'remove'</span>, <span class="keyword">this</span> )
<span class="comment">// layout remaining item elements</span>
.isotope(<span class="string">'layout'</span>);
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="remove-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/fHkwt">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h2 id="events">Events</h2>
<h3 id="on">on</h3>
<p>Adds an <a href="events.html">Isotope event</a> listener.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.on( eventName, listener )
</code></pre>
<p class="variable">
<code class="variable__code">eventName</code>
<span class="variable__type"><i>String</i></span>
<span class="variable__description">Name of an <a href="events.html">Isotope event</a></span>
</p>
<p class="variable">
<code class="variable__code">listener</code>
<span class="variable__type"><i>Function</i></span>
</p>
<h3 id="off">off</h3>
<p>Removes an <a href="events.html">Isotope event</a> listener.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="jquery_var">$grid</span>.isotope( <span class="string">'off'</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.off( eventName, listener )
</code></pre>
<p class="variable">
<code class="variable__code">eventName</code>
<span class="variable__type"><i>String</i></span>
<span class="variable__description">Name of an <a href="events.html">Isotope event</a></span>
</p>
<p class="variable">
<code class="variable__code">listener</code>
<span class="variable__type"><i>Function</i></span>
</p>
<h3 id="once">once</h3>
<p>Adds an <a href="events.html">Isotope event</a> listener to be triggered just once.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="jquery_var">$grid</span>.isotope( <span class="string">'once'</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.once( eventName, listener )
</code></pre>
<p class="variable">
<code class="variable__code">eventName</code>
<span class="variable__type"><i>String</i></span>
<span class="variable__description">Name of an <a href="events.html">Isotope event</a></span>
</p>
<p class="variable">
<code class="variable__code">listener</code>
<span class="variable__type"><i>Function</i></span>
</p>
<pre><code class="js"><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 is complete, just once'</span>)
})
</code></pre>
<h2 id="utilities">Utilities</h2>
<h3 id="reloaditems">reloadItems</h3>
<p>Recollects all item elements.</p>
<p>For frameworks like Angular and React, <code>reloadItems</code> may be useful to apply changes to the DOM to Isotope.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope(<span class="string">'reloadItems'</span>)
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.reloadItems()
</code></pre>
<h3 id="destroy">destroy</h3>
<p>Removes the Isotope functionality completely. <code>destroy</code> will return the element back to its pre-initialized state.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.isotope(<span class="string">'destroy'</span>)
<span class="comment">// vanilla JS</span>
<span class="isotope_var">iso</span>.destroy()
</code></pre>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> isoOptions = {
masonry: {
columnWidth: <span class="number">50</span>
}
};
<span class="comment">// initialize Isotope</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope( isoOptions );
<span class="keyword">var</span> isActive = <span class="literal">true</span>;
$(<span class="string">'.toggle-button'</span>).on( <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="keyword">if</span> ( isActive ) {
<span class="jquery_var">$grid</span>.isotope(<span class="string">'destroy'</span>); <span class="comment">// destroy</span>
} <span class="keyword">else</span> {
<span class="jquery_var">$grid</span>.isotope( isoOptions ); <span class="comment">// re-initialize</span>
}
<span class="comment">// set flag</span>
isActive = !isActive;
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="destroy-demo">
<button class="button toggle-button">Toggle Isotope</button>
<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/pcjgk">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="getitemelements">getItemElements</h3>
<p>Returns an array of item elements.</p>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> elems = <span class="jquery_var">$grid</span>.isotope(<span class="string">'getItemElements'</span>)
<span class="comment">// vanilla JS</span>
<span class="keyword">var</span> elems = <span class="isotope_var">iso</span>.getItemElements()
</code></pre>
<p class="variable">
<code class="variable__code">elems</code>
<span class="variable__type"><i>Array</i> of <i>Element</i>s</span>
</p>
<h3 id="jquery-fn-data-isotope">jQuery.fn.data('isotope')</h3>
<p>Get the Isotope instance from a jQuery object. Isotope instances are useful to access Isotope properties.</p>
<pre><code class="js"><span class="keyword">var</span> <span class="isotope_var">iso</span> = $(<span class="string">'.grid'</span>).data(<span class="string">'isotope'</span>)
<span class="comment">// access Isotope properties</span>
<span class="built_in">console</span>.log( <span class="isotope_var">iso</span>.filteredItems.length + <span class="string">' filtered items'</span> )
</code></pre>
<h3 id="isotope-data">Isotope.data</h3>
<p>Get the Isotope instance via its element. <code>Isotope.data()</code> is useful for getting the Isotope instance in JavaScript, after it has been initalized in HTML.</p>
<pre><code class="js"><span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="isotope_keyword">Isotope</span>.data( element )
</code></pre>
<p class="variable">
<code class="variable__code">element</code>
<span class="variable__type"><i>Element</i> or Selector <i>String</i></span>
</p>
<p class="variable">
<code class="variable__code">iso</code>
<span class="variable__type"><i>Isotope</i></span>
</p>
<pre><code class="html"><span class="comment"><!-- init Isotope in HTML --></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid js-isotope"</span> <span class="attribute">data-isotope-options</span>=<span class="value">'{...}'</span>></span>...<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<pre><code class="js"><span class="comment">// jQuery</span>
<span class="comment">// pass in the element, $element[0], not the jQuery object</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="isotope_keyword">Isotope</span>.data( $(<span class="string">'.grid'</span>)[<span class="number">0</span>] )
<span class="comment">// vanilla JS</span>
<span class="comment">// using an element</span>
<span class="keyword">var</span> grid = <span class="built_in">document</span>.querySelector(<span class="string">'.grid'</span>)
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="isotope_keyword">Isotope</span>.data( grid )
<span class="comment">// using a selector string</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="isotope_keyword">Isotope</span>.data(<span class="string">'.grid'</span>)
</code></pre>
</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>