|
<!DOCTYPE html> |
|
<head> |
|
<style> |
|
a {text-decoration: none; margin: 5px;} |
|
li {display: inline-block;} |
|
#portfolio-nav > a {height: 20px; font-size: 1.2em; color: red;} |
|
#portfolio-nav > a:target {color: magenta;} |
|
ul > li {margin: 10px; list-style: none} |
|
ul:after {content: ""; display: block; clear: both} |
|
</style> |
|
</head> |
|
<body> |
|
<title>Element Filter</title> |
|
|
|
<p> |
|
Simple kind of <a href="http://razorjack.net/quicksand/">jQuery Quicksand</a>. The same effect without many animations, |
|
but easy to implement ;). View source to learn more. |
|
It's hard to name this kind of effect but you can take a look <a href="http://axcoto.com/labs/140byt/filter/v1/test.html#magento">here</a> |
|
</p> |
|
|
|
<div id="portfolio-nav"> |
|
<a id="all" class="all" href="test.html#all">All</a> |
|
<a id="app" class="webapp" href="test.html#app">Web/App</a> |
|
<a id="wordpress" class="wordpress" href="test.html#wordpress">Wordpress</a> |
|
<a id="ee" class="ee" href="test.html#ee">ExpressionEngine</a> |
|
<a id="joomla" class="joomla" href="test.html#joomla">Joomla</a> |
|
<a id="magento" class="magento" href="test.html#magento">Magento</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<ul id="portfolio-source" style="display: none"> |
|
<li class="start all wordpress"> |
|
<a href="#" >Asia</a> |
|
</li> |
|
<li class=" all zendcart"> |
|
<a href="#" >Bagvine</a> |
|
</li> |
|
<li class=" all joomla"> |
|
|
|
<a href="#" >Broadway</a> |
|
</li> |
|
<li class="last all zendcart"> |
|
<a href="#" >carkey</a> |
|
</li> |
|
<li class="start all webapp"> |
|
<a href="#" >Freshbox</a> |
|
</li> |
|
<li class=" all webapp"> |
|
|
|
<a href="#" >AGBA</a> |
|
</li> |
|
<li class=" all joomla"> |
|
<a href="#" >HueCt</a> |
|
</li> |
|
<li class="last all zendcart"> |
|
<a href="#" >Moda</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
|
|
<a href="#" >QuickTIme</a> |
|
</li> |
|
<li class=" all zendcart"> |
|
<a href="#" >Plaza</a> |
|
</li> |
|
<li class=" all zendcart"> |
|
<a href="#" >SolarLink</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
|
|
<a href="#" >WBC</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
<a href="#" >FKC</a> |
|
</li> |
|
<li class=" all ee"> |
|
<a href="#" >EE</a> |
|
</li> |
|
<li class=" all magento"> |
|
|
|
<a href="#" >GReen Boom</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
<a href="#" >Hospital</a> |
|
</li> |
|
<li class="start all webapp"> |
|
<a href="#" >Alta</a> |
|
</li> |
|
<li class=" all ee"> |
|
|
|
<a href="#" >EFL</a> |
|
</li> |
|
<li class=" all wordpress"> |
|
<a href="#" >FBC</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
<a href="#" >Greenworld</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
|
|
<a href="#" >Happy Hour</a> |
|
</li> |
|
<li class=" all ee"> |
|
<a href="#" >InfoCreek</a> |
|
</li> |
|
<li class=" all wordpress"> |
|
|
|
<a href="#" >Just Stance</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
<a href="#" >Wayout Tech</a> |
|
</li> |
|
<li class="start all webapp"> |
|
<a href="#" >Ritelogic</a> |
|
</li> |
|
<li class=" all webapp"> |
|
|
|
<a href="#" >Twbadge</a> |
|
</li> |
|
<li class=" all webapp"> |
|
<a href="#" >Pocoo</a> |
|
</li> |
|
<li class="last all webapp"> |
|
<a href="#" >MangaAndMe</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
|
|
<a href="#" >DMV</a> |
|
</li> |
|
<li class=" all webapp"> |
|
<a href="#" >Buzz</a> |
|
</li> |
|
|
|
|
|
</ul> |
|
|
|
<ul id="portfolio"> |
|
<li class="start all wordpress"> |
|
<a href="#" >Asia</a> |
|
</li> |
|
<li class=" all zendcart"> |
|
<a href="#" >Bagvine</a> |
|
</li> |
|
<li class=" all joomla"> |
|
|
|
<a href="#" >Broadway</a> |
|
</li> |
|
<li class="last all zendcart"> |
|
<a href="#" >carkey</a> |
|
</li> |
|
<li class="start all webapp"> |
|
<a href="#" >Freshbox</a> |
|
</li> |
|
<li class=" all webapp"> |
|
|
|
<a href="#" >AGBA</a> |
|
</li> |
|
<li class=" all joomla"> |
|
<a href="#" >HueCt</a> |
|
</li> |
|
<li class="last all zendcart"> |
|
<a href="#" >Moda</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
|
|
<a href="#" >QuickTIme</a> |
|
</li> |
|
<li class=" all zendcart"> |
|
<a href="#" >Plaza</a> |
|
</li> |
|
<li class=" all zendcart"> |
|
<a href="#" >SolarLink</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
|
|
<a href="#" >WBC</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
<a href="#" >FKC</a> |
|
</li> |
|
<li class=" all ee"> |
|
<a href="#" >EE</a> |
|
</li> |
|
<li class=" all magento"> |
|
|
|
<a href="#" >GReen Boom</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
<a href="#" >Hospital</a> |
|
</li> |
|
<li class="start all webapp"> |
|
<a href="#" >Alta</a> |
|
</li> |
|
<li class=" all ee"> |
|
|
|
<a href="#" >EFL</a> |
|
</li> |
|
<li class=" all wordpress"> |
|
<a href="#" >FBC</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
<a href="#" >Greenworld</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
|
|
<a href="#" >Happy Hour</a> |
|
</li> |
|
<li class=" all ee"> |
|
<a href="#" >InfoCreek</a> |
|
</li> |
|
<li class=" all wordpress"> |
|
|
|
<a href="#" >Just Stance</a> |
|
</li> |
|
<li class="last all wordpress"> |
|
<a href="#" >Wayout Tech</a> |
|
</li> |
|
<li class="start all webapp"> |
|
<a href="#" >Ritelogic</a> |
|
</li> |
|
<li class=" all webapp"> |
|
|
|
<a href="#" >Twbadge</a> |
|
</li> |
|
<li class=" all webapp"> |
|
<a href="#" >Pocoo</a> |
|
</li> |
|
<li class="last all webapp"> |
|
<a href="#" >MangaAndMe</a> |
|
</li> |
|
<li class="start all wordpress"> |
|
|
|
<a href="#" >DMV</a> |
|
</li> |
|
<li class=" all webapp"> |
|
<a href="#" >Buzz</a> |
|
</li> |
|
</ul> |
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
|
<script type="text/javascript" src="http://axcoto.com/assets/js/transform/dist/jquery.transform-0.9.3.min.js"></script> |
|
<script> |
|
|
|
$(document).ready(function () { |
|
/** |
|
n: nav |
|
s: source |
|
d: destination |
|
l: sub item selector |
|
*/ |
|
var filterElements = function(n,s,d,l){n.click(function(){d.empty().append($(l.concat('.',$(this).attr('class')),s).clone(1)).fadeOut('fast').fadeIn('slow')})} |
|
|
|
|
|
var buttons = $('#portfolio-nav > a'); |
|
var folioContainer = $('#portfolio'); |
|
var sFolio = $('#portfolio-source'); |
|
filterElements(buttons, sFolio, folioContainer, 'li'); |
|
|
|
|
|
}) |
|
</script> |
|
</body> |
|
</html> |
Sorry. I didn't know that :(! I will try to make a JavaScript version wo using framework. Thanks