I’m currently working on a site which needs multi-filtering. I’m using the Mixitup library. Before I go any further adding in content and getting the design into shape I need to make sure I can get the checkboxes to work in Internet Explorer 11. The actual Mixitup filtering is working in other browsers.
@sabanna Your example of Mixitup worked without checkboxes but when I test your example with checkboxes in BrowserStack with they stopped working: Filtering CMS content - checkboxes.
Is there any way to make the Mixitup checkbox filtering work within Internet Explorer 11?
Thanks in advance to anyone who can help. A big shout out and thanks to @ pablostanley for the initial source of my project with his sample of the Mixitup library working.
The actually Mixitup code naturally works in IE11. I had to add some custom code that Sabanna gave to me to get the checkboxes in Webflow to work with Mixitup in IE11.
I am already using Mixitup (multifilter), and it works like a charm (check it out here: https://privacycompany-test.webflow.io/en/services). Unfortunately, I found out that the checkboxes don’t do anything when the page is visited in IE. If you have some magic code to get that to work, I would love to have it!
Please see snippet @sabanna gave to me regarding the checkboxes not working in IE11.
// JavaScript source code
var catArray = document.querySelectorAll('.w-dyn-item .categ');
for (var i = 0; i < catArray.length; i++) {
var elem = catArray[i];
var text = elem.innerText || elem.innerContent;
if (!text) {
text = 'empty';
}
var conv = text.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
var className = conv.replace(/ /g, "-").toLowerCase().trim();
if (!isNaN(parseInt(className.charAt(0), 10))) {
className = ("_" + className);
}
elem.parentElement.parentElement.parentElement.classList.add(className);
}
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll('.w-dyn-item .title');
for (var i = 0; i < sortArray.length; i++) {
var sortElem = catArray[i];
var sortText = sortElem.innerText || sortElem.innerContent;
sortElem.parentElement.setAttribute('data-order', sortText);
}
// Set the reference to the container
var containerEl = document.querySelector('.container');
// Call the MixitUp plugin
mixitup(containerEl);
See how you go with this, if you need more help just shout. I’ve included Sabanna on this thread incase you might need her expertise.
Thanks a lot for sharing. Unfortunately, I can’t get it to work. Whenever I replace part of my code with part of your code, the whole thing stops working. Perhaps because it’s Multifilter and yours seems single filter?
I’ll post my code below. Hopefully either you or @sabanna can provide some insights on how to make my code work for IE11 as well.
<script>
// Reusable function to convert any string/text to css-friendly format
var conv = function (str) {
if (!str) {
str = 'empty';
}
return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
.replace(/ /g, "-")
.toLowerCase()
.trim();
};
// Creating dynamic elements classes from its categories:
var catArray = document.querySelectorAll('.w-dyn-item .categ');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
var className = conv(text);
if (!isNaN(parseInt(className.charAt(0), 10))) {
className = ("_" + className);
}
elem.parentElement.classList.add(className);
});
// Creating a custom data-order attributes from blog titles:
var sortArray = document.querySelectorAll('.w-dyn-item .title');
sortArray.forEach( function(sortElem) {
var sortText = sortElem.innerText || sortElem.innerContent;
sortElem.parentElement.setAttribute('data-order', sortText);
});
var filterGroups = document.querySelectorAll('.data-filter-group');
filterGroups.forEach( function(group) {
group.setAttribute('data-filter-group','');
});
var containerEl = document.querySelector('.container');
var checkboxGroup = document.querySelector('.filter_wrap');
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach( function(elem) {
var dataValue = elem.getAttribute("data-value");
elem.setAttribute('value', dataValue);
});
var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
var mixer = mixitup(containerEl, {
multifilter: {
enable: true
}
});
checkboxGroup.addEventListener('change', function(e) {
var selectors = [];
var checkbox;
var i;
if (e.target === allCheckbox && e.target.checked) {
for (i = 0; i < checkboxes.length; i++) {
checkbox = checkboxes[i];
if (checkbox !== allCheckbox) checkbox.checked = false;
}
} else {
allCheckbox.checked = false;
}
for (i = 0; i < checkboxes.length; i++) {
checkbox = checkboxes[i];
if (checkbox.checked) selectors.push(checkbox.value);
}
var selectorString = selectors.length > 0 ?
selectors.join(',') : 'all';
mixer.filter(selectorString);
});
</script>
Thanks for getting back to me. Hm, it seems strange to me. You have the multifilter with AND logic as well, so I’ve put our codes next to each other, but my code is way longer. I’ve tried replacing parts or the whole of my code with your code, but then it doesn’t work on any browser.
I’m completely stumped, but I have to confess I’m not really used to working with JS, so maybe it’s a rookie mistake that I just can’t spot?
checkboxGroup.addEventListener(‘change’, function(e) {
var selectors = ;
var checkbox;
var i;
if (e.target === allCheckbox && e.target.checked) {
for (i = 0; i < checkboxes.length; i++) {
checkbox = checkboxes[i];
if (checkbox !== allCheckbox) checkbox.checked = false;
}
} else {
allCheckbox.checked = false;
}
for (i = 0; i < checkboxes.length; i++) {
checkbox = checkboxes[i];
if (checkbox.checked) selectors.push(checkbox.value);
}
var selectorString = selectors.length > 0 ?
selectors.join(‘’) : ‘all’;
mixer.filter(selectorString);
});
// var containerEl = document.querySelector('.container');
// var containerEl = document.querySelector('.container'[data-ref="container"]);
// var containerEl = document.querySelector('[data-ref="container"]');
//var container = document.querySelector('[data-ref="container"]');
// Set up a handler to listen for "keyup" events from the search input
inputSearch.addEventListener('keyup', function() {
var searchValue;
if (inputSearch.value.length < 3) {
// If the input value is less than 3 characters, don't send
searchValue = '';
} else {
searchValue = inputSearch.value.toLowerCase().trim();
}
// Very basic throttling to prevent mixer thrashing. Only search
// once 350ms has passed since the last keyup event
clearTimeout(keyupTimeout);
keyupTimeout = setTimeout(function() {
filterByString(searchValue);
}, 350);
});
/**
* Filters the mixer using a provided search string, which is matched against
* the contents of each target's "class" attribute. Any custom data-attribute(s)
* could also be used.
*
* @param {string} searchValue
* @return {void}
*/
function filterByString(searchValue) {
if (searchValue) {
// Use an attribute wildcard selector to check for matches
mixer.filter('[class*="' + searchValue + '"]');
} else {
// If no searchValue, treat as filter('all')
mixer.filter('all');
}
}
Thanks in advance!