title: How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?
body: <p>When using jQuery to apply quicksand (a script for sorting lists) I find that I lose my portfolio hovers for my list items.</p>
  
  <p>How do I keep my list hovers after someone has sorted the list?</p>
  
  <p>The problem is on: <a href="http://digitalstyle.co/portfolio.html" rel="nofollow">http://digitalstyle.co/portfolio.html</a></p>
  
  <p><strong>The Quicksand Code</strong></p>
  
  <pre><code>// Custom sorting plugin
  (function($) {
    $.fn.sorted = function(customOptions) {
    var options = {
    reversed: false,
    by: function(a) { return a.text(); }
  };
  $.extend(options, customOptions);
  $data = $(this);
  arr = $data.get();
  arr.sort(function(a, b) {
    var valA = options.by($(a));
    var valB = options.by($(b));
    if (options.reversed) {
      return (valA &lt; valB) ? 1 : (valA &gt; valB) ? -1 : 0;              
    } else {      
      return (valA &lt; valB) ? -1 : (valA &gt; valB) ? 1 : 0;  
    }
  });
  return $(arr);
    };
  })(jQuery);
  
  // DOMContentLoaded
  $(function() {
  
    // bind radiobuttons in the form
    var $filterType = $('#filter input[name="type"]');
    var $filterSort = $('#filter input[name="sort"]');
  
    // get the first collection
    var $applications = $('#applications');
  
    // clone applications to get a second collection
    var $data = $applications.clone();
  
    // attempt to call Quicksand on every form change
    $filterType.add($filterSort).change(function(e) {
      if ($($filterType+':checked').val() == 'all') {
       var $filteredData = $data.find('li');
      } else {
        var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
  }
  
  // if sorted by size
  if ($('#filter input[name="sort"]:checked').val() == "size") {
    var $sortedData = $filteredData.sorted({
      by: function(v) {
        return parseFloat($(v).find('span[data-type=size]').text());
      }
    });
  } else {
    // if sorted by name
    var $sortedData = $filteredData.sorted({
      by: function(v) {
        return $(v).find('strong').text().toLowerCase();
      }
    });
  }   
  
  // finally, call quicksand
  $applications.quicksand($sortedData, {
    duration: 800,
    easing: 'easeInOutQuad'
      });
  
    });
  
  });
  </code></pre>
  
  <p><strong>The Hover Over Code</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  // #################################
  // PORTFOLIO GRID
  // #################################
  $(".portfolio li").hover(function () {
      $(this).find('div.content').fadeIn("fast");
      },
      function() {
          $(this).find('div.content').fadeOut("fast");
      })  
  
  // #################################
  // IMAGE FADE OPACITY WHEN HOVER
  // #################################
  $(function() {
  
      $(".portfolio div img").css("opacity", "1");
  
      // ON MOUSE OVER
      $(".portfolio div img").hover(function () {
  
          // SET OPACITY TO 100%
          $(this).stop().animate({
          opacity: 0.5
          }, "fast");
      },
  
      // ON MOUSE OUT
      function () {
  
          // SET OPACITY BACK TO 100%
          $(this).stop().animate({
          opacity: 1
          }, "fast");
      }); 
  });
  
    $('.portfolio .content').each(function() {
      $('.portfolio .content').hover(function() {
        $(".portfolio img").not(this).stop().animate({opacity: 0.6}, 400);
      }, function() {
        $(".portfolio img").not(this).stop().animate({opacity: 1}, 300);      
      });
    });
  
      // #################################
  // Lightbox for images
  // #################################
  $(".portfolio a.folio-zoom").fancybox({
      'titlePosition'     : 'over'
  });
  
  
  }); // END OF DOCUMENT READY
  </code></pre>
  
  <p><strong>How My Header JS Looks</strong></p>
  
    
  
  <pre><code>&lt;!-- Fancybox lightbox --&gt;
  &lt;script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"&gt;&lt;/script&gt;
  
  &lt;!-- Custom javascript for this template --&gt;
  &lt;script type="text/javascript" src="js/portfolio-hover.js"&gt;&lt;/script&gt; 
  
  
  
  &lt;script type="text/javascript" src="js/jQuery.equalHeights.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;!-- LOAD HoverAlls --&gt;&lt;script type="text/javascript" src="js/jquery.hoveralls.js"&gt;            &lt;/script&gt;
  &lt;!-- LOAD Easing --&gt;&lt;script type="text/javascript" src="js/jquery.easing.1.3.min.js"&gt;    &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function setEqualHeight(columns)  
   {  
   var tallestcolumn = 0;  
   columns.each(  
   function()  
   {  
   currentHeight = $(this).height();  
   if(currentHeight &gt; tallestcolumn)  
   {  
   tallestcolumn  = currentHeight;  
   }  
   }  
   );  
   columns.height(tallestcolumn);  
   }  
  $(document).ready(function() {  
   setEqualHeight($(".pontent-container &gt; div"));  
  `enter code here`});  
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="js/jquery.quicksand.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt; 
  </code></pre>