Unfortunately we cannot provide support but feedback and feature requests are welcome! Contact us
Latest Development Updates
11/13/13 - Version 1.5.5 • Fixes a layout bug in Chrome 31.x (fixed in Canary 33.x). More info here.
5/12/13 - Version 1.5 released with many new features: • Integrate MixItUp with Ajax using the new remix method (see Development FAQs for a code example). • Perform simultaneous filter, sort, and layout operations with the new multimix method. • Perform complex multi-dimensional filtering (see our new National Parks demo). • Sort your target elements on instantiation with the new sortOnLoad configuration option. • Various bug fixes (see git commits).
More demos coming soon!
If you're experimenting with our sandbox demo on Chrome and wondering why the "WindUp" and "WindBack" easings aren't working, this is caused by a Chrome regression bug that's been left unfixed since version 25. We're hoping to see this fixed with the release of Chrome version 28 version 29 (confirmed in Canary), but in the mean time check out the demo in Safari or Firefox to see the easings working.
What Is MixItUp?
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content! Check out our demos for some inspiration »
How does it work?
MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. It's an extremely efficient approach that makes the most of your modern browser's rendering power, and avoids more resource-heavy approaches involving jQuery .animate() and position: absolute.
By not forcing absolute positioning on your design, all elements remain in the document flow and your fluid layout will behave exactly as it normally would - leaving you free to use percentages and media queries to achieve that pixel-perfect responsive design! When MixItUp is finished working its magic, it cleans up its code and gets outta your DOM.
Which browsers and devices can I use it with?
MixItUp is optimized for the current generation of modern, CSS3-ready browsers. Due to its light-weight and efficient approach, It works beautifully and smoothly on all modern devices including smartphones and tablets.
In older browsers (such as Internet Explorer 9 and below) that do not support CSS3 transitions, MixItUp will degrade gracefully to a simple hide/show filter. By not including extensive jQuery animation fall-backs, we've kept MixItUp ultra-light and optimized for the future of the web.
MixItUp is fully functional in:
How may I use MixItUp?
You are free to use MixItUp on any commercial or non-commercial project. Just be sure to keep the license information and attribution in the code.
We're building some nifty demos of MixItUp to show you some cool applications and help get you off the ground.
» Build Your Container and Content
The filtering categories of each target element should be entered into its class attribute (after the targetSelector class if you are using a class):
Filtering happens when filter buttons are clicked. By default MixItUp will apply filtering click handlers to any element with the class 'filter', but this can be changed with the the 'filterSelector' configuration option. When a filter category is active, its corresponding filter buttons gets the class 'active', which can be used for styling active buttons.
These buttons could also be part of an unordered list. The desired filter categories of each filter button should be entered as the "data-filter" attribute. See the 'filterLogic' option for details on how MixItUp handles multiple filters.
» Build Your Sort Controls
Sorting happens when sort buttons are clicked. By default MixItUp will apply sorting click handlers to any element with the class 'sort', but this can be changed with the the 'sortSelector' configuration option.
These buttons could also be part of an unordered list, with the data attribute to sort by entered as the "data-sort" attribute, and the order to sort by entered as the "data-order" attribute:
If you want to go it alone though, here are some dos and don'ts:
Because MixItUp never interferes the flow, width, or height of your elements, the styling and design is completely up to you. Just be sure to make sure your target elements have the following CSS properties in your stylesheet:
These two styles ensure that there's no FOUC (flash of unstyled content) or showing of hidden target elements before MixItUp instantiates. This way, MixItUp controls the initial loading of your elements, when your page is ready.
You'll probably want to add these two properties only once you've finished designing your layout and you're ready to instantiate MixItUp - otherwise you won't be able to see your elements!
Avoid applying styles such as position: absolute or float: left/right to your elements, as doing so removes your elements from the natural flow of the document. If you're looking to build a layout that doesn't follow the natural horizontal documental flow, we recommend David DeSandro's excellent plugin Isotope. MixItUp is intended as a lightweight and modern filter and sort plugin - not a layout tool.
The following callback functions are also declared in the configuration object:
Does MixItUp have any layout limitations?
MixItUp is a filter and sort tool — not a layout tool. This means that you control the layout of your content 100% via CSS, and MixItUp animates the manipulation of that content — whether that's hiding and showing elements, or re-ordering them.
In terms of the layout, MixItUp works best in layouts where elements are flowed inline like text, and not floated or absolutely positioned. Our favorite fluid grid layout uses percentages, inline-block elements, media queries and our secret sauce, text-align: justify. Read more about this layout technique at the Barrel blog.
MixItUp isn't limited only to grids though — it works beautifully on horizontal and vertical lists too!
How can I dynamically load (Ajax) new target elements to the container?
When dynamically loading new target elements via Ajax or another method, elements can be added to the DOM using jQuery's .after(), or similar methods. If you are using a text-align: justify layout, as recommended above, care should be taken to ensure new elements have whitespace before and after them to allow for margins, and also that new elements are added after the last target element, but before any 'gap' elements. For example:
// Get total number of target elements:
var totalElements = $('#Grid').config.origOrder.length;
// Add new elements(s) after last target element (subtract 1 as .eq() is zero-based):
$('#Grid').find('.mix').eq(totalElements - 1).after(' <li class="mix dogs">...</li> ');
// Note the spaces before and after the <li> tag to ensure whitespace is maintained.
// Perform a remix and fade-in all new elements:
After the new elements have been added, the remix method must always be called to rebuild the default order array, otherwise new elements will be deleted on sort.
Is MixItUp compatible with Drag & Drop functionality?
Yes — Just instantiate jQuery UI Sortable on the same container as MixItUp, and drag & drop away. For an example, see our Playing Cards demo »
How consistent is the rendering performance of MixItUp?
CSS3 transition performance is best when animating graphically simple elements such as those containing text, pure css, and vectors. Adding images such as pngs and jpgs, and complex CSS3 effects like filters and box-shadows to elements will negatively impact framerate on slower devices such as smartphones. If you keep your image file sizes as low as possible however, this should not be noticeable.
Also worth nothing is that the rendering performance of CSS3 transitions is currently better in Webkit-based browsers than Firefox.
Are MixItUp methods chainable?
Yes — all MixItUp methods maintain jQuery object chainability.
Can I apply click handlers to MixItUp target elements?
Yes — however, as target elements must be removed and re-added to the DOM during MixItUp's sort function, any click handlers bound directly to these elements will be destroyed. To prevent this, we recommend using jQuery's .delegate() method, or re-binding your handlers after the sort function is finished.
How do I achieve a layout with no margins between my elements?
While easily achieved using floats, when using inline-block-based layouts, there will always be "white-space" between elements, equal to the width of the space between words of text, even when margins are set to 0. To collapse this whitespace, the following css property should be added to your container:
Reducing line-height, word-spacing, and letter spacing, will also achieve the same result of collapsing whitespace. If your target elements contain text, these properties should then be defaulted back to the desired amounts at the child level. For example:
What is the "mix_all" class for?
You may have noticed that this class is added automatically to all MixItUp target elements. This simply allows MixItUp perform filtering and sorting on "all" elements as if it were any other filter category. It is added only on instantiation and remix, and not on individual filter or sort operations. It should never be added manually to your target elements.
Why are there no fallback animations for non-CSS3 browsers (IE9 and below)?
MixItUp can still be used as an effective filter and sort tool in IE8/9, albeit with no animations. The reason for this is as follows.
While we realize that animations in IE8/9 may be important to some developers, the market-share of these browsers is declining, and the people that use them are already accustomed to receiving an inferior user-experience on a daily basis. As well as keeping MixItUp as lightweight as possible, we'd like to play our part in moving the web forward and getting users onto standards-compatible browsers, and as such we currently have no plans to integrate fallback animations for IE8/9 into MixItUp.
Are you using MixItUp on your logo?
We sure are — we'd like to think there are many creative visual uses for MixItUp beyond just the filtering and sorting of content, so please let us know if you do something cool with MixItUp!
The logo uses MixItUp with a few of its methods firing in a setInterval() function. To save on resources, we also pause the logo while the sand box is in use, and resume it after 3 seconds of inactivity. Feel free to check out our code »
Check out some websites that have put MixItUp to good use!