File: D:/web/expressmusic/isotope-docs/isotope-docs/faq.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 · FAQ</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/faq.html">
<meta name="twitter:title" content="Isotope FAQ">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--faq" data-page="faq">
<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="#how-do-i-fix-overlapping-item-elements">How do I fix overlapping item elements?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#what-is-isotope-s-browser-support">What is Isotope’s browser support?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#what-is-the-difference-between-isotope-masonry-and-packery">What is the difference between Isotope, Masonry, and Packery?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#the-first-item-breaks-the-grid">The first item breaks the grid!</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#how-can-i-access-filtered-items-in-current-order">How can I access filtered items in current order?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#error-cannot-call-methods-on-isotope-prior-to-initialization-attempted-to-call-___">Error: “cannot call methods on isotope prior to initialization; attempted to call '___'”</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>FAQ</h1>
<h2 id="how-do-i-fix-overlapping-item-elements">How do I fix overlapping item elements?</h2>
<p>If your layout has images, you probably need to use <a href="layout.html#imagesloaded">imagesLoaded</a>.</p>
<p>Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, <a href="appendix.html#web-fonts">web fonts</a>, embedded buttons. To fix it, you need to initialize or <a href="methods.html#layout"><code>layout</code></a> after all the items have their proper size.</p>
<h2 id="what-is-isotope-s-browser-support">What is Isotope’s browser support?</h2>
<p>Isotope works in IE8+ and modern browsers, including mobile browsers on iOS and Android.</p>
<h2 id="what-is-the-difference-between-isotope-masonry-and-packery">What is the difference between Isotope, Masonry, and Packery?</h2>
<p>Isotope, <a href="http://masonry.desandro.com">Masonry</a>, and <a href="http://packery.metafizzy.co">Packery</a> are all similar in that they are layout libraries. Many of their options and methods are the same.</p>
<p>Masonry does cascading grid “masonry” layouts. Packery does bin-packing layouts, which allow it to be used for <a href="http://packery.metafizzy.co/draggable.html">draggable interactions</a>.</p>
<p>Isotope does sorting and filtering. Isotope uses <a href="layout-modes/masonry.html">masonry</a> and <a href="layout-modes/packery.html">packery</a> layouts, as well as other layouts. </p>
<p>Masonry is licensed MIT and is freely available for use and distribution. Isotope and Packery have a proprietary license, where you can purchase a license for commercial projects, or use it freely for open-source projects.</p>
<h2 id="the-first-item-breaks-the-grid">The first item breaks the grid!</h2>
<p>You most likely need to set the <a href="layout-modes/masonry.html#columnwidth"><code>columnWidth</code> option</a> for <a href="layout-modes/masonry.html">masonry layout mode</a>. Without <code>columnWidth</code> set, the masonry layout mode will use the width of the first item for the size of its columns.</p>
<pre><code class="js">$(<span class="string">'.grid'</span>).isotope({
masonry: {
columnWidth: <span class="number">200</span>
}
});
</code></pre>
<h2 id="how-can-i-access-filtered-items-in-current-order">How can I access filtered items in current order?</h2>
<p>Use the <code>filteredItems</code> property. <code>filteredItems</code> is an array of <i>Isotope Item</i>s.</p>
<pre><code class="js"><span class="comment">// init isotope, filter & sort</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
filter: <span class="string">'.selector'</span>,
sortBy: <span class="string">'order'</span>
});
<span class="comment">// get Isotope instance, if using jQuery</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="jquery_var">$grid</span>.data(<span class="string">'isotope'</span>);
<span class="comment">// count how many</span>
<span class="built_in">console</span>.log( <span class="string">'filtered '</span> + <span class="isotope_var">iso</span>.filteredItems.length + <span class="string">' items'</span> );
<span class="comment">// first element</span>
<span class="built_in">console</span>.log( <span class="isotope_var">iso</span>.filteredItems[<span class="number">0</span>].element );
</code></pre>
<h2 id="error-cannot-call-methods-on-isotope-prior-to-initialization-attempted-to-call-___">Error: “cannot call methods on isotope prior to initialization; attempted to call '___'”</h2>
<p>This error occurs when your code attempts to use a <a href="methods.html">method</a> before the Isotope instance has been initialized.</p>
<pre><code class="js"><span class="comment">// This code will trigger the "cannot call methods" error</span>
<span class="jquery_var">$grid</span>.append( $items )
<span class="comment">// isotope method</span>
.isotope( <span class="string">'appended'</span>, $items );
<span class="comment">// init Isotope</span>
<span class="jquery_var">$grid</span>.isotope({
<span class="comment">// options...</span>
});
</code></pre>
<p>This can happen if you have a race condition — when one piece of logic may occur before another. This could happen with <a href="appendix.html#imagesloaded">imagesLoaded</a>, Infinite Scroll, or Ajaxing content.</p>
<pre><code class="js"><span class="comment">// race condition with imagesLoaded</span>
<span class="jquery_var">$grid</span>.imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// init Isotope</span>
<span class="jquery_var">$grid</span>.isotope({
<span class="comment">// options...</span>
});
});
<span class="comment">// imagesLoaded will trigger after this</span>
<span class="jquery_var">$grid</span>.append( $items )
.isotope( <span class="string">'appended'</span>, $items );
</code></pre>
<p>To resolve this, make sure that the Isotope instance has been initialized before the method is called.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// init Isotope</span>
<span class="jquery_var">$grid</span>.isotope({
<span class="comment">// options...</span>
});
<span class="comment">// isotope has been initalized, okay to call methods</span>
<span class="jquery_var">$grid</span>.append( $items )
.isotope( <span class="string">'appended'</span>, $items );
});
</code></pre>
<pre><code class="js"><span class="comment">// another fix, init Isotope first, before imagesLoaded</span>
<span class="jquery_var">$grid</span>.isotope({
<span class="comment">// options...</span>
});
<span class="comment">// okay to call methods</span>
<span class="jquery_var">$grid</span>.append( $items )
.isotope( <span class="string">'appended'</span>, $items );
<span class="comment">// just do layout on imagesLoaded</span>
<span class="jquery_var">$grid</span>.imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="jquery_var">$grid</span>.isotope(<span class="string">'layout'</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>