How to filter the visibility of items?

JavaScript
1

I am trying to achieve an effect similar to this: Our Recent Work | Studeo

You’ll notice that if you click on any of the ‘filters’, the items below are sorted shown/hidden accordingly.

Does anyone know how this is achieved?

Thank you.

2

If you’re using Jquery already, I came across this plugin called “isotope” a little while ago.
http://isotope.metafizzy.co/

There are a few Jquery list filter plugins available that will do pretty much what you’re after.

If you are after a more pure javascript approach, the class based filtering will certainly do the trick :slight_smile:

3

Ok, I’m thinking on my feet here, but I think you could probably do this using the each function.

Let’s say that each list item is an image as per your example.


var x = 0;
var y = 0;
$('img').each(function(){
**$(this).css({position:'absolute', left:x, top:y});
**x += 100;
**if (x >= 300){
** *y += 100;
** *x = 0;
**}
});

Ok, that should place your list items in a nice grid. Now when you do the filter process, use addClass to add a class to the remaining list items:


$('.cat1').click(function(){
**$('.cat1').show()[b].addClass('selected')[/b];
**$('.cat2, .cat3').hide();
)};

Ok, now you need to grab all the images with the class of ‘selected’, and move them into their new positions. Something like:


x = 0;
y = 0;
$('.selected').each(function(){
**$(this).animate({left:x, top:y});
**x += 100;
**if (x >= 300){
** *y += 100;
** *x = 0;
**}
});

See how you get on with that.

4

This seems like a viable solution so far Micky. Thank you.

Does anyone know how that animation can be achieved?

5

The short answer is no. But I would start with classes.

If you assign each item with a class which describes their category, you can then grab them with jQuery or javascript.

for example:


<ul>
  <li class="cat1">item 1</li>
  <li class="cat2">item 2</li>
  <li class="cat3">item 3</li>
  <li class="cat2">item 4</li>
  <li class="cat1">item 5</li>
  <li class="cat3">item 6</li>
<ul>
<!-- filters -->
<a href="#" id="cat1">cat1</a>
<a href="#" id="cat2">cat2</a>
<a href="#" id="cat3">cat3</a>

Then with jQuery you can do something like this:


$(window).load(function(){ // assuming the items are images
  $('#cat1').click(function(){
    $('.cat1).show();
    $('.cat2, .cat3).hide();
  });
  $('#cat2').click(function(){
    $('.cat2).show();
    $('.cat1, .cat3').hide();
  });
  $('#cat3).click(function(){
    $('.cat3').show();
    $('.cat1, .cat2').hide();
  });
});

I’m not sure about the animation process. But that’s a start. Hope it helps.