title: Does jQuery isotope work in xhtml
body: <p>Im implementing the basic usage of isotope since its pretty copmprehensive and i only want the 'quicksand-like' nice filtering animation effect. The only thing that does work is the * (all) filter that loads all items - clicking any other filter link item shows nothing?</p>
  
  <p>Im using, XHTML Strict, jQuery 1.8.3 - i also have jQuery UI 1.10.3 and using pretty photo on the image items in my portfolio, however even if i remove prettyphoto completely from the images the behaviour is still the same, nothing filters.</p>
  
  <p>All the examples i've seen online (including the Isotope website) use HTML5 is this the only way it works?? I'm trying isotope because jQ Quicksand is a waste of time with prettyphoto which is well documented on other forums as inoperable the quicksand dev isnt saying much neither the prettyphoto dev - however at lease quicksand does filter it just didnt play well with prettyphoto. Any ideas how i can get isotope to, basically, filter - nothing else fancy required - 
  here's what ive got:</p>
  
  <p><strong>[js in the page head]</strong></p>
  
  <pre><code>&lt;link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /&gt;
  &lt;script src="_layout/js/jquery-1.8.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="_layout/js/tweet/jquery.tweetable.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="_layout/js/isotope/css/style.css" rel="stylesheet" type="text/css"&gt;
  &lt;script type="text/javascript" src="_layout/js/isotope/js/jquery.isotope.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
          $(window).load(function(){
                  var $container = $('#portfolio');
                  $container.isotope({
                          filter: '*',
                          animationOptions: {
                                  duration: 750,
                                  easing: 'linear',
                                  queue: false
                          }
                  });
  
                  $('#filter li a').click(function(){
                          $('#filter li a.current').removeClass('current');
                          $(this).addClass('current');
  
                          var selector = $(this).attr('data-filter');
                          $container.isotope({
                                  filter: selector,
                                  animationOptions: {
                                          duration: 750,
                                          easing: 'linear',
                                          queue: false
                                  }
                           });
                           return false;
                  }); 
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>[the css]</strong></p>
  
  <pre><code>.isotope-item {
      z-index: 2;
  }
  .isotope-hidden.isotope-item {
      pointer-events: none;
      z-index: 1;
  }
  .isotope,
  .isotope .isotope-item {
    /* change duration value to whatever you like */
      -webkit-transition-duration: 0.8s;
      -moz-transition-duration: 0.8s;
      transition-duration: 0.8s;
  }
  .isotope {
      -webkit-transition-property: height, width;
      -moz-transition-property: height, width;
      transition-property: height, width;
  }
  .isotope .isotope-item {
      -webkit-transition-property: -webkit-transform, opacity;
      -moz-transition-property: -moz-transform, opacity;
      transition-property: transform, opacity;
  }
  </code></pre>
  
  <p><strong>[the html markup  - simplified to 2 categories for brevity]</strong></p>
  
  <pre><code>&lt;!-- isotope filter --&gt;
  &lt;ul id="filter"&gt; 
      &lt;li&gt;&lt;a href="#" data-filter="*" class="current"&gt;All&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="#" data-filter=".artstart"&gt;art projects&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".iconstart"&gt;icon projects&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="portfolio"&gt;
  
              &lt;div id="0" class="picbox artstart"&gt;            
                  &lt;div class="fixed portfolio-item-preview"&gt;              
                      &lt;img src="pfimgs/2013/timeteam.png" width="200" height="123" alt="" /&gt;                  
                      &lt;div class="preview-options"&gt;
                          &lt;a href="pfimgs/2013/timeteampromo.png" class="lightbox" title="view large version" rel="prettyPhoto" &gt;view large version&lt;/a&gt;
                          &lt;a href="#" class="view" title="Go to project page" &gt;Go to project page&lt;/a&gt;                     
                      &lt;/div&gt;      
                  &lt;/div&gt;                  
              &lt;/div&gt;
  
  
              &lt;div id="1" class="picbox iconstart"&gt;            
                      &lt;div class="fixed portfolio-item-preview"&gt;                
                              &lt;&lt;img src="pfimgs/2013/bonecollector.png" width="200" height="123" alt="" /&gt;                   
                              &lt;div class="preview-options"&gt;
                                      &lt;a href="pfimgs/2013/bcollectorpromo.png" class="lightbox" title="view large version" rel="prettyPhoto" &gt;view large version&lt;/a&gt;
                                      &lt;a href="#" class="view" title="Go to project page" &gt;Go to project page&lt;/a&gt;                        
                              &lt;/div&gt;        
                      &lt;/div&gt;                    
              &lt;/div&gt;
  
  
  
              &lt;div id="2" class="picbox artstart"&gt;
                  &lt;div class="fixed portfolio-item-preview"&gt;
                      &lt;img src="_layout/portfolio/mashup55.png" width="200" height="123" alt="" /&gt;    
                      &lt;div class="preview-options"&gt;
                          &lt;a href="_layout/portfolio/mashuppromo.png" class="lightbox" title="View large version" rel="prettyPhoto" &gt;View large version&lt;/a&gt;
                          &lt;a href="#" class="view" title="Go to project page" &gt;Go to project page&lt;/a&gt;                     
                      &lt;/div&gt;
                  &lt;/div&gt;      
              &lt;/div&gt;
  
  
  
              &lt;div id="3" class="picbox iconstart"&gt;
                  &lt;div class="fixed portfolio-item-preview"&gt;  
                      &lt;img src="_layout/portfolio/whatnext.png" width="200" height="123" alt="" /&gt;        
                      &lt;div class="preview-options"&gt;
                          &lt;a href="_layout/portfolio/whatnextpromo.png" class="lightbox" title="View large version" rel="prettyPhoto" &gt;View large version&lt;/a&gt;
                          &lt;a href="#" class="view" title="Go to project page" &gt;Go to project page&lt;/a&gt;                     
                      &lt;/div&gt;      
                  &lt;/div&gt;
              &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas whats going on here guys??</p>