Jquery Quicksand Plugin in IE

[Johns3n]

Hi PHPfreaks.com

 

I'm having some problems getting the Jquery Quicksand Plugin to work in Internet Explorer 7 to 9. The Plugin works flawless in all other browsers but IE seems to make it hickup!

 

Below is the code block that I use for the quicksand plugin:

<ul class="filterClients"> 
          <li class="active"><a href="#" class="all">All</a></li> 
          <li><a href="#" class="media">Media</a></li> 
          <li><a href="#" class="retail">Retail</a></li> 
          <li><a href="#" class="travel">Travel</a></li> 
          <li><a href="#" class="sports">Sports & Health</a></li> 
        </ul> 
        <ul class="hover_block"> 
          <li class="item" data-id="id-1" data-type="media"><a href="#"><img src="http://placehold.it/300x200"><br />TEST 1</a></li> 
          <li class="item" data-id="id-2" data-type="retail sports"><a href="#"><img src="http://placehold.it/300x200">TEST 2</a></li> 
          <li class="item" data-id="id-3" data-type="sports"><a href="#"><img src="http://placehold.it/300x200">TEST 3</a></li> 
          <li class="item" data-id="id-4" data-type="media"><a href="#"><img src="http://placehold.it/300x200">TEST 4</a></li> 
          <li class="item" data-id="id-5" data-type="travel"><a href="#"><img src="http://placehold.it/300x200">TEST 5</a></li> 
          <li class="item" data-id="id-6" data-type="travel"><a href="#"><img src="http://placehold.it/300x200">TEST 6</a></li>
          <li class="item" data-id="id-7" data-type="media"><a href="#"><img src="http://placehold.it/300x200"><br />TEST 1</a></li> 
          <li class="item" data-id="id-8" data-type="retail sports"><a href="#"><img src="http://placehold.it/300x200">TEST 2</a></li> 
          <li class="item" data-id="id-9" data-type="sports"><a href="#"><img src="http://placehold.it/300x200">TEST 3</a></li> 
          <li class="item" data-id="id-10" data-type="media sports"><a href="#"><img src="http://placehold.it/300x200">TEST 4</a></li> 
          <li class="item" data-id="id-11" data-type="travel"><a href="#"><img src="http://placehold.it/300x200">TEST 5</a></li> 
          <li class="item" data-id="id-12" data-type="travel retail"><a href="#"><img src="http://placehold.it/300x200">TEST 6</a></li>
        </ul>

 

and here is the javascript where I initiate the plugin along with a few extras such as animate the <img> tag in the <li> tags:

// ---------------- JQUERY QUICKSAND ----------------- //

// REGISTER UL CLASS THAT HAS SORTABLE LI TAGS.
$clientsHolder = $('ul.hover_block');
$clientsClone = $clientsHolder.clone(); 

// WHEN USER CLICKS ON FILTER METHODE.
$('.filterClients a').click(function(e) 
{
// PREVENT BROWSER FROM DOING IT'S STANDARD THING WHEN HASHTAG IS APPLIED.
    e.preventDefault();

$filterClass = $(this).attr('class');

	// REMOVE ACTIVE CLASS AND APPLY IT TO CLICKED LI TAG.
    $('.filterClients li').removeClass('active');	
    $(this).parent().addClass('active');

// SORT LI TAGS BASED ON CLICKED VALUE.
    if($filterClass == 'all')
{
        $filters = $clientsClone.find('li');
    }
else 
{
        $filters = $clientsClone.find('li[data-type~='+ $filterClass +']');
    }

// REPLACE UL TAG WITH CLICKED LI TAGS.
    $clientsHolder.quicksand($filters, 
{
        duration: 1000,
        easing: 'easeInOutQuad'
    });
});

// ---------- JQUERY MOUSEOVER & MOUSELEAVE ---------- //

// ANIMATE IMG TAGS IN LI TAGS WHEN MOUSEOVER.
$("ul.hover_block").delegate("li", 
{
  // DEFINE ANIMATIONS.
  mouseenter: function() 
  {
    $(this).find('img').animate({top:'-200px'},{queue:false,duration:300});
  },
  mouseleave: function() 
  {
    $(this).find('img').animate({top:'0px'},{queue:false,duration:300});
  }
});

 

And at the bottom of my html I have following javascripts running:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>
    <script type="text/javascript" src="javascript.js"></script>

 

The Javascript.js file has the contents which I pasted above.

 

Now i've been trying to fix this problem for a while now. but I think i've looked at it too much to see the problem anymore.. hope you guys can help me out!

 

Thanks in advance

[Johns3n]

This is now solved!

 

the script I included from

<script type="text/javascript" src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>

 

wasn't being recognized by IE because of a mimetype mismatch!

 

I downloaded the script myself and ran it locally instead and it worked as a charm!