Is it possible to have multiple containers for a single instance? I'm trying for multiple jquery.ui.sortable ul's to respond to one set of filters. I call mixitup on the container class with multiFilter, but it looks like it's only filtering one of the containers. Idon't know if I'm trying to fix an unsolvable problem.

http://jsfiddle.net/asdf072/fL68P/1/

Dear MixItUp users,

I have recently received a couple of emails asking what's happening with MixItUp, and if it's been abandoned. Due to time constraints, I've been unable to respond to the many support and feature request emails I get everyday, and I'm also well aware the issues are piling up here on GitHub.

The good news is, MixItUp is not abandoned.

It is simply on hold until some time is allocated at Barrel for me to work on it. It was conceived first and foremost as an internal tool, not a product, and as such we can not dedicate as much time as we'd like to respond to support questions, and push out bug fixes. We simply do not have the resources.

I realise there are many bugs in the current release, and the next step for me is actually going to be a complete rewrite of the code, and a new marketing site to better showcase the new features, with extensive documentation. Although completely functional, the code structure of v1.x has many inherent architectural problems (based on my limited knowledge of JS almost a year ago) making it very hard for me to maintain, which is why an overhaul is necessary at this stage, to improve ease of maintenance and allow for future extensibility.

As a digital agency our client work must take priority however, so this next stage will have to wait until time can be allocated to my schedule so that I can focus on MixItUp 100%, at least for a couple of weeks.

We've been flattered by the level of interest and positive feedback in MixItUp so far. Thanks for your patience and I'll be sure to update everyone when I have some good news.

Regards,
Patrick

As can be seen in this jsfiddle (note I've only hooked up the category_1 button), mixitup is filtering the content, shuffling the icons, but as soon as it reaches the end, it puts everything back.
I've disabled all the extraneous code in the fiddle, but I can't see what might be causing this.

I tried setting up two "grids", "#Grid1" and "#Grid2", with their own sort buttons and lists of elements to mix.
If I call mixitup on each, only the first call takes effect. (Either works, but not both together.)

Is this just the way it is, or is there a right way to do this that I am missing?

Hi!
First of all... Congrats, you've done a terrific work.
However, I can't make work the alphanumeric sort with the last (1.4.0) version. OTOH, the numeric position seems to work fine.

This is my markdown:

<ul id="grid">
    <li class="mix" data-name="innbox" data-position="4" style="opacity: 0;display: none;">
      <h4>innbox</h4>
</li>
<li class="mix" data-name="demo2" data-position="1" style="opacity: 0;display: none;">
      <h4>demo2</h4>
</li>
<li class="mix" data-name="zxccc" data-position="2" style="opacity: 0;display: none;">
      <h4>zxccc</h4>
<li class="mix" data-name="vffff" data-position="5" style="opacity: 0;display: none;">
      <h4>vffff</h4>
<li class="mix" data-name="E" data-position="3" style="opacity: 0;display: none;">
      <h4>E</h4>
</li>

<ul>
    <li class="sort" data-sort="data-name" data-order="desc">Nom Desc</li>
    <li class="sort" data-sort="data-name" data-order="asc">Nom Asc</li>
    <li class="sort" data-sort="data-position" data-order="desc">Position Desc</li>
    <li class="sort" data-sort="data-position" data-order="asc">Position Asc</li>
    <li class="sort" data-sort="default" data-order="desc">Default</li>
    <li class="sort" data-sort="random">Random</li>
</ul>

Hello

it would be really nice if mixitup would also support dynamically added data properties using the $.data() method:

// Like this:
$('#myListItem').data('wizardlevel', 100);

// ... in addition to (or instead of) this:
$('#myListItem').attr('data-wizardlevel', 100);

// ... will work equally fine

I've run into a problem with MixItUp. I'm creating a website using Dreamweaver's Fluid Grid Layout. MixItUp filters and the divs they act on are display: none in the mobile size, but when using the filters in the larger formats the hidden divs then pop up in the mobile size--MixItUp is overriding the basic document css. What can I do to fix this?

https://github.com/purgeru/Mixitup-Bootstrap-3
Made a version for Bootstrap but it's not good enough. Want anyone contribute?

Chrome Version:
29.0.1547.65

Safari and Firefox are working fine.

I recorded a video to show the issue:
http://contrusthosting.de/_temp/MixItUpFlash.m4v

Hey dude. I'm using this plugin but when I click on a filter button this error appears in console.
How I can fix it?

Hi there, firstly insanely awesome plugin, really does work well, and is very well structured.

I wanted to ask if it is possible to change the targetSelector? It seems I always have to have a class of mix on the selector, and I am trying to keep my markup as minimal as possible.

Also is it possible to look up a data tag for the filters, at the moment it has to find a class that matches the filter.

thanks in advance

Richard

Hi all!

I am currently using the masonry plugin to load and arrange my images. I have set up the filters, but for some reason after I press the filter buttons, my images don't rearrange them selves like the demo. I've been trying to mimic the demo code for a while but still no success. I am wondering if anyone else has had this problem

Edit: it seems like my

tag containing the list of items changes everytime i select a filter. However, it changes back its original properties 2 seconds later.

Hi,

It is possible to filter with both li tag and a search box? So that if a data-filter is for example "building", as soon as a user types "bui", all elements that contain "bui" show up.

It would be nice if upon clicking a button, it would apply the data-filter value to the url string. That way, we can easily link to a page that will sort automatically via the data-filter category.

I've been loving mixitup and am using it on an in-development client project. I liked the implementation that was used on the Dauphine Press example (http://www.dauphinepress.com/search-by-style/) and decided to use the same select menu-based pattern in my implementation.

Everything was working great until recently when I discovered that making choices via the dropdowns wasn't filtering the elements in IE9. Sorting via button controls still works great, but choosing options in the dropdowns produces no response. I thought it could be just me, but when I went back to the Dauphine Press example, I see the same issue.

Any ideas on how to fix?

Thanks!

Hi,is there an easy way to be able to sort by the number of matched filters ? or it a case of re-calculating the matches for each item, and then calling the custom sort method with a defined order ?

Thanks,
Hendy

IE9 can't recognize gridClass/listclass options, I think that's why National Parks Demo doesn't work.

I don't see the use of extending the Array prototype, which pollute the global namespace. Could you please juste make an helper function instead. Thanks.

(in my version, on line 1307 near // COMPARE ARRAYS)

In the javascript of the national parks example (http://mixitup.io/demos/parks):

// Remove "all" from 
filterString = filterString.replace('all','');

There needs to be word boundaries around "all".
In my case, it is changing the word "small" into "sm" in the filterString.

** UPDATE **
This did the trick for me:

filterString = filterString.replace(/\ball\b/, "");

Nice work on the plugin.
I've mainly got interested in this plugin because it doesn't force absolute positioning like isotope etc.
However I can't quite understand the logic used when coding this plugin ( or maybe I'm going about this the wrong way)
The main issue is how you handling the show/hide functionality. Currently you are showing elements by adding the display and opacity properties when showing, and removing them when hiding, so the the declared styles (via css) take affect.
However to me, the logic of using display:none and opacity:0 in css file seems backwards.
In order to use the plugin, I need to modify my css styles to hide elements on site loading. That severely limits what I can do with my elements outside of the mixitup plugin (intro animations etc...)

• It would be much easier if you could just toggle display and opacity both ways while hiding and showing elements.

Let me know what you think. Thanks.

Is pagination supported too?

If not, are you planning for it?

thanks in advance

Select a filter that has no matches and switch to list view. Try to select another filter, you will not be able to, you are locked in this filter until you switch back to grid view.

You can replicate this on the demo site by deleting the kraken element in Inspector.

When a filter has no results, the 'fail' class is added to the #grid container. This works as expected in the latest versions of Chrome and Firefox. However, IE9 never gets the class added.

Hi,

Loving the plugin but can I please request that you look into using jQuery's detach method or similar to preserve event binding's. There really isn't a good reason for destroying and making us rebind all the events when it is possible to preserve them. I have looked at the FAQ and I saw the snippet there about using delegation and I tried this, in fact it was the first way I had tried and to my surprise even delegated events are destroyed on the direct parent container. To use delegation successfully you have to bind to the direct parent's parent.

As an example, the below is the HTML structure:

...
<div class="root">
  <ul class="parent">
    <li class="mix">A item</li>
    <li class="mix">Another item</li>
    ...
  </ul>
</div>
...

As per your FAQ using delegation on the container should work, the container in this case is the UL with a class of parent seeing as the items to be sorted/filtered are the LI's with the class mix. The below should work but it doesn't:

...
$('.parent').mixitup().on('click', '.mix', function(){
  // This will never be fired...
});
...

However binding to the parent's parent, in this case the DIV with a class of root will work:

...
$('.parent').mixitup();
$('.root').on('click', '.mix', function(){
  // This will be fired...
});
...

Which means in the plugin you're stripping out bindings to the parent container (it's never moved so why?), which means to get around this issue you have to wrap your container in a container and bind to that which is just adding bloat to the markup.

Thanks
Steve

Hello ~

Is there a way to set the sortOnLoad property to randomize the display of elements?

Thank you!

Hi there,

I can't seem to get the showOnLoad config option to respect my filterLogic setting. Theoretically, MixItUp should only show unread blog comments on load, but it's showing all unread items (blog comments or not) and all blog comments (read or unread).

$('#Grid').mixitup({
    filterLogic: 'and',
    showOnLoad: 'blogcomments unread',
    effects: ['fade']
});

Any help would be appreciated. Let me know if there's more information I can provide.

Having an issue with mixitup and foundation 4 responsive menu. When the page is small, the collapsed menu doesn't work. My javascript is not strong enough to get to the bottom of it, but I'm guessing jquery doesn't know what to do with the ' # ' set as the menu href...so clicking it, nothing happens...is this possibly because the click event is spreading out of the mixitup grid? If yes, how do we stop that? Using mixitup 1.5.4..currently on local server, but can put it up online if anyone can shed any light on this?

The readme file for mixitup-1.5 says:

"If you're not sure where to begin with your styling, why not use our template included in the MixItUp Demos Bundle"

... but I can't find any other reference to being able to download that. Thanks

Hello,

After applying a filter via the method, how can one reset it to the original state? (no filter)
The docs don't mention it, and this gives an error:
$('#Grid').mixitup('filter','');

This is for a multiple categories filter.

Syntax: $('#Grid').mixitup('filter','dogs');
Use this method to perform a filter. Enter at least one filter as a string for the second argument. Separate multiple categories with spaces. If you do have filter buttons matching the filter argument you provide, they will be given the class '.active' on filter.

Hi im trying to filter images....kinda of like an image gallery. Can anyone point me in the right direction on how to make the images resize on window resize?

Hello,

anyone can help to integrate range Slider UI with Mixitup.
http://jqueryui.com/slider/#range

Template:
http://jsfiddle.net/vSvHM/
Please help to make it work

Or any other range slider to sort price.

Thank you

Hi and thanks for your great plugin !

I'm trying to make your plugin work, but I can't make it work :s !

So I have a few articles like that :

<div id="grid">
    <article class="mix mix_all web-agency small-agency" data-name="Agency1">
        <h2>Agency1</h2>
    </article>
    <article class="mix mix_all mobile-agency small-agency" data-name="Agency2">
        <h2>Agency2</h2>
    </article>
    <article class="mix mix_all web-agency big-agency" data-name="Agency3">
        <h2>Agency3</h2>
    </article>
</div>

And 2 filters like that :

<ul class="secondFilters">
    <li class="active" data-filter="all" data-dimension="sizes">All</li>
    <li data-filter="small-agency" data-dimension="sizes">Small agency</li>
    <li data-filter="medium-agency" data-dimension="sizes">Medium agency</li>
    <li data-filter="big-agency" data-dimension="sizes">Big agency</li>
</ul>

<ul class="firstFilters">
    <li class="active" data-filter="all" data-dimension="types">All</li>
    <li data-filter="web-agency" data-dimension="types">Web agency</li>
    <li data-filter="freelance-activity" data-dimension="types">Freelance activity</li>
    <li data-filter="startup" data-dimension="types">Startup</li>
    <li data-filter="other" data-dimension="types">Other</li>
    <li data-filter="non-profit" data-dimension="types">Non-profit</li>
    <li data-filter="mobile-agency" data-dimension="types">Mobile agency</li>
    <li data-filter="marketing-agency" data-dimension="types">Marketing agency</li>
</ul>

Now I can't make it right... If I put this $('#grid').mixitup(); doesn't seems to do the trick... What do I have to do in order to make my two filters work ?

Thanks a lot

When I click on a .filter-item it results in: TypeError: e is undefined in jqyery at line 5.
The version of jquery is: 1.9.1

And this snippet is what I use:

        $(result_container).mixitup({
            onMixStart: function(config) {
                config.filterSelector = '.filter-item';
                config.easing = 'snap';
                config.transitionSpeed = 0;

                return config;
            },
            onMixEnd: function(config) {
                var wait = setTimeout(function(){
                    if(config.layoutMode == 'list'){
                        list = true;

                        $(result_container).removeClass('fifth_width');
                        $(result_container).addClass('full_width');
                    }
                    else {      
                        $(result_container).removeClass('full_width');
                        $(result_container).addClass('fifth_width');
                    }
                },100);             
            }
        });

        $('#GoList').bind('click', function(e){
            $('#GoGrid').removeClass('active');
            $(this).addClass('active');

            $(result_container).mixitup('toList');
        });

        $('#GoGrid').bind('click', function(e){
            if(list){
                $('#GoList').removeClass('active');

                $(this).addClass('active');

                var delay = setTimeout(function(){
                    $(result_container).removeClass('full_width');
                    $(result_container).mixitup('toGrid');
                });
            };
        });         

I am trying to understand why calling the sort method with a sortby parameter would cause the goMix function to call sort again with 'reset'.

Example: I have data-uploaded attributes on elements, with sortOnLoad configured to use ['data-uploaded', 'asc']. I update one element's data-uploaded to a different value then call $("#main").mixitup('sort', ['data-uploaded', 'asc']);

In stepping through the code, I get to:

        // IF A SORT ARGUMENT HAS BEEN SENT, RUN SORT FUNCTION SO OBJECTS WILL MOVE TO THEIR FINAL ORDER

        if(sortby){
            sort(sortby, order, $cont, config); 
        };

This is fine, but after that sort function runs, it then runs:

        // IF A SORT ARGUMENT AS BEEN SENT, RUN SORT FUNCTION 'RESET' TO MOVE ELEMENTS BACK TO THEIR STARTING ORDER

        if(sortby){
            sort('reset', null, $cont, config);
        };

This causes everything to reset back to what it was before I ran the sort function. Am I misinterpreting what the sort command does? I have also tried the 'remix' command but it does not sort the list either (sort is not even called).

I'm trying to get Mixitup to work on a ul binded to an AngularJS controller, but it doesn't seem to be working.

In some cases, I get a fade out animation but then all the images end up coming back.

I'm guessing it has something to do with the AngularJS double binding that is interfering with the way Mixitup changes the DOM?

Is Mixitup compatible with AngularJS?

Here is my code:
http://jsfiddle.net/FMzqM/1/

Hi this is great. I'm getting a bug in Firefox for Mac. When you hit Random a few times all the cards disappear: http://mixitup.io/demos/cards
Works fine on Crome

I've got an image grid setup but I'm struggling to wrap my arms around it. I have a js fiddle setup here:

http://jsfiddle.net/highrockmedia/4QAqQ/6/

I think the part that's stumping me are:

*How does the img from data-source="" get into img src=""

• What is the purpose of:
  function imgLoaded(img) { var $img = $(img); $img.closest('.img_wrapper').addClass('loaded'); }

My guess is it's supposed to load the script after the images have loaded using a callback:

onload="imgLoaded(this)

... but right now, I'm not seeing how this works too well.

I am using mixitup to filter a list of publications / news articles. It works great. Here is the problem:

• I have each list item (in an li tag) set as a link to the actual page of the publication
• The very first link in the list (regardless of what the first link is) will not work. It shows properly (i.e. the css adheres), but the link itself won't work.

This is a very odd phenomenon. I wonder if it has something to do with fail class div sitting right above the first li tag in the list. Any ideas? I can post code if necessary.

I emailed a similar question, before I knew you had a repo here.

I need to be able to add newly added content dynamically to the grid or list, I've tried .append, .appendTo, .insertAfter and any other jQuery function I could find for adding elements into the DOM.

I also asked the question of using MixItUp with Tables rather than Lists.

On pages where I use mixitup, the links in my website's footer do not work. I assume this means that the mixitup container that has all my "li" tags is covering my footer so it can't be accessed. Trying to move the footer forward with z-index does not seem to solve this problem. Has anyone else had this issue, and if so, how did you resolve it? Thanks.

I just tried using this on a page with around 500 items, but it proved to be too slow to be workable. It took several seconds from the time I clicked on the filter link before the filtering started. I was wondering if you'd had any success using this on a larger list, or if there's something I can change about my page to make it faster.

The Situaton

We're building a simple to-do list view where you can sort by date or filter by person. We've added a <span class="filter"> to each to-do item so you can easily filter similar to-do items (by assignee, for example).

The Problem

When the page loads you can filter by assignee no problem. Switching between viewing individual assignees or 'everyone' works fine. However, when you sort by date it will reorder the to-do items as expected, but then you can't filter using the nested/inline <span> elements.

My Guess

It seems when putting controls for filters inside the elements being filtered that the event handler which triggers MixItUp gets detached and won't allow the filter to happen.

Is it possible to reattach the event listener, or better, keep it from getting lost in the first place?

Here's a sample of the markup.

<div class="mixsorters">
  <button class="sort active" data-sort="data-duedate" data-order="desc">Oldest First</button>
  <button class="sort" data-sort="data-duedate" data-order="asc">Newest First</button>
</div>
<div class="mixfilters">
  <button class="filter active" data-filter="all">Everyone</button>
  <button class="filter" data-filter="unassigned">Unassigned</button>
</div>

<div id="todos">
  <div class="mix sean" data-duedate="1368331200">
    <span>Sean</span>
    <span class="filter" data-filter="sean">Solo</span>
  </div>
  <div class="mix jessica" data-duedate="1372392000">
    <span>Jessica</span>
    <span class="filter" data-filter="jessica">Solo</span>
  </div>
  <div class="mix moses" data-duedate="1374206400">
    <span>Moses</span>
    <span class="filter" data-filter="moses">Solo</span>
  </div>
  ... and so on ...
</div>

Here's how we're calling MixItUp

$('#todos').mixitup({
    animateGridList: false,
    sortOnLoad: ['data-duedate','desc'],
    transitionSpeed: 0
});

Taking a look at the featured site http://www.dauphinepress.com/search-by-style/ I noticed that I get the "Sorry no content" message quite frequently. Is there a way to avoid this? Can filters that lead to an empty results field be assigned a class?

I currently have a list of items decorated with a numerical property. The thing is that this numerical property may be null. If I do a sort descending on this property, the "null" items appear before the other items.

Is it possible to have it so that the "null" items appear at the end of the list instead of the start of the list?

Is there a way to come in via a url parameter (www.mysite.com/gallery.html?filter=dogs) and have mixItUp read this and "click" the dogs filter (thus firing mixItUp to move thumbnails around)?

Thanks!

Are all the css classes created in the mixitup javascript file? Can set up of the markup stop the plugin from working? Here is what I mean. I am using bootstrap and the, positioning classes that makes the grid. The divs are set up like this.

Will the mixitup work with this?
Thank you for the help :)

So I have markup like so, in which I need to perform filtering on an <li> element housing an <a> element, which contains filter data:

<div id = "grid">
    <ul>
        <li>
            <a href = "localhost/mysite/app/wp-content/uploads/2013/08/We-Are-Family.jpg" title = "We Are Family" data-artwork-type = "acrylic inks paintings " data-category = "current-work floral still " data-contact = "[email protected]"></a>
        </li>
        <li>
            <a href = "localhost/mysite/app/wp-content/uploads/2013/08/There-Is-No-One-Like-Me.jpg" title = "There’s No One Like Me" data-artwork-type = "acrylic inks paintings " data-category = "current-work floral still " data-contact = "[email protected]">
            </a>
        </li>
        <li>
            <a href = "localhost/mysite/app/wp-content/uploads/2013/08/Solitaire.jpg" title = "Solitaire" data-artwork-type = "acrylic inks " data-category = "current-work floral still " data-sold = "sold" data-contact = "[email protected]">
            </a>
        </li>
        <li>
            <a href = "localhost/mysite/app/wp-content/uploads/2013/08/Poppy-Dance.jpg" title = "Poppy Dance" data-artwork-type = "acrylic inks paintings " data-category = "current-work floral still " data-contact = "[email protected]">
            </a>
        </li>
        <li>
            <a href = "localhost/mysite/app/wp-content/uploads/2013/08/Pearfect.jpg" title = "Pearfect" data-artwork-type = "acrylic paintings " data-category = "current-work floral still " data-contact = "[email protected]">
            </a>
        </li>
    </ul>
</div>

As far as I know, there's no way to configure mixitup to show/hide the parent (I think it only toggles the selector). I'm not sure how to pursue using mixitup, but I would appreciate advice.

Thanks in advance.

Hi!

I think that the order of sorting is wrong (ASC and DESC are swapped). Can it be possible?

For example, in your sandbox demo when click in «Sort by name DESC» the pets appears in ASC order by name.

Thanks for your great job.

Cheers!