bachir
/
popsu-d7


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
							<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>Help &middot; Isotope Docs</title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="../css/style.css" />
  
  <!-- scripts at bottom of page -->

</head>
<body class="docs ">
  
  <nav id="site-nav">
    <h1><a href="../index.html">Isotope</a></h1>

    <h2>Docs</h2>
    
    <ul>
      
        
          <li><a href="../docs/introduction.html">Introduction</a>
        
      
        
          <li><a href="../docs/options.html">Options</a>
        
      
        
          <li><a href="../docs/methods.html">Methods</a>
        
      
        
          <li><a href="../docs/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../docs/filtering.html">Filtering</a>
        
      
        
          <li><a href="../docs/sorting.html">Sorting</a>
        
      
        
          <li><a href="../docs/animating.html">Animating</a>
        
      
        
          <li><a href="../docs/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../docs/extending-isotope.html">Extending Isotope</a>
        
      
        
          <li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
        
      
        
        <li class="current"><a href="#content">Help</a>
          <ul class="toc">
            
              <li><a href="#reporting_bugs_and_issues">Reporting bugs and issues</a></li>
            
              <li><a href="#support_license">Support license</a></li>
            
              <li><a href="#additional_resources">Additional resources</a></li>
            
              <li><a href="#unloaded_media">Unloaded media</a></li>
            
              <li><a href="#images">Images</a></li>
            
              <li><a href="#fontface_fonts">@font-face fonts</a></li>
            
              <li><a href="#accessing_the_instance">Accessing the instance</a></li>
            
              <li><a href="#css_transforms_in_opera">CSS transforms in Opera</a></li>
            
              <li><a href="#infinite_scroll_with_filtering_or_sorting">Infinite Scroll with filtering or sorting</a></li>
            
              <li><a href="#flash">Flash</a></li>
            
              <li><a href="#poor_type_rendering_in_webkit">Poor type rendering in WebKit</a></li>
            
              <li><a href="#righttoleft_layouts">Right-to-left layouts</a></li>
            
              <li><a href="#unclickable-filtered">Preventing clicks on filtered items</a></li>
            
          </ul>
        </li>
        
      
        
          <li><a href="../docs/license.html">License</a>
        
      
    </ul>
    
    <h2>Demos</h2>
    
    <ul>
      
        
          <li><a href="../demos/basic.html">Basic</a>
        
      
        
          <li><a href="../demos/elements-complete.html">Elements Complete</a>
        
      
        
          <li><a href="../demos/elements-partial.html">Elements Partial</a>
        
      
        
          <li><a href="../demos/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../demos/filtering.html">Filtering</a>
        
      
        
          <li><a href="../demos/sorting.html">Sorting</a>
        
      
        
          <li><a href="../demos/relayout.html">reLayout</a>
        
      
        
          <li><a href="../demos/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
        
      
        
          <li><a href="../demos/images.html">Images</a>
        
      
        
          <li><a href="../demos/combination-filters.html">Combination filters</a>
        
      
        
          <li><a href="../demos/hash-history.html">Hash history</a>
        
      
        
          <li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
        
      
    </ul>
    
    <h2>Custom layout modes</h2>
    
    <ul>
      
        
          <li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
        
      
        
          <li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
        
      
        
          <li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
        
      
    </ul>
    
    <h2><a href="../tests/index.html">Tests</a></h2>
    
  </nav> <!-- #site-nav -->
  
  <section id="content">
    
      <h1>Help</h1>
    

    <h2 id='reporting_bugs_and_issues'>Reporting bugs and issues</h2>

<p><a href='http://github.com/desandro/isotope/issues'>Report bugs and issues on GitHub</a>.</p>

<h3 id='issues-guidelines'>Guidelines</h3>

<ul>
<li>Look over open and closed issues before submitting yours.</li>

<li>Add a link to a live site with the bug. If the project is confidential, try re-creating it in <a href='http://jsfiddle.net'>jsFiddle</a>.</li>
</ul>

<p>The issues tracker is for bugs and issues &#8212; when Isotope doesn&#8217;t work as expected. It is not for implementation issues &#8212; when you are having trouble setting up Isotope. Consider a <a href='http://metafizzy.co/#support-license'>Support License</a> for implementation issues. If you&#8217;re not sure, go ahead and submit an issue.</p>

<h2 id='support_license'>Support license</h2>

<p>If you&#8217;ve tried everything and would really like to get my eyes looking at your code, you can purchase a <a href='http://metafizzy.co/#support-license'>Support License from Metafizzy</a>.</p>

<p>Support License is included with Isotope Commercial License.</p>

<h2 id='additional_resources'>Additional resources</h2>

<ul>
<li>The <a href='http://metafizzy.co/blog/'>Metafizzy blog</a> has posts that cover specialized use cases</li>

<li><a href='http://zootool.com/user/desandro/tag:isotope'>Sites using Isotope on Zootool</a>, has screenshots</li>

<li><a href='http://www.delicious.com/desandro/using:isotope'>Sites using Isotope on Delicious</a></li>

<li><a href='http://www.delicious.com/desandro/re:isotope'>Miscelleanous Isotope content</a></li>

<li><a href='http://www.delicious.com/desandro/re:isotope+stackoverflow'>Stack Overflow questions on Isotope</a></li>
</ul>

<h2 id='unloaded_media'>Unloaded media</h2>

<p>Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.</p>

<h2 id='images'>Images</h2>

<h3 id='inline_dimensions'>Inline dimensions</h3>

<p>For images, the best method is to specify the width and height of images inline.</p>
<div class='highlight'><pre><code class='html'><span class='nt'>&lt;img</span> <span class='na'>src=</span><span class='s'>&quot;img-file.jpg&quot;</span> <span class='na'>width=</span><span class='s'>&quot;280&quot;</span> <span class='na'>height=</span><span class='s'>&quot;160&quot;</span> <span class='nt'>/&gt;</span>
</code></pre>
</div>
<p>If you’re using a PHP-based CMS, you can use the <a href='http://php.net/manual/en/function.getimagesize.php'>getimagesize</a> function.</p>

<h3 id='imagesloaded_plugin'>imagesLoaded plugin</h3>

<p>The next best solution is to use the <a href='https://github.com/desandro/imagesloaded'>imagesLoaded plugin</a> included with Isotope. It&#8217;s a small plugin that finds all the images in a context, and fires a callback function once all the images have loaded.</p>
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$container</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>);</span>

<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>imagesLoaded</span><span class='p'>(</span> <span class='kd'>function</span><span class='p'>(){</span>
  <span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>({</span>
    <span class='c1'>// options...</span>
  <span class='p'>});</span>
<span class='p'>});</span>
</code></pre>
</div>
<h3 id='id1'><code>$(window).load()</code></h3>

<p>Another solution is to initialize Isotope inside <code>$(window).load()</code> instead of <code>$(document).ready()</code>. This will trigger Isotope after all the media on the page has loaded.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='nb'>window</span><span class='p'>).</span><span class='nx'>load</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
  <span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
    <span class='c1'>// options...</span>
  <span class='p'>});</span>
<span class='p'>});</span>
</code></pre>
</div>
<h2 id='fontface_fonts'>@font-face fonts</h2>

<p>Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.</p>

<ul>
<li><a href='http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/'>Typekit font events</a></li>

<li><a href='http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events'>Google WebFont Loader: Events</a></li>
</ul>

<h2 id='accessing_the_instance'>Accessing the instance</h2>

<p><a href='http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained'>Similar to jQuery UI</a>, Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the <code>&#39;isotope&#39;</code> namespace.</p>
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$container</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>);</span>

<span class='c1'>// initialize Isotope instance</span>
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>({</span>
  <span class='c1'>// options...</span>
<span class='p'>});</span>

<span class='c1'>// get Isotope instance</span>
<span class='kd'>var</span> <span class='nx'>isotopeInstance</span> <span class='o'>=</span> <span class='nx'>$container</span><span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='s1'>&#39;isotope&#39;</span><span class='p'>);</span>
<span class='nx'>isotopeInstance</span><span class='p'>.</span><span class='nx'>options</span><span class='p'>;</span> <span class='c1'>// options</span>
<span class='nx'>isotopeInstance</span><span class='p'>.</span><span class='nx'>$filteredAtoms</span><span class='p'>;</span> <span class='c1'>// jQuery object of filtered &amp; sorted item elements</span>
<span class='nx'>isotopeInstance</span><span class='p'>.</span><span class='nx'>masonry</span><span class='p'>.</span><span class='nx'>columnWidth</span><span class='p'>;</span> <span class='c1'>// Layout mode specific properties</span>
</code></pre>
</div>
<h2 id='css_transforms_in_opera'>CSS transforms in Opera</h2>

<p>Currently, <a href='http://dropshado.ws/post/1260101028/opera-transform-issues'>using CSS transforms in Opera distorts text rendering</a>. To avoid this issue, I recommend disabling Isotope to use transforms.</p>

<p>Isotope&#8217;s default options are already set to not use CSS transforms in Opera.</p>
<div class='highlight'><pre><code class='javascript'><span class='c1'>// Isotope default options</span>
<span class='nx'>hiddenStyle</span> <span class='o'>:</span> <span class='nx'>Modernizr</span><span class='p'>.</span><span class='nx'>csstransforms</span> <span class='o'>&amp;&amp;</span> <span class='o'>!</span><span class='nx'>$</span><span class='p'>.</span><span class='nx'>browser</span><span class='p'>.</span><span class='nx'>opera</span> <span class='o'>?</span> 
  <span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>0</span><span class='p'>,</span> <span class='nx'>scale</span> <span class='o'>:</span> <span class='mf'>0.001</span> <span class='p'>}</span> <span class='o'>:</span> <span class='c1'>// browsers support CSS transforms, not Opera</span>
  <span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>0</span> <span class='p'>},</span> <span class='c1'>// other browsers, including Opera</span>
<span class='nx'>visibleStyle</span> <span class='o'>:</span> <span class='nx'>Modernizr</span><span class='p'>.</span><span class='nx'>csstransforms</span> <span class='o'>&amp;&amp;</span> <span class='o'>!</span><span class='nx'>$</span><span class='p'>.</span><span class='nx'>browser</span><span class='p'>.</span><span class='nx'>opera</span> <span class='o'>?</span> 
  <span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>1</span><span class='p'>,</span> <span class='nx'>scale</span> <span class='o'>:</span> <span class='mi'>1</span> <span class='p'>}</span> <span class='o'>:</span> <span class='c1'>// browsers support CSS transforms, not Opera</span>
  <span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>1</span> <span class='p'>},</span> <span class='c1'>// other browsers, including Opera</span>
<span class='nx'>animationEngine</span> <span class='o'>:</span> <span class='nx'>$</span><span class='p'>.</span><span class='nx'>browser</span><span class='p'>.</span><span class='nx'>opera</span> <span class='o'>?</span> <span class='s1'>&#39;jquery&#39;</span> <span class='o'>:</span> <span class='s1'>&#39;best-available&#39;</span><span class='p'>,</span>
</code></pre>
</div>
<p>Also note that the <a href='animating.html#css_transitions'>recommended transition CSS</a> is missing declarations for Opera.</p>

<h2 id='infinite_scroll_with_filtering_or_sorting'>Infinite Scroll with filtering or sorting</h2>

<p>I recommend against using Infinite Scroll with filtering or sorting. This combination produces a unnecessarily complex user interaction that will frustrate your users. New content gets added, but part of it might be hidden. There is no way for the user to tell what gets hidden or re-arranged when Infinite Scroll adds more content. Exercise <a href='introduction.html#moderation'>moderation</a> with your Isotope implementation.</p>

<p>If you do plan on implementing Infinite Scroll with filtering or sorting (which is a <em>bad idea</em>), use the <code>insert</code> method instead of <code>appended</code>.</p>

<h2 id='flash'>Flash</h2>

<p><a href='http://dropshado.ws/post/4085720152/css-transforms-breaking-flash'>Using CSS transforms with Flash content is a bit buggy in Safari and Firefox</a>. This is problematic when using Isotope on item elements that contain Flash content like YouTube or Vimeo videos, Flash ads, or Flash audio players.</p>

<p>The best way to resolve this issue is to disable CSS transforms by setting the <a href='options.html#transformsenabled'><code>transformsEnabled</code> option</a> to <code><span class='kc'>false</span></code>.</p>

<h2 id='poor_type_rendering_in_webkit'>Poor type rendering in WebKit</h2>

<p>Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope&#8217;s activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: <a href='http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated'>dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements</a>.</p>

<h2 id='righttoleft_layouts'>Right-to-left layouts</h2>

<p>Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.</p>

<p><a href='../tests/right-to-left.html'><strong>See test: Right to left</strong></a></p>

<p>You&#8217;ll need to make the following changes:</p>

<ul>
<li>Modify Isotope&#8217;s <code>_positionAbs</code> method</li>

<li>Set <code>transformsEnabled: false</code> in the Isotope options</li>

<li>Add CSS transition property styles for right/top.</li>
</ul>

<h3 id='javascript_for_righttoleft_support'>JavaScript for right-to-left support</h3>
<div class='highlight'><pre><code class='javascript'><span class='c1'>// modify Isotope&#39;s absolute position method</span>
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>Isotope</span><span class='p'>.</span><span class='nx'>prototype</span><span class='p'>.</span><span class='nx'>_positionAbs</span> <span class='o'>=</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>x</span><span class='p'>,</span> <span class='nx'>y</span> <span class='p'>)</span> <span class='p'>{</span>
  <span class='k'>return</span> <span class='p'>{</span> <span class='nx'>right</span><span class='o'>:</span> <span class='nx'>x</span><span class='p'>,</span> <span class='nx'>top</span><span class='o'>:</span> <span class='nx'>y</span> <span class='p'>};</span>
<span class='p'>};</span>

<span class='c1'>// initialize Isotope</span>
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
  <span class='nx'>transformsEnabled</span><span class='o'>:</span> <span class='kc'>false</span>
  <span class='c1'>// other options...</span>
<span class='p'>});</span>
</code></pre>
</div>
<h3 id='css_for_righttoleft_support'>CSS for right-to-left support</h3>
<div class='highlight'><pre><code class='css'><span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
  <span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
     <span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
       <span class='o'>-</span><span class='err'>o</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='o'>-</span><span class='err'>o</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
          <span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
<span class='p'>}</span>
</code></pre>
</div>
<h2 id='unclickable-filtered'>Preventing clicks on filtered items</h2>

<p>The <a href='filtering.html#recommended_css'>recommended CSS for filtering</a> includes <code>pointer-events: none</code> for <code>.isotope-hidden</code>. Unfortunately, Opera and Internet Explorer still let click events propagate with this style in place. But you can still dismiss click events in your click handler by checking to see if the element or element&#8217;s parent is a filtered item.</p>

<p><a href='../tests/unclickable-filtered.html'>See test: Unclickable filtered</a></p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;.item a&#39;</span><span class='p'>).</span><span class='nx'>click</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
  <span class='kd'>var</span> <span class='nx'>$this</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>);</span>
  <span class='c1'>// back out if hidden item</span>
  <span class='k'>if</span> <span class='p'>(</span> <span class='nx'>$this</span><span class='p'>.</span><span class='nx'>parents</span><span class='p'>(</span><span class='s1'>&#39;.isotope-item&#39;</span><span class='p'>).</span><span class='nx'>hasClass</span><span class='p'>(</span><span class='s1'>&#39;isotope-hidden&#39;</span><span class='p'>)</span> <span class='p'>)</span> <span class='p'>{</span>
    <span class='k'>return</span><span class='p'>;</span>
  <span class='p'>}</span>
  <span class='c1'>// otherwise, continue to do stuff...</span>
  <span class='nx'>console</span><span class='p'>.</span><span class='nx'>log</span><span class='p'>(</span><span class='s1'>&#39;item was clicked&#39;</span><span class='p'>);</span>
<span class='p'>});</span>
</code></pre>
</div>
    
    <footer>
      Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
    </footer>
    
  </section> <!-- #content -->
  

</body>
</html>