CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmixitup
Matus Pajor
Matus Pajor

Reputation: 11

bootstrap + mixitup filter on load issue

We are trying to show our portfolio in bootstrap via MixItUp v3.1.11 filtering and are trying to load a certain category (not all the projects) when the page is loaded.

Patrick Kunka has provided an example how it could be done here.

Same problem was asked here

Our issue is that the reccomended soultion is not working. My guess is that it is related to the change of selector due to bootstrap + mixitup issues:

control: '[data-mixitup-control]'

Here is the piece of code that is at the end of the page:

var containerEl = document.querySelector('#selector');

        var mixer = mixitup(containerEl, {
            selectors: {
                target: '.mix',
                control: '[data-mixitup-control]'
        },
            animation: {
                effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
            },
            load: {
                filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
            }
        });

        // Add a class to the container to remove 'visibility: hidden;' from targets. This
        // prevents any flickr of content before the page's JavaScript has loaded.

        containerEl.classList.add('mixitup-ready');

        // Show all targets in the container

        mixer.show()
            .then(function() {
                // Remove the stagger effect for any subsequent operations

                mixer.configure({
                    animation: {
                        effects: 'fade scale'
                    },
            load: {
                filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;)
            }
                });
            });

When I change the filter to desired .residential it does not work.

I also tried to add this: 

    $(function(){
  $('#selector').mixItUp({
    load: {
      filter: '.residential'
    }
  });
});

No luck. Any idea anyone where could the problem be?

Upvotes: 1

Views: 2395

Answers (3)

Jomal Johny
Jomal Johny

Reputation: 501

In combination with MixItUp v3.1.9 and Bootstrap 4 try this example.

Add data-mixitup-control to avoid conflicts with other data-attributes: 

    <button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button>

Initialize MixItUp:

    var container = document.querySelector('.portfolio');

var mixer = mixitup(container, {
    selectors: {
        control: '[data-mixitup-control]'
    }   
});

Upvotes: 4

moloko
moloko

Reputation: 1

In combination with MixItUp Version 3.1.11 and Bootstrap 3 try this example.

Add data-mixitup-control to avoid conflicts with other data-attributes:

<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button>

Initialize MixItUp:

var containerEl = document.querySelector('.container');

var mixer = mixitup(containerEl, {
    selectors: {
        control: '[data-mixitup-control]'
    },
    load: {
        filter: '.residential'
    }
});

You don't need to set the 'fade scale' animation effect separately - it's the default setting. https://www.kunkalabs.com/mixitup/docs/configuration-object/

Upvotes: 0

Peter Bode
Peter Bode

Reputation: 222

I've tried the example, and it works with version 2.1.6.

Here is my example code:

$(function(){
  $('#selector').mixItUp({
    selectors: {
      target: '.item'
    },
    layout: {
      display: 'inline-block'
    },
    load: {
      filter: '.residential'
    }
  });
});

This will load the DOM only with items related to .residential visible.

Hope this helps.

Upvotes: 0

Related Questions