SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to filter the visibility of items?

    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. #2
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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:
    Code:
    $(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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mickyginger View Post
    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:
    Code:
    <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:
    Code:
    $(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.

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

    Does anyone know how that animation can be achieved?

  4. #4
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    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:
    Code:
    $('.cat1').click(function(){
    **$('.cat1').show().addClass('selected');
    **$('.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:
    Code:
    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.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •