filter

portfolio filter

by iameuanmackay

HTML

<ul id="filter">
    <li style="list-style-type: none" class="all"><a href="#">all</a>
    </li>
    <li style="list-style-type: none" class="people"><a href="#people">people</a>
    </li>
    <li style="list-style-type: none" class="things"><a href="#things">things</a>
    </li>
</ul>
<ul id="portfolio">
    <li class="things">thing 1</li>
    <li class="things">thing 2</li>
    <li class="things">thing 3</li>
    <li class="things">thing 4</li>
    <li class="people">person 1</li>
    <li class="people">person 2</li>
    <li class="people">person 3</li>
    <li class="people">person 4</li>
</ul>

CSS

ul#filter {   
    padding-right: 10px;
	padding-left: 0;
	float: left;   
    font-size: 14px;   
    list-style: none;   
    margin-left: 0;   
    width: 100%;  
}

ul#filter li {   
    border-right: 0px solid #dedede;
	border-left: 0px solid #dedede;
    float: left;  
    line-height: 8px;
	padding-right: 10px;	
}  
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; } 
ul#filter a { color: #999; text-decoration: none; } 
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; } 
ul#filter li.current a { color: #999; font-weight: bold; }  

ul#portfolio {   
    max-width: 100%; 
    list-style: none;   
    margin-left: 0;   
    padding: 0px;	
}  
ul#portfolio li {   
    border: 0px solid #dedede;   
    float: left; 
    padding-right: 5px; 
	padding-top: 5px;	
    width: auto;  
}  
ul#portfolio a { display: block; width: 100%; }  
ul#portfolio a:hover { text-decoration: none; }  
ul#portfolio img { border: 2px none #dedede; display: block;} 
 
}

JavaScript

var url = window.location.href;
var anchor = url.substring(url.indexOf("#"));
$('ul#filter a').click(function () {
    $(this).css('outline', 'none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

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

    if (filterVal == 'all') {
        $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
    } else {

        $('ul#portfolio li').each(function () {
            if (!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
});