API Methods

Overview
Methods Details

Overview

MixItUp’s API provides an extensive list of methods for advanced interactivity, feedback and real time configuration.

The MixItUp API uses a jQueryUI-inspired syntax.

Method Details

Optional parameters are shown in square-brackets.

instantiate
filter
sort
changeLayout
multiMix
prepend
append
insert
isMixing
isLoaded
setOptions
getOption
destroy

instantiate

.mixItUp([configurationObject])

Instantiate MixItUp via a jQuery object.

Parameters	configurationObject
Type	Object
Default	`null`
Description	See Configuration Object

This is the first and most important method of any MixItUp project and allows us to turn a DOM element into a MixItUp container.

With no parameters, MixItUp will be instantiated with the default configuration options. For advanced configuration, any number of options may be passed as an object literal. See Configuration Object.

$('#Container').mixItUp();

Instantiate MixItUp on the element with ID "Container", with its default configuration options

$('#Container').mixItUp({
	animation: {
		effects: 'fade translateZ(500px)',
		duration: 300
	},
	selectors: {
		target: 'li'
	}
});

Instantiate MixItUp with customized configuration options

filter

.mixItUp('filter', filterCommand [,animate] [,callback])

Filter the container to show or hide target elements.

Parameters	filterCommand	animate	callback
Type	String/Object/Function	Boolean	Function
Default	-	`true`	`null`
Description	A selector string, function or object against which to match desired target elements.	A boolean indicating whether to animate the filtering operation (asynchronously), or perform it instantly (synchronously).	An optional callback function to be called after the filter operation has completed.

The filter command most commonly takes the form of a CSS selector string targeting the desired elements to show.

It may also take the form of a jQuery object, DOM element, or function. See jQuery’s .filter() documentation for more information.

$('#Container').mixItUp('filter', '.category-1');

Show target elements with the class "category-1"

$('#Container').mixItUp('filter', '.category-2', false);

Show target elements with the class "category-2", with no animation.

$('#Container').mixItUp('filter', $myCollection, function(state){
	// callback function
});

Show target elements matching a jQuery object, and call a callback function on completion.

This method is a short-hand for .mixItUp('multiMix', {filter: filterCommand})

sort

Sort the target elements by one or more arbitrary attributes or their order in the DOM.

.mixItUp('sort', sortCommand [,animate] [,callback])

Parameters	sortCommand	animate	callback
Type	String	Boolean	Function
Default	-	`true`	`null`
Description	A sort string made up of two colon-separated parts as follows: `'attribute-name:order'`	A boolean indicating whether to animate the filtering operation (asynchronously), or perform it instantly (synchronously).	An optional callback function to be called after the filter operation has completed.

The sort command is a space-separated string of colon-separated pairs. The first part of each pair is the name of the data attribute to sort by, and the second part of the pair is the order to sort by (asc or desc).

Commonly only one pair is passed to sort by a single attribute. However, any number of pairs may be passed to sort by multiple attributes in order of priority.

The second part of each pair is optional as ascending order is assumed.

The values random and default (the elements’ original order in the DOM) are also accepted.

$('#Container').mixItUp('sort', 'name:asc');

Sort target elements by the value of their "data-name" attributes, in ascending order.

$('#Container').mixItUp('sort', 'random', false);

Sort target elements by a random order, with no animation.

$('#Container').mixItUp('sort', 'age:desc name:asc', function(state){
	// callback function
});

Sort target elements first by their "data-age" attribute, and then by "data-name". Call a callback function when complete.

This method is a short-hand for .mixItUp('multiMix', {sort: sortCommand})

changeLayout

.mixItUp('changeLayout', layoutCommand [,animate] [,callback])

Change the layout of the container by changing the value of the CSS “display” property for target elements (e.g. block or inline-block), and/or applying a class to the container.

Parameters	layoutCommand	animate	callback
Type	String/Object	Boolean	Function
Default	-	`true`	`null`
Description	A string containing the desired display value for target elements, and (as an object) also an optional class to be applied to the container.	A boolean indicating whether to animate the filtering operation (asynchronously), or perform it instantly (synchronously).	An optional callback function to be called after the filter operation has completed.

When passed as a string, the layout command sets the value of the CSS “display” property for target elements:

$('#Container').mixItUp('layoutChange', 'block');

Change the layout by changing target elements to "display: block"

$('#Container').mixItUp('layoutChange', {
	display: 'block',
	containerClass: 'list'
}, function(state){
	// callback function
});

Change the target display value, add the class "list" to the container, and call a callback function when complete.

This method is a short-hand for .mixItUp('multiMix', {layoutChange: layoutCommand})

multiMix

.mixItUp('multiMix', multiMixObject [,animate] [,callback])

Perform simultaneous filter, sort, and layoutChange operations.

Parameters	multiMixObject	animate	callback
Type	Object	Boolean	Function
Default	-	`true`	`null`
Description	The multiMixObject contains individual properties for the filter, sort and layoutChange methods and their respective commands. Any or all of these properties may be passed with the same syntax as the individual method.	A boolean indicating whether to animate the filtering operation (asynchronously), or perform it instantly (synchronously).	An optional callback function to be called after the filter operation has completed.

$('#Container').mixItUp('multiMix', {
	filter: '.category-1, .category-2',
	sort: 'name:asc',
	changeLayout: {
		containerClass: 'flex'
	}
});

Perform filter, sort and layoutChange operations in a single animation.

prepend

.mixItUp('prepend', elements [,multiMixObject] [,callback])

Insert an element or collection of elements into the container, before all existing target elements.

Parameters	elements	multiMixObject	callback
Type	Object	Object	Function
Default	-	`null`	`null`
Description	A jQuery object collection of one or more elements to insert, or a single DOM element.	A multiMix object containing instructions about what to do after the insertion of elements.	An optional callback function to be called after elements have been inserted, or if applicable, after the multiMix operation has completed.

If no multiMix object is passed, elements are inserted and MixItUp is refreshed. However, elements remain hidden until a subsequent filter operation is performed.

This method is recommended over prepending elements into the container manually (via native DOM methods) as it prompts a “refresh”, updating MixItUp’s sorting and filtering arrays. It also ensures that white space is maintained between inserted elements, which is vital for inline-block grids.

$('#Container').mixItUp('prepend', $myElement, {filter: '.category-1'})

Prepend an element into the container via a jQuery object, and show all elements with the class "category-1"

This method is a short-hand for .mixItUp('insert', 0, elements)

append

.mixItUp('append', elements, [,multiMixObject] [,callback])

Insert an element or collection of elements into the container, after all existing target elements.

Parameters	elements	multiMixObject	callback
Type	Object	Object	Function
Default	-	`null`	`null`
Description	A jQuery object collection of one or more elements to insert, or a single DOM element.	A multiMix object containing instructions about what to do after the insertion of elements.	An optional callback function to be called after elements have been inserted, or if applicable, after the multiMix operation has completed.

If no multiMix object is passed, elements are inserted and MixItUp is refreshed. However, elements remain hidden until a subsequent filter operation is performed.

This method is recommended over appending elements into the container manually (via native DOM methods) as it prompts a “refresh”, updating MixItUp’s sorting and filtering arrays. It also ensures that white space is maintained between inserted elements, which is vital for inline-block grids.

$('#Container').mixItUp('append', $newObject, {filter: '#NewObject'})

Append an element into the container via a jQuery object, and show it via its ID.

This method is a short-hand for: .mixItUp('insert', self._state.totalTargets, elements)

insert

.mixItUp('insert', index, elements, [,multiMixObject] [,callback])

Insert an element or collection of elements into the container at an arbitrary index.

Parameters | index | elements | multiMixObject | callback --- | --- | --- | --- Type | Number | Object | Object | Function Default | - | - | null | null Description | The index of the target element before which to insert elements. | A jQuery object collection of one or more elements to insert, or a single DOM element. | A multiMix object containing instructions about what to do after the insertion of elements. | An optional callback function to be called after elements have been inserted, or if applicable, after the multiMix operation has completed.

If no multiMix object is passed, elements are inserted and MixItUp is refreshed. However, elements remain hidden until a subsequent filter operation is performed.

This method is recommended over appending elements into the container manually (via native DOM methods) as it prompts a “refresh”, updating MixItUp’s sorting and filtering arrays. It also ensures that white space is maintained between inserted elements, which is vital for inline-block grids.

$('#Container').mixItUp('insert', 5, $('<div class="mix category-1"></div>'), {filter: 'all'})

Create and insert a new object into the container before the 5th target element, and show all elements.

isMixing

.mixItUp('isMixing')

This is method returns a boolean and is used to find out if a filter, sort, or layoutChange operation is in progress. It can be useful for custom user-interfaces where queuing is not enabled.

if(!$('#Container').mixItUp('isMixing')){
	// If container is not busy
}

Do something only if an operation is not currently in progress.

isLoaded

.mixItUp('isLoaded')

This method returns a boolean and is used to find out if MixItUp has been instantiated on a particular jQuery object. It is useful for debugging and also for ajax situations where MixItUp containers may be created dynamically.

var $container = $('#Container');

if(!$container.mixItUp('isLoaded')){
	$container.mixItUp();
}

Instantiate MixItUp on the container, only if it has not already been instantiated.

setOptions

.mixItUp('setOptions', configurationObject)

Set or change configuration option in real time, after MixItUp has instantiated.

Parameters	configurationObject
Type	Object
Default	`null`
Description	See Configuration Object

Any options changed will be reflected when the next operation is performed.

$('#Container').mixItUp('setOptions', {
	animation: {
		effects: 'fade scale translateX stagger'
	},
	callbacks: {
		onMixEnd: function(){
			// do something 
		}
	}
});

Change the animation effects, and add a callback function.

$('#Container').mixItUp('setOptions', {
	animation: {
		enable: false
	},
	callbacks: {
		onMixEnd: null
	}
});

Disable effects, and remove any existing callback function

getOption

.mixItUp('getOption', stringKey)

Retrieve the value of any configuration option via its key.

Parameters	stringKey
Type	String
Description	The key of the configuration option you wish to retrieve the value for. Since all configuration options are nested properties of the configuration object, the string must take the form `'parentObject.propertyName'`.

var duration = $('#Container').mixItUp('getOption', 'animation.duration');

alert(duration);

// alerts 600

Retrieve the value of the "duration" animation option.

getState

.mixItUp('getState')

Retrieve the State Object.

var state = $('#Container').mixItUp('getState');

alert(state.activeFilter);

// alerts '.category-1'

Save the state object to a variable and find the active filter

destroy

mixItUp('destroy', hideAll)

Unbind all handlers, and delete the instance of MixItUp from the memory.

Parameters	hideAll
Type	Boolean
Default	`false`
Description	A boolean indicating whether to also remove the inline “display” style from all target elements added by MixItUp, thus hiding any elements currently shown.

$('#Container').mixItUp('destroy');

Destroy the instance of MixItUp

$('#Container').mixItUp('destroy', true);

Destroy MixItUp, and reset all target elements to "display: none"

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

api-methods.md

api-methods.md

API Methods

Overview

Method Details

instantiate

filter

sort

changeLayout

multiMix

prepend

append

insert

isMixing

isLoaded

setOptions

getOption

getState

destroy

Files

api-methods.md

Latest commit

History

api-methods.md

File metadata and controls

API Methods

Overview

Method Details

instantiate

filter

sort

changeLayout

multiMix

prepend

append

insert

isMixing

isLoaded

setOptions

getOption

getState

destroy