0
http://www.redbox.com/movies <--- What I'm trying to do /
http://www.neowin.ne...uery-quicksand/ <--- First post about this /
If you remember, I was trying to get quicksand working and someone help me with doing a short jQuery code to do the same thing. Well, everything is working great with just doing one menu but now. I would like to add on to it so that their is a second option for the user to select. I provided the link to My Example. I don't know how to right the code in jQuery so that the user can also sort the list in to Interior or Exterior like they did in the Redbox movie list. I don't think it would be really hard for someone that knows jQuery to quickly right the code for me. I'm more of a front-end web designer and then a back-end one.
I put the code below but not all of the product DIV code because it's mostly the same thing just the li class and h1 is different.
<div id="dropdown">
<ul class="filter">
<li>Product Information List
<ul>
<li class="current"><a href="#">All Products</a></li>
<li><a href="#">Limewash Products</a></li>
<li><a href="#">Slaked Lime Plasters</a></li>
<li><a href="#">3.5 NHL Cements</a></li>
<li><a href="#">Potassium Silcate Paints</a></li>
<li><a href="#">Silossanic Paints</a></li>
<li><a href="#">Stain & Varnishes</a></li>
<li><a href="#">Specialty Products</a></li>
</ul>
</li>
</ul>
</div>
<div id="dropdown2">
<ul class="filter">
<li class="current"><a href="#">All</a></li>
<li id="drop2"><a href="#">Interior</a></li>
<li id="drop3"><a href="#">Exterior</a></li>
</ul>
</div>
</div>
<ul class="items">
<li class="Limewash Products">
<a href="#"><div class="science-list shadow horizontal">
<img src="http://placehold.it/300x159" alt="" longdesc="" />
<h1>BioCalce Classico</h1>
</div></a>
</li>
<li class="Limewash Products">
<a href="#"><div class="science-list shadow horizontal">
<img src="http://placehold.it/300x159" alt="" longdesc="" />
<h1>BioCalce Classico A</h1>
</div></a>
</li>
</ul>
<script type="text/javascript">
$('.filter li a').click(function() {
$(this).css('outline','none');
$('.filter .current').removeClass('current');
$(this).parent().addClass('current');
var filter = $(this).text();
if(filter == 'All Products') {
$('.items li.hidden').fadeIn('normal').removeClass('hidden');
} else {
$('.items li').each(function() {
if(!$(this).hasClass(filter)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('normal').removeClass('hidden');
}
});
}
return false;
});
</script>
