How to Markup with dynamic mixitup step by step
Md Abul Bashar | 7,982 views | December 28, 2015 | Tips And Tricks,WordPress Themes Development | No | 9:35 AM |
What is MixItUp?
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
<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
You have to enjoy this articel? Don't forget subscribes this site.
If you want to get our update article, then please subscribe this site.
This title last post
7,982 views | December 28, 2015 | 9:35 AM