How to Markup with dynamic mixitup step by step

Shortlink:

What is MixItUp?

Mix It up

MixItUp is a jQuery plugin providing animated filtering and sorting.

Great for managing any categorised or ordered content like portfolios, galleries and blogs, MixItUp can also function as a powerful tool for engaging application UI and data-visualisation.

Why MixItUp?

MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts.

MixItUp works with your layout. Want to use percentages, media queries, inline-block, CSS3 columns or even flex box? No problem.

Features

Learn what MixItUp can do for your project

Core Features

  • 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

New in Version 2

  • Optimised animation engine utilising requestAnimationFrame
  • Extensible object-oriented architecture
  • Flex box compatibility (experimental)
  • CSS3 columns compatibility
  • Fine-tune your animation effects with customisable parameters
  • Reverse the direction of effects for elements being filtered out
  • Queue filter, sort and layout change operations
  • Metro/iOS-inspired “stagger” effect
  • CSS-selector based filtering
  • Multi-dimensional sorting
  • Retrieve real-time data via the state object
  • Extensions
  • Transition width/height of target elements (experimental)

Browser & Platform Support

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

You can see demo or details Click Here

Download Here From Github

ISOtope (It’s Premium)

You can see details or demo Click Here

Download Here from Github

 

Mix It Up Markup

JavaScript Call

Step # 01: Download Mixitup

Step # 02: call/link jquery.mixitup.min.js in your html file. file source mixitup-master>build > jquery.mixitup.min.js

Step# 03: call/link http://code.jquery.com/jquery-1.11.3.min.js or full code below


<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

HTML Markup

Step# 04: Build your container:


<div id="Container">
<div class="mix category-1" data-my-order="1"> ... </div>
<div class="mix category-1" data-my-order="2"> ... </div>
<div class="mix category-2" data-my-order="3"> ... </div>
<div class="mix category-2" data-my-order="4"> ... </div>
</div>

MixItUp targets elements with the class mix inside a container. Categories for filtering are added as classes, and sort attributes are added as custom data attributes.

Step #05:Build your filter controls:


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

Filtering happens when filter buttons are clicked.

CSS

Step # 06: Hide target elements:

#Container .mix{
display: none;
}

In your project’s stylesheet, set the display property of target elements to none. MixItUp will show only those elements which match the current filter.

JS

Step# 07: Instantiate MixItUp on your container using jQuery:


$(function(){
$('#Container').mixItUp();
});

Or Full Script


<script type="text/javascript">
$(function(){
$('#Container').mixItUp();
});
</script>

Using our container’s ID, we can instantiate MixItUp with the jQuery method .mixItUp()

You can see more docs just click here

 

Now you can see your Mix It Up Working…. !

How to dynamic mixitup or Isotope in WordPress step by step

 

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!