Question

see: http://jasondaydesign.com/index2.html

I am using easylistsplitter.js to layout the portfolio items. Unfortunately, my filter does not work on all of the items. It only filters the first column.

Thoughts?

Thanks!

Answer 1

I don’t quite understand how you are trying to use the listsplitter along with the masonry plugin…

The masonry plugin sets up the layout and splits the layout into how ever many columns you want. If you look at your layout page, masonry has split the layout into 4 columns: #primary.listCol1, .listCol2, .listCol3 and .listCol4.last. So applying the listsplitter afterwards doesn’t work because the list is already split.

If you are trying to sort the list, you could check out the tinysort plugin or if you just want a nice short script, the one from this answer will need some slight modification.

---

Update: I was looking at the filterable script, but I couldn’t find a nice easy solution. But I did find this filterable tutorial which seems a bit easier to understand (to me). I modified it slightly to make the animation the same as your filterable script and this was the result:

$(document).ready(function() {
  $('ul#portfolio-filter a').click(function() {
    $(this).css('outline','none');
    $('ul#portfolio-filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
      $('.portfolio li.hidden').animate({ width: 'show', opacity: 'show' }, 1000 ).removeClass('hidden');
    } else {
      $('.portfolio li').each(function() {
        if(!$(this).hasClass(filterVal)) {
          $(this).animate({ width: 'hide', opacity: 'hide' }, 1000 ).addClass('hidden');
        } else {
          $(this).animate({ width: 'show', opacity: 'show' }, 1000 ).removeClass('hidden');
        }
      });
    }
    return false;
  });
});

You shouldn’t have to change anything except to replace the “jquery.filterablepack.js” contents with the above code.