Implementing quicksand jquery plugin

Question

I try to make a portfolio page as you can see here. When you click one of these filter item; nothings happen. no animated effect, no new sorting.. nothing! Could you please help me to fix this?

Here's the dynamic content loader code:

//JavaScript Dynamic Content using jQuery
//www.mclelun.com

$(document).ready(function(){
var jqc_vHash = window.location.hash;
var jqc_intInterval = 0;
var jqc_vDuration = 2000;

//Check if there is hash data on first load
if (jqc_vHash)
{
    jqc_fnLoad(jqc_vHash);
}

//FUNCTION: LOAD CONTENT
function jqc_fnLoad(p_ID){

    p_ID = p_ID.substr(1,p_ID.length);

    $("#jqc_loading")
        .css({visibility:"visible"})
        .css({opacity:"1"})
        .css({display:"block"});

    $("#jqc_content").animate({ height: 'hide' }, 500, function() { 
        $("#jqc_content").empty().load("content/"+p_ID+".html", jqc_fnDone);
    });

    //UPDATE LIST COLOR
    $("#jqc_menu").find("li").each(function() { 
        if(this.id == p_ID)
        {
            $(this).css("color", "");
        }
        else
        {
            $(this).css("color", "");
        }
    });
}

//LIST CLICK
$("#jqc_menu li").click(function(){
    clearInterval(jqc_intInterval);
    jqc_vHash = "#" + this.id;
    jqc_fnLoad(jqc_vHash);
    document.location.hash = jqc_vHash;
});

//LINK CLICK
$("#jqc_menu_link a").click(function(e){
    clearInterval(jqc_intInterval);
    jqc_vHash = "#" + this.id;
    jqc_fnLoad(jqc_vHash);
    document.location.hash = jqc_vHash;
    e.preventDefault();
});

//FUNCTION: CHECK HASH CHANGE
function jqc_fnLoop()
{
    var tmpHash = window.location.hash;
    if(tmpHash)
    {
        if(tmpHash != jqc_vHash)
        {
            jqc_vHash = tmpHash;
            jqc_fnLoad(jqc_vHash);
        }

    }
}

//FUNCTION: DONE LOADING
function jqc_fnDone()
{
    $("#jqc_content").animate({ height: 'show' }, 500);
    $("#jqc_loading").fadeTo(1000, 0);
    jqc_intInterval = setInterval(jqc_fnLoop, jqc_vDuration);
    if($('#map-canvas').length && !$('#map-canvas div').length){initialize();}
};

});

and this is the sorting code;

    $(document).ready(function(){
  var pclone = $(".portfolio").clone();

  $("#sort a").on("click", function(e){
    e.preventDefault();
    var sorttype = $(this).attr("class");

    // determine if another link is selected
    if(!$(this).hasClass("selected")) {
      $("#sort a").removeClass("selected");
      $(this).addClass("selected");
    }

    // check filter sort type
    if(sorttype == "all") {
      var filterselect = pclone.find("li");
    } else {
      var filterselect = pclone.find("li[class="+sorttype+"]");
    }

    $(".portfolio").quicksand(filterselect, 
    {
      adjustHeight: 'auto',
      duration: 550
    }, function() { 
      // callback function
    });
  }); // end click event listener
});

html structure;

    <div id="w">
<div class="sort" id="sort"><span class="label">Filter By:</span> <a href="#" class="all selected">All</a> <a href="#" class="web">Web</a> <a href="#" class="ios">iOS</a> <a href="#" class="print">Print</a></div>


<ul class="portfolio clearfix">

  <li data-id="id-1" data-lightbox="example-set" class="ios"><a class="example-image-link" href="../img/image-3.jpg" data-lightbox="example-set" title="pic1 lorem ipsum dolar bitch!"><img  src="images/ios-app-ui-01.png" class="portimg"></a></li>


          <li data-id="id-2" data-lightbox="example-set" class="ios"><a class="example-image-link" href="../img/image-6.jpg" data-lightbox="example-set" title="pic2 lorem ipsum dolar bitch!"><img  src="images/print-design-cards.png" class="portimg"></a></li>



  <li data-id="id-3" class="ios"><a href="" target="_blank"><img src="images/ios-app-ui-02.png" class="portimg"></a></li>

  <li data-id="id-4" class="print"><a href="" target="_blank"><img src="images/print-winery-card.png" class="portimg"></a></li>

  <li data-id="id-5" class="web"><a href="" target="_blank"><img src="images/website-layout-header.png" class="portimg"></a></li>

  <li data-id="id-6" class="web"><a href="" target="_blank"><img src="images/website-base-header.png" class="portimg"></a></li>

  <li data-id="id-7" class="print"><a href="" target="_blank"><img src="images/print-cyan-announcement-cards.png" class="portimg"></a></li>

  <li data-id="id-8" class="web"><a href="" target="_blank"><img src="images/website-logo-header-image.png" class="portimg"></a></li>

  <li data-id="id-9" class="ios"><a href="" target="_blank"><img src="images/ios-ipad-app-03.png" class="portimg"></a></li>

  <li data-id="id-10" class="ios"><a href="" target="_blank"><img src="images/ios-tabbar-app-04.png" class="portimg"></a></li>

  <li data-id="id-11" class="web"><a href="" target="_blank"><img src="images/website-dropdown-nav-menu.png" class="portimg"></a></li>

  <li data-id="id-12" class="web"><a href="" target="_blank"><img src="images/website-restaurant-navigation-icons.png" class="portimg"></a></li>

  <li data-id="id-13" class="ios"><a href="" target="_blank"><img src="images/ios-app-ui-05.png" class="portimg"></a></li>

  <li data-id="id-14" class="web"><a href="" target="_blank"><img src="images/website-footer-layout-design.png" class="portimg"></a></li>

  <li data-id="id-15" class="web"><a href="" target="_blank"><img src="images/website-shop-flowers-navigation.png" class="portimg"></a></li>
</div>

You're using two versions of jQuery - try using just one to see if it will work for you. If you don't need backwards compatibility for IE, use 2.0.2. You might also try using the quicksand CDN here: //cdn.jsdelivr.net/quicksand/1.3/jquery.quicksand.min.js — brandonscript, Nov 25 '13 at 21:49
Are you able to reproduce this in a jsfiddle? I tried popping your code in, but it seems to work fine for me: http://jsfiddle.net/remus/5M3aq/ It was throwing an error trying to use `$.browser` (which was deprecated in jQuery 1.9 -- perhaps that's the problem?) — brandonscript, Nov 25 '13 at 22:02
@r3mus it's really interesting. It works out of the content loader. But when I put this #w div in my dynamic content loader it stopped working. When I click one of these li item, just jump out the head of the page. I think there is a conflict between content loader and quicksand. Could you please look at the jqc_fnDone() function? — , Nov 25 '13 at 22:18
I'm not seeing that function? The other thing I had to do though was that your CSS selectors aren't set up right. `li[class="+sorttype+"]` isn't being detected; try changing it to `li."+sorttype` and see if that works? — brandonscript, Nov 25 '13 at 22:33
@r3mus //FUNCTION: DONE LOADING function jqc_fnDone() { $("#jqc_content").animate({ height: 'show' }, 500); $("#jqc_loading").fadeTo(1000, 0); jqc_intInterval = setInterval(jqc_fnLoop, jqc_vDuration); if($('#map-canvas').length && !$('#map-canvas div').length){initialize();} }; I mean this one. I changed it and nothing, still same. :/ — , Nov 25 '13 at 22:38
I'm seeing this error in the console: `Uncaught TypeError: Object [object Object] has no method 'quicksand' (index):Line 21` and I also see that you have even another jQuery library attached -- 1.10. This one's local. I suggest you work backwards from your complex code and use the jsFiddle I linked above to strip out and isolate your problem. — brandonscript, Nov 26 '13 at 06:31
@r3mus finally I handle it. thanks for your helps. I really apreciated. — , Nov 26 '13 at 14:20
@r3mus conflicted of jquery libraries. I thought that; I used a 2 jquery library but when I looked at that again I saw that I got another jquery library too. :)) — , Nov 26 '13 at 17:26

score 0 · Accepted Answer · answered Nov 26 '13 at 18:03

For reference, there were a handful of things wrong with this, but to resolve:

We checked for conflicting javascript libraries (original problem site included 1.9, 1.10, and 1.8.3).
Since quicksand requires 1.8.3, that was the required library.
Updated the CSS class selectors to be li."+sorttype

Implementing quicksand jquery plugin

1 Answers1