Reputation: 6509
Can someone please help explain why this works but this example doesn't?
I don't see any real difference other than the HTML but I wouldn't imagine this should break it. Or does it?
Every time I run the 2nd script, MixItUp
adds fail
to my board-list
class.
Character limits mean I can't add my JS here but you can find it in my Demo/FIDDLE.
My code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script>
<!-- The buttons -->
<ul>
<li>
<button class="btn-boo filter no-border" data-filter=".social"> Future</button>
</li>
<li>
<button class="btn-boo filter no-border" data-filter=".mainboard"> Mainboard</button>
</li>
<li>
<button class="btn-boo filter no-border" data-filter=".new-faces"> New Faces</button>
</li>
</ul>
<!-- The grid -->
<!-- Board Pictures -->
<div class="board-bloc">
<div class="board-container">
<ul id="models-cnt" class="board-list">
<!-- Board Item -->
<li class="board-item new-faces">
<a class="no-border board-item-image-link" href="#">
<div class="board-social-details">
<ul class="board-social-icons">
<li><img class="board-social-fb" src="img/social-facebook-white.svg" alt="Facebook Icon"></li>
<li><img class="board-social-tw" src="img/social-twitter-white.svg" alt="Twitter Icon"></li>
<li><img class="board-social-in" src="img/social-instagram-white.svg" alt="Instagram Icon"></li>
</ul>
<p class="board-social-count">4.5K</p>
</div>
<img class="board-item-image" src="http://placehold.it/200x200" alt="Model Thumb">
</a>
<div class="board-info">
<p class="board-name"><a class="no-border" href="#">Adriana Bucur</a></p>
<span class="board-favourite-star"><a class="no-border" href="#"><img src="img/favourite-star.svg" alt="Favourite"></a></span>
<span class="board-favourite-star item-favourited"><a class="no-border" href="#"><img src="img/favourite-star-full.svg" alt="Favourite"></a></span>
</div>
</li>
<!-- Board Item End -->
<!-- Board Item -->
<li class="board-item mainboard">
<a class="no-border board-item-image-link" href="#">
<div class="board-social-details">
<ul class="board-social-icons">
<li><img class="board-social-fb" src="img/social-facebook-white.svg" alt="Facebook Icon"></li>
<li><img class="board-social-tw" src="img/social-twitter-white.svg" alt="Twitter Icon"></li>
<li><img class="board-social-in" src="img/social-instagram-white.svg" alt="Instagram Icon"></li>
</ul>
<p class="board-social-count">4.5K</p>
</div>
<img class="board-item-image" src="http://placehold.it/200x200" alt="Model Thumb">
</a>
<div class="board-info">
<p class="board-name"><a class="no-border" href="#">Adriana Bucur</a></p>
<span class="board-favourite-star"><a class="no-border" href="#"><img src="img/favourite-star.svg" alt="Favourite"></a></span>
<span class="board-favourite-star item-favourited"><a class="no-border" href="#"><img src="img/favourite-star-full.svg" alt="Favourite"></a></span>
</div>
</li>
<!-- Board Item End -->
</ul>
</div>
</div>
<!-- Board Pictures End -->
Upvotes: 0
Views: 660
Reputation: 1658
It tryes to find blocks with mix
-class, but it can't. I've fixed your fiddle https://jsfiddle.net/br3t/hq2j17yp/10/
Upvotes: 1