MixitUp Not working with Bootstrap tab-pane
Question
$(function () { $('#container').mixItUp({ layout: { display: 'block' }, controls: { toggleFilterButtons: false, toggleLogic: 'or' } }); });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <html> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <head> <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script> </head> <body> <ul class="nav nav-tabs"> <li><a data-toggle="tab" href="#rest"> Menu 1</a></li> <li><a data-toggle="tab" href="#retail">Menu 2</a></li> </ul> <div class="tab-content"> <!-- REMOVE THIS TAB PANE MIXITUP will WOrk--> <div id="rest" class="tab-pane fade in" > <br> <ul class="nav nav-tabs"> <li class="active"> <a href="#full" data-toggle="tab">Full Service</a> </li> <li> <a href="#quick" data-toggle="tab">Quick Service</a> </li> <li> <a href="#catering" data-toggle="tab">Catering</a> </li> </ul> <div class="tab-content"> <div id="full" class="tab-pane active fade in"> <ul class="filters btns"> <li><a href="#" class="filter" data-filter=".hotel">Hotel</a></li> <li><a href="#" class="filter" data-filter=".cafe">Cafeteria</a></li> <li><a href="#" class="filter" data-filter=".dining">Dining</a></li> </ul> <div id="container"> <div class="mix col-md-3 hotel">Row 1</div> <div class="mix col-md-3 hotel cafe">Row 2</div> <div class="mix col-md-3 cafe dining">Row 3</div> <div class="mix col-md-3 dining hotel">Row 4</div> <div class="mix col-md-3 cafe">Row 5</div> </div> </div> <div id="quick" class="tab-pane fade in"> Quick Service </div> <div id="catering" class="tab-pane fade in"> Catering </div> </div> </div> <div id="retail" class="tab-pane fade in"> Second tabe </div> </div></body></html>
Somebody Please help me to find this error --> MixIt Up is not working with Css Tabs If we remove the tab pane i will work
Somebody please find a solution for this problem
Please find This comment from the code and remove the tab-pane class then the MixItUp will work
tab-pane is a class from Bootstrap.
3 answers
solution1
1 2016-01-23 05:00:48
I encountered the same problem a while back. There seems to be some issue while using Bootstrap tabs with MixItUp. I don' really know why but i managed to find a solution.
Just modify your javascript like this...
$(document).ready(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$('#container').mixItUp({
layout: {
display: 'block'
},
controls: {
toggleFilterButtons: false,
toggleLogic: 'or'
}
});
});
});
Explanation: the line $('a[data-toggle="tab"]'), is asking about the href that you click and tells that when the function show.bs.tab is called, than the rest of the code will get executed.
You can further customize mixitup and have multiple filter logic for different tab. For that, You can use target attribute.
var target = $(e.target).attr('href');
if (target === '#full'){
/* filter loginc */ }
I found this answer on MixItUp Forum. For more info, click here .
solution2
0 2016-12-24 07:22:26
This worked for me. Make sure the the filters are inside the 'mixit' class container
var mixer = mixitup('.mixit', { controls: { scope: 'local' } });
solution3
0 2017-01-20 11:08:27
Here you can find a solution for this problem from mixItUp version 3.1.0. You can define other [data-attribute] selector instead [data-toggle].
mixitup(container, {
selectors: {
control: '[data-mixitup-control]'
}
}
And then:
<button type="button" data-mixitup-control data-filter=".red">Red</button>
<button type="button" data-mixitup-control data-toggle=".blue">Blue</button>
<button type="button" data-mixitup-control data-sort="default:desc">Sort Desc</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.