I'm trying to create a portfolio page that filters depending on the category you choose. The problem I'm having is that when I click on the category the images doesn't move to show the ones that need to be selected.
I'm also using mixitup.min.js
My HTML
<ul id="filter-list" class="clearfix">
<li class="filter" data-filter="all">All</li>
<li class="filter" data-filter="dogs">Dogs</li>
<li class="filter" data-filter="cats">cats</li>
</ul>
<ul id="portfolio2">
<li class="item cats"><a href="#"><img src="http://i.imgur.com/YW5Y1YX.jpg"> </a>
</li>
<li class="item cats"><a href="#"><img src="http://i.imgur.com/vFEg6ef.jpg"></a>
</li>
<li class="item dogs"><a href="#"><img src="http://i.imgur.com/cEcFlSA.jpg"></a>
</li>
<li class="item dogs"><a href="#"><img src="http://i.imgur.com/UyDuMVX.jpg"></a>
</li>
<li class="item dogs"><a href="#"><img src="http://i.imgur.com/cxMNwCe.jpg"></a>
</li>
<li class="item cats"><a href="#"><img src="http://i.imgur.com/PHKC3T9.jpg"></a>
</li>
<li class="item cats"><a href="#"><img src="http://i.imgur.com/naM08qz.jpg"></a>
</li>
<li class="item cats"><a href="#"><img src="http://i.imgur.com/t4Erv0t.jpg"></a>
</li>
My CSS
#filter-list {
display: block;
width: 100%;
text-align: center;
margin-bottom: 25px;
}
#filter-list li {
display: inline-block;
width: auto;
padding: 6px 10px;
margin-right: 15px;
font-size: 1.2em;
cursor: pointer;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#filter-list li:hover {
background: #e7e2eb;
}
#filter-list li.active {
font-weight: bold;
background: #d8c5e7;
}
/** media queries **/
@media screen and (max-width: 720px) {
h1 {
font-size: 2.7em;
}
}
@media screen and (max-width: 500px) {
h1 {
font-size: 2.0em;
}
#filter-list {
padding: 0 18px;
}
#filter-list li {
display: block;
margin-bottom: 3px;
}
#portfolio {
margin-bottom: 20px;
}
#portfolio .item {
width: 100%;
margin-bottom: 12px;
margin-right: 0;
}
My JS
$(function () {
$('#portfolio2').mixitup({
targetSelector: '.item',
transitionSpeed: 450
});
});
Here is a jsfiddle:JSFIDDLE
It's probably something really small that I'm not seeing. I hope I explained everything ok.
So... for some unexplained reasons, it seems you need to use DIVs instead of UL>LIs. If you change the HTML, it will work as planned.
HTML:
<div id="Container">
<div class="mix cats"><a href="#"><img src="http://i.imgur.com/YW5Y1YX.jpg"></a></div>
<div class="mix cats"><a href="#"><img src="http://i.imgur.com/vFEg6ef.jpg"></a></div>
<div class="mix dogs"><a href="#"><img src="http://i.imgur.com/cEcFlSA.jpg"></a></div>
<div class="mix dogs"><a href="#"><img src="http://i.imgur.com/UyDuMVX.jpg"></a></div>
<div class="mix dogs"><a href="#"><img src="http://i.imgur.com/cxMNwCe.jpg"></a></div>
<div class="mix cats"><a href="#"><img src="http://i.imgur.com/PHKC3T9.jpg"></a></div>
<div class="mix cats"><a href="#"><img src="http://i.imgur.com/naM08qz.jpg"></a></div>
<div class="mix cats"><a href="#"><img src="http://i.imgur.com/t4Erv0t.jpg"></a></div>
</div>
One other things, it is written in the documentation on the site, but the info does not stand out. The author should have added some kind of huge boldy/red banner with the text important to a specific section. You need to hide all element with css. If you don't do it, the plugin will work, but it will be a bit jumpy when filtering data.
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. 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.
CSS:
#Container .mix{
display: none;
}
If you followed all instructions correctly, the filtering will work. JSFIDDLE