I am using this awesome Quicksand plugin for jQuery that makes filtering and reordering a list both beautiful and simple. I love this thing – it’s snappy, looks great, and put some polish on a regular old unordered list. But I was having trouble getting it to work locally in IE. I have an unordered list of items that I want to sort by type. Some items are one type, some items fall into multiple type categories. I’m organizing those types by class name as seen here:


<ul class="filter-list">
<li class="stores">Lorem</li>
<li class="brands">Ipsum</li>
<li class="products">Dolor</li>
<li class="stores brands">Sit</li>
<li class="brands products">Amet</li>
<li class="stores brands products">Quandis</li>
</ul>


To filter the list, I was using links as my triggers instead of inputs. Each link had an href attribute that either triggered ALL items, or corresponded to a particular class of items in the list, as seen here:

WRONG


<p class="triggers"><a href="all">All</a> | <a href="brands">Brands</a> | <a href="stores">Stores</a> | <a href="online">Online</a></p>


So I was stripping out the href attribute and using that to filter the list. But hold up a minute. In IE 7 when I test locally, that href translates to finding a class of “/user/Christian/Documents/Clients/blahblahblah/classname” or something ridiculous like that – IE appends the entire path when it passes that information to my jQuery script. So I ended up stripping out the href and using another attribute – rel – to drive the filters. Here’s the updated HTML:


<p class="triggers"><a href="#" rel="all">All</a> | <a href="#" rel="brands">Brands</a> | <a href="#" rel="stores">Stores</a> | <a href="#" rel="online">Online</a></p>


Here’s the final jQuery:


// get the initial (full) list
var $filterList = $('ul.filter-list');
// add unique id's
// i don't like having to write these all in the code
// so i wrote a script to id these for me
for(var i=0; i<$('ul.filter-list li').length; i++){
$('ul.filter-list li:eq(' + i + ')').attr('id','flitem' + i);
}
// clone first collection to get a second collection
var $data = $filterList.clone();
// handle trigger clicks
$('p.trigger a').click(function(e) {
if($(this).hasClass('all')) {
// get a group of all items
var $filteredData = $data.find('li');
} else {
// get a group of items of a particular class
var $filteredData = $data.find('li.' + $(this).attr('rel'));
}
// call quicksand
$('ul.filter-list').quicksand($filteredData, {
duration: 500,
attribute: function(v) {
// this is the unique id attribute we created above
return $(v).attr('id');
}
}
e.preventDefault();
});

So if you're having trouble getting Quicksand to work in IE, and you're using a link's href attribute as a trigger, consider moving that trigger to the rel attribute or a class name instead. Hope this helps!