Hello,

I'm following the documentation to call the plugin programmatically:

import mixitup from 'mixitup'
import mixitupPagination from '../mixitup-pagination'
mixitup.use(mixitupPagination)

But I always get this error in the console:

Uncaught Error: [MixItUp Pagination] MixItUp core not found

This is not happening when using Mixitup alone.

hi, first of all, great work! beautifull plugin :D

now the problem, you can reproduce the problem with the demo "loading-animation" adding about 80 or more "mix" elements to the container (i test this in chrome and firefox). The problem is : while the loading animation is runing the "mix" elements wont use 100% of the width, only after the loading animation finish they all update to the correct width. Thank.

Hi,

I'm doing some tests with MixitUp multifilter and would like to combine it with the Chosen plugin (link) that we are currently using. However using them both does not seem to work.

`$( document ).ready(function() { $(".chosen-select").chosen(); var mixer = mixitup('ul#listIndic', { selectors: { target: 'li.elemIndic' }, multifilter: { enable: true }, callbacks: { onMixStart: function(state, futureState) { console.log(futureState.activeFilter.selector); } } });

});`

Multifilter is working if I comment the "chosen" line. However when combining with Mixitup multifilter, filtering won't work anymore (nothing shows in the console, so it seems it's not getting to onMixStart). If you have a working demo with multifilter, could you try to add Chosen to see what the problem could be?

Is there any way to combine the mix and max into one (two handles)? https://demos.kunkalabs.com/mixitup/filtering-by-range/

I will need to have pagination too and will buy a license but need to know if its possible to have a "multislider". I can't find any examples of that already in mixitup.

I'm aiming for a slider like this: http://jqueryui.com/slider/#range Or: http://ionden.com/a/plugins/ion.rangeSlider/en.html Or: https://leaverou.github.io/multirange/ Or: https://codepen.io/Pierre_Hamel/pen/ocJEH Or: https://refreshless.com/nouislider/ Or: http://jsfiddle.net/j08691/sh0q62b7/

Hi, Sorry To Disturb you,

When I Work with The V2, The Console Work But My Last Section in the Html Document which is Contact Form Disappears in The Preview until I focus on it by clicking the link in the navbar.

This is the link to the Preview Screen of what Happened : (https://imgur.com/3q9vDqH) .

This Is a link to the preview when I focus on it : (https://imgur.com/tfcCcjZ) .

It seems while you have set up a npm package.json you didn’t publish the package to npmjs.org registry. Could you please do this for the curent version and all upcoming versions, too? This would ensure that you can fetch the package not only with bower but also with npm.

Hi.

I've got a little plunker here (http://plnkr.co/edit/Y49WQrHsuiLpYXS9JAIG?p=preview) trying to show contacts, but somehow mixitup only display the first item in the list.

I can't seem to figure out why.

Thanks

Currently, users are limited to using the catch all onMixStart/onMixEnd callbacks, and using state checking logic to determine if a pagination operation occurred.

For example:

var activePage = 1;
var activeLimit = 8;

var mixer = mixitup(containerEl, {
    load: {
        page: activePage
    }
    pagination: {
        limit: activeLimmit
    },
    callbacks: {
        onMixEnd: function(state) {
            if (state.activePagination.limit === activeLimit && state.activePagination.page === activePage) return;

            // Pagination state has changed:

            activePage = state.activePagination.page;
            activeLimit = state.activePagination.limit;

            paginationCallback();
        }
    }
});

function paginationCallback() {
    // do something only when pagination state has changed
}

Adding two new paginate specific callbacks would make things a lot easier for people wanting to trigger some custom functionality (typically scroll to top of container) on page change etc.

When hiding / showing items it happens sometimes that the container's height changes faster than the items' opacities. This causes items to get "cut off" at the bottom. I removed the fade effect to make this issue more visible.

I'm using a flexbox layout.

My Configuration:

{
    animation: {
        effects: 'stagger(50ms) scale(0.5)',
        duration: 40000,
        easing: 'ease',
        perspectiveOrigin: '50% 0',
        animateChangeLayout: true,
        animateResizeTargets: true
    },
    controls: {
        enable: false
    },
    layout: {
        display: 'block',
        containerClassFail: 'empty'
    },
    selectors: {
        target: '.feed-item'
    }
}

Hello Everyone,

Just implemented MixItUp Multifilter on my project and it works like a charm on desktop browsers : https://www.masterthehandpan.com/mix-it-up-handpan-makers-directory

BUT it does NOT work on iOS Browsers. Attached 2 screen shots where you'll see the errors I get on Safari or Chrome

• Safari : This web page was reloaded because an error occured
• Chrome : Something went wrong...

Any idea of what's going on ? Any help would be really appreciated

Thank you

I have a list of elements that can be marked as 'complete'. I'm using the sort functionality to locate complete items at the bottom of the list. This works fine as a default state, or if I switch between sorting methods - but if an item becomes complete and I trigger the currently active sort() again nothing happens. I hoped that forceRefresh() would get around this, but it doesn't seem to re-sort the list based on the set up config.

How can I ask a mixitup instance to re-sort the list?

I'm using mixitup in my next js project but and as soon as i import the plugin in my index page it will return this error:

"ReferenceError: window is not defined"

I also asked question about this problem in stackoverflow, but it didn't solve my problem.

How should i solve this issue?

Can you add next js example to your documentation?

Can you combine the logic from this issue post: https://github.com/patrickkunka/mixitup/issues/390 with the ability to add a reset button for each of those active filters?

This is less of an issue and more of a courtesy for anyone who runs into this, but using an anchor tag for the elements that get mixed will caused odd animation issues. They are seemingly unsolvable regardless of what layout you use, inline, flexbox, float, etc.

First off, MixItUp has beed a life saver for the project I'm working on. Thank you!

Is there a way to clear the text input without triggering a mix action?

I have a search bar and filter toggles that are in separate sections of my page. Each has a "clear search" buttons that should reset everything. Using setFilterGroupSelectors() and parseFilterGroups() resets the mixer, but doesn't clear the text input. Clearing the text before or after that creates a second mix action and a jumpy delay to the results.

--- MAIN SECTION ---

<form id="search-wrap">
    <div>
        <fieldset data-filter-group id="filter-search" class="search-bar">
            <input type="text" data-search-attribute="data-name" placeholder="Search...">
            <button class="clear-search-bar" type="reset">X</button>
        </fieldset>
        <div class="button-wrap">
            <button type="button" class="large green icon filter-open">
                <p class="btn-txt">Show Filters</p>
                <img src="./img/icons/filter-icon.svg" alt="filter icon">
            </button>
        </div>
        <div class="button-wrap">
            <button type="button" class="large gray icon filter-reset" tabindex="-1">
                <p class="btn-txt">Clear Search</p>
                <span>X</span>
            </button>
        </div>
    </div>
</form>

<section class="results mixContainer">
    <div class="mix default">
        <p>We didn't find anything matching your search.</p>
    </div>
</section>

--- SIDE MENU SECTION ---

<aside id="filter-menu" class="menu open-filter">
    <form class="filters">

        <label class="drop">
            <input type="checkbox" checked>
            <h2>Skills<span>⌃</span></h2>
            <div class="drop-list">
                <ul class="buttons" data-filter-group="group1" data-logic="and">
                    <button type="button" class="filter" data-toggle=".1">group1 - 1</button>
                    <button type="button" class="filter" data-toggle=".2">group1 - 2</button>
                    <button type="button" class="filter" data-toggle=".3">group1 - 3</button>
                    <button type="button" class="filter" data-toggle=".4">group1 - 4</button>
                    <button type="button" class="filter" data-toggle=".5">group1 - 5</button>
                    <button type="button" class="filter" data-toggle=".6">group1 - 6</button>
                </ul>
            </div>
        </label>

        <label class="drop">
            <input type="checkbox" checked>
            <h2>Industries<span>⌃</span></h2>
            <div class="drop-list">
                <ul class="buttons" data-filter-group="group2">
                    <label class="button-check">
                        <input type="checkbox" value=".1"/>
                        <p>group2 - 1</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".2">
                        <p>group2 - 2</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".3">
                        <p>group2 - 3</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".4">
                        <p>group2 - 4</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".5">
                        <p>group2 - 5</p>
                        <div class="back"></div>
                    </label>
                </ul>
            </div>
        </label>
    </form>

    <div class="button-bar">
        <button class="large gray filter-reset">Clear Filters</button>
        <button class="large blue filter-close">Close</button>
    </div>

</aside>

--- SCRIPT ---

// CREATE MIXITUP
homeMixer = mixitup($('.results'),
{
    pagination: {
        limit: 12,
        loop: true,
        hidePageListIfSinglePage: true,
        hidePageStatsIfSinglePage: true,
        maintainActivePage: false
    },
    multifilter:
    {
        enable: true,
        keyupThrottleDuration: 500
    },
    load:
    {
        filter: 'none'
    },
    controls: {
        toggleLogic: 'and',
        toggleDefault: 'none'
    },
    animation:
    {
        duration: 500,
        nudge: false,
        reverseOut: false,
        effects: "fade"
    },
    callbacks:
    {
        onMixFail: function(state)
        {
            homeMixer.filter('.default');
        }
    }
});

// ON CLICK - RESET BUTTONS
$(document).on('click', '.filter-reset', function()
{
    homeMixer.setFilterGroupSelectors('group1', []);
    homeMixer.setFilterGroupSelectors('group2', []);

    homeMixer.parseFilterGroups(); // <--- TWO SEPARATE
    $('#search-wrap')[0].reset();  // <--- MIX ACTIONS
});

// MAKE CHECKBOXES TOGGLE LIKE RADIOS
$('[data-filter-group="group2"] [type="checkbox"]').change(function()
{  
    if(this.checked){
        $('[data-filter-group="group2"] [type="checkbox"]').not(this).prop('checked', false);
    }    
});

// DON'T REFRESH THE PAGE
$(document).on('submit', '#search-wrap', function(event)
{
    event.preventDefault();
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
});