michaelmcgurk
michaelmcgurk

Reputation: 6509

`fail` class added to MixItUp container in jQuery

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

Answers (1)

br3t
br3t

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

Related Questions