MixItUp Example 2

Test filtering using mixitup jQuery plugin

by davidpauljunior

HTML

<div id="filter">
    <div class="group">
        <span>Filter Car Make</span>
        <ul class="filter-list">
            <li data-filter="all" class="active" data-dimension="carmake">All</li>
            <li data-filter="audi" data-dimension="carmake">Audi</li>
            <li data-filter="bmw" data-dimension="carmake">BMW</li>
            <li data-filter="ford" data-dimension="carmake">Ford</li>
            <li data-filter="toyota" data-dimension="carmake">Toyota</li>
        </ul>
    </div>
    <div class="group">
        <span>Filter Transmission Type</span>
        <ul class="filter-list">
            <li data-filter="all" data-dimension="transmission" class="active">All</li>
            <li data-filter="automatic" data-dimension="transmission">Audi</li>
            <li data-filter="manual" data-dimension="transmission">BMW</li>
        </ul>
    </div>
</div>

<ul id="cars">
    <li class="mix audi manual">
        <h3>Audi</h3>
        <p>Some text here</p>
    </li>
    <li class="mix audi automatic">
        <h3>Audi</h3>
        <p>Some text here</p>
    </li>
    <li class="mix bmw automatic">
        <h3>BMW</h3>
        <p>Some text here</p>
    </li>
    <li class="mix ford manual">
        <h3>Ford</h3>
        <p>Some text here</p>
    </li>
    <li class="mix ford manual">
        <h3>Ford</h3>
        <p>Some text here</p>
    </li>
    <li class="mix toyota automatic">
        <h3>Toyota</h3>
        <p>Some text here</p>
    </li>
</ul>

CSS

li {
    list-style: none;
}
.filter-list li {
    color: #0066cc;
    cursor: pointer;
}

#cars .mix{
    opacity: 0;
    display: none;
    padding: 10px;
    border: 1px solid #d0d0d0;
    width: 150px;
    margin: 0 0 10px 10px;
}

JavaScript

/*
* MIXITUP - A CSS3 and JQuery Filter & Sort Plugin
* Version: 1.5
* License: Creative Commons Attribution-NoDerivs 3.0 Unported - CC BY-ND 3.0
* http://creativecommons.org/licenses/by-nd/3.0/
* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder.
* Author: Patrick Kunka
* Copyright 2012-2013 Patrick Kunka, Barrel LLC, All Rights Reserved
* 
* http://mixitup.io
*/

(function(e){function k(c,a,g,d,b){function j(){l.unbind();a&&v(a,g,d,b);b.startOrder=[];b.newOrder=[];b.origSort=[];b.checkSort=[];u.removeStyle(b.prefix+"filter, filter, "+b.prefix+"transform, transform, opacity, display").css(b.clean).removeAttr("data-checksum");window.atob||u.css({display:"none",opacity:"0"});l.removeStyle(b.prefix+"transition, transition, "+b.prefix+"perspective, perspective, "+b.prefix+"perspective-origin, perspective-origin, "+(b.resizeContainer?"height":""));"list"==b.layoutMode?
(q.css({display:b.targetDisplayList,opacity:"1"}),b.origDisplay=b.targetDisplayList):(q.css({display:b.targetDisplayGrid,opacity:"1"}),b.origDisplay=b.targetDisplayGrid);b.origLayout=b.layoutMode;setTimeout(function(){u.removeStyle(b.prefix+"transition, transition");b.mixing=!1;if("function"==typeof b.onMixEnd){var a=b.onMixEnd.call(this,b);b=a?a:b}})}clearInterval(b.failsafe);b.mixing=!0;if("function"==typeof b.onMixStart){var f=b.onMixStart.call(this,b);b=f?f:b}for(var h=b.transitionSpeed,f=0;2>
f;f++){var m=0==f?m=b.prefix:"";b.transition[m+"transition"]="all "+h+"ms linear";b.transition[m+"transform"]=m+"translate3d(0,0,0)";b.perspective[m+"perspective"]=b.perspectiveDistance+"px";b.perspective[m+"perspective-origin"]=b.perspectiveOrigin}var r=b.targetSelector,u=d.find(r);u.each(function(){this.data={}});var l=u.parent();l.css(b.perspective);b.easingFallback="ease-in-out";"smooth"==b.easing&&(b.easing="cubic-bezier(0.25, 0.46, 0.45, 0.94)");"snap"==b.easing&&(b.easing="cubic-bezier(0.77, 0, 0.175,...