How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?

Question

When using jQuery to apply quicksand (a script for sorting lists) I find that I lose my portfolio hovers for my list items.

How do I keep my list hovers after someone has sorted the list?

The problem is on: http://digitalstyle.co/portfolio.html

The Quicksand 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 < valB) ? 1 : (valA > valB) ? -1 : 0;              
  } else {      
    return (valA < valB) ? -1 : (valA > 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'
    });

  });

});

The Hover Over 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

How My Header JS Looks

<!-- Fancybox lightbox -->
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>

<!-- Custom javascript for this template -->
<script type="text/javascript" src="js/portfolio-hover.js"></script> 



<script type="text/javascript" src="js/jQuery.equalHeights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- LOAD HoverAlls --><script type="text/javascript" src="js/jquery.hoveralls.js">            </script>
<!-- LOAD Easing --><script type="text/javascript" src="js/jquery.easing.1.3.min.js">    </script>
<script type="text/javascript">
function setEqualHeight(columns)  
 {  
 var tallestcolumn = 0;  
 columns.each(  
 function()  
 {  
 currentHeight = $(this).height();  
 if(currentHeight > tallestcolumn)  
 {  
 tallestcolumn  = currentHeight;  
 }  
 }  
 );  
 columns.height(tallestcolumn);  
 }  
$(document).ready(function() {  
 setEqualHeight($(".pontent-container > div"));  
`enter code here`});  
</script>

<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
  <script type="text/javascript" src="js/custom.js"></script>

You need to give us more detail, as well as have a look at your browser's error console. Currently, you're including `fancybox.js` _after_ your script that needs to use it, which might be your problem — Bojangles, Feb 15 '12 at 02:20
If you start looking around line 282 of the jquery.quicksand.js source code, it looks like the DOMS are being cloned (in fact, a few times throughout the source) then appended to this and that. I'm thinking that the bindings are being lost here at some point — Kyle Macey, Feb 15 '12 at 02:59

score 0 · Answer 1 · answered Mar 31 '13 at 18:29

I was not able to solve the hovering bug with .live() or .on() as described in previous answers. I solve this by commenting the callback function within the jquery.quicksand.js

var postCallback = function () {
            /*if (!postCallbackPerformed) {
                postCallbackPerformed = 1;

                // hack: 
                // used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
                // but new webkit builds cause flickering when replacing the collections
                $toDelete = $sourceParent.find('> *');
                $sourceParent.prepend($dest.find('> *'));
                $toDelete.remove();

                if (adjustHeightOnCallback) {
                    $sourceParent.css('height', destHeight);
                }
                options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
                if (typeof callbackFunction == 'function') {
                    callbackFunction.call(this);
                }                    
            }*/

This did the trick, everything works as before and it also resolved by retina image replace bug after filtering—used to get the standard images (wasn't calling the retina.js script again).

Kyle Macey · Answer 2 · 2012-02-15T03:05:20.620

0

switch

$(".portfolio li").hover(function () {
        $(this).find('div.content').fadeIn("fast");
        },
        function() {
            $(this).find('div.content').fadeOut("fast");
        })

to

$(".portfolio li").on('hover', function () {
        $(this).find('div.content').fadeIn("fast");
        },
        function() {
            $(this).find('div.content').fadeOut("fast");
        })

UPDATE Pull it out to a function

$.fn.showContent = function() {
    var $this = $(this);
    $this.hover(function () {
            $this.find('div.content').fadeIn("fast");
            },
            function() {
                $this.find('div.content').fadeOut("fast");
            })  
}

Then in the portfolio hover code

$(document).ready(function() {
  $('.portfolio li').showContent();
})

And in your quicksand code

....


   }
  });
}   

// finally, call quicksand
$applications.quicksand($sortedData, {
  duration: 800,
  easing: 'easeInOutQuad'
    });
$('.portfolio li').showContent();

  });

edited Feb 15 '12 at 03:05

answered Feb 15 '12 at 02:34

Kyle Macey

8,074
2
38
78

That won't make any difference: `.hover(function(){})` is just a shortcut for `.on('hover',function(){})`. Perhaps you meant to say `$(".portfolio").on("hover","li",function() { });` – nnnnnn Feb 15 '12 at 02:41
I thought 'on' was to replace the deprecated 'live', which maintained event bindings after DOM creation or modification. – Kyle Macey Feb 15 '12 at 02:44
@KyleMacey - read the doco. You'll see `.on()` _does_ replace `.live()` _and_ `.delegate()` _and_ `.bind()` - but the behaviour you get depends on the parameters you pass. The suggestion in my previous comment is equivalent to `.delegate()` but if you use `document` as the initial selector that is equivalent to `.live()`. – nnnnnn Feb 15 '12 at 03:00

How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?

2 Answers2

Linked