MixItUp – Animated filtering and sorting with jQuery

  • mix-it-up
  • mix-it-up-01

Animated filtering and sorting has become really popular when it comes for displaying creative work in more engaging way. MixItUp is a great plugin for organizing any categorized content such as blogs, galleries and portfolios. MixItUp is also be used as a mighty tool for for appealing UI applications and data-visualisation.

Some of the core features include:

  • Filter and sort elements with CSS3-optimised animations
  • Build on top of your existing percentage-based responsive layouts and media queries
  • Control filtering and sorting via a simple clickable interface or build more complex custom UI via an extensive API
  • Customise your animations with CSS3 transforms and easing
  • Add and remove elements in real time via an Ajax-friendly API
  • Perform simultaneous filter, sort, and layout change operations

When it comes to browser support MixItUp is:

  • Fully functional in desktop Chrome, Safari and Firefox
  • Fully functional in iOS and Android browsers
  • Functional in IE8+ with animations disabled, fully functional IE10+

See the interactive demo on codepen

See the Pen [MixItUp] Get Started Demo by patrickkunka (@patrickkunka) on CodePen.

 Get Started

Build Your Content

Container and Target Elements

MixItUp filters and sorts content inside a container. Your container should have a unique ID that MixItUp will use to reference it. If your container does not have an ID, MixItUp will randomly generate one. By default MixItUp will look for elements to filter and sort within your container with the class ’mix’ but this can be changed via the configuration object. We will call these elements target elements.

How you style your container and target elements is up to you. MixItUp is designed to be compatible with modern percentage-based responsive layouts and for that reason we recommend flow-based layouts such as inline-block orflex box rather than using floats. Need to brush up on your grids? Check out ourresponsive grids tutorial to learn more.

<div id="Container">
	<div class="mix"></div>
	<div class="mix"></div>
	<div class="mix"></div>
	<div class="mix"></div>
</div>

» A typical MixItUp container containing target elements with the class “mix”.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Filtering and Sorting

For MixItUp to be able to filter and/or sort the target elements correctly, each one should be given specific data. For filtering, each category that the target element belongs to should be added as an additional class name.

For sorting we’ll need to add a new “data” attribute of our choice to the target element containing information about its order in comparison to its siblings.

<div id="Container">
	<div class="mix category-1" data-myorder="2"></div>
	<div class="mix category-2" data-myorder="4"></div>
	<div class="mix category-1" data-myorder="1"></div>
	...
	<div class="mix category-2" data-myorder="8"></div>
</div>

» Classes for filtering and data attributes for sorting have been added to the target elements.

Build Your Controls

Filtering Controls

Filtering happens when filter buttons are clicked. By default MixItUp will apply filtering click handlers to any clickable element with the class ’filter’ but this can be changed via the configuration object.

Each filter button requires the attribute data-filter containing a CSS selector of the elements you wish to show which is typically the class name of that category (eg. data‑filter=".category-1").

The data‑filter attribute also accepts the values all and none.

When a filter category is active its corresponding filter buttons gets the class ’active’ which can be used for styling active buttons.

<div class="filter" data-filter="all">Show All</div>
<div class="filter" data-filter=".category-1">Category 1</div>
<div class="filter" data-filter=".category-2">Category 2</div>

» A list of filter buttons. Each one requires a “data-filter” attribute with a CSS selector targeting the elements you wish to show.

Sorting Controls

Sorting happens when sort buttons are clicked. By default MixItUp will apply filtering click handlers to any clickable element with the class ’sort’ but this can be changed via the configuration object.

Each sort button requires the attribute data‑sort containing a colon-seperated string; the first part being the name of the data attribute you wish to sort by, and the second part being the order (eg. data‑sort="myorder:asc").

The data‑sort attribute also accepts the values default and random.

Sorting by default will sort elements according to the order that they appear in the DOM on page load. The second part of the string is optional, as ascending order is assumed by default.

When a sort order  is active, its corresponding sort buttons gets the class ’active’ which can be used for styling active buttons.

<div class="sort" data-sort="default">Default</div>
<div class="sort" data-sort="myorder:asc">Ascending</div>
<div class="sort" data-sort="myorder:desc">Descending</div>
<div class="sort" data-sort="random">Random</div>

» A list of sort buttons. Each one requires a “data-sort” attribute containing the name of the attribute you wish to sort by, and the order.

Advanced Filtering

Consistent with jQuery’s .filter() method, multiple CSS selectors can be combined to mimic logical operations. For example:

<div class="filter" data-filter=".category-1.category-2"> ... </div>

// Show target elements that have both classes category-1 AND category-2

<div class="filter" data-filter=".category-1, .category-2"> ...</div>

// Show target elements that have either classes category-1 OR category-2

» CSS Selectors can be combined for advanced filtering.

To learn more about advanced filtering, check out our Advanced Filtering tutorial.

Advanced Sorting

Any number of custom sorting attributes may be combined in order of priority as a space-separated string:

<div class="sort" data-sort="age:desc name:desc"> ... </div>

» Target elements are sorted firstly by their data-age attribute and then by data-name.

You can also filter and sort your target elements directly via the filter, sort, and multiMix API Methods without physical controls.

Hide Target Elements

Before we get to the fun part, there’s one small but crucial CSS rule we must add to our project’s stylesheet to hide our target elements.
#Container .mix{
	display: none;
}

» Target elements must be hidden by default in your project’s stylesheet.

If you’ve been using another display setting such as “display: inline-block” or “display: block” to design your target elements, you may now replace it with “none”. MixItUp will add the display value of your choice as an inline-style (the default is “inline-block”).By making our target elements hidden by default we can both control the animation of how our elements appear, and also prevent any unwanted flash of content while MixItUp instantiates. This is particularly useful if we only want to show a small subset of our target elements initially or if MixItUp’s initial loading is delayed by other JavaScript on the page.

MixItUp

We’re ready to go! Firstly make sure the jQuery and MixItUp JavaScript files are loaded into your document before your project’s own JavaScript file. You can either host MixItUp yourself or load it via our CDN at jsDeliver.
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
		<script src="main.js"></script>
	</body>
</html>

» JavaScript assets are typically loaded before the closing body tag of your document.


Download MixItUp


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *