Hi there! I followed this (AMAZING) webflow lesson to implement a filtering system on my CMS info on my site. I got it all working (including getting the buttons to filter some titles on the site AND sort at the same time) but now when you actually click on one of the links, it kinda glitches out and does sorting/filtering for a split second before leaving the page. Can anyone help diagnose the issue? I’m flying a little blind here. Thank you!!!
Here’s the code in my body tag:
<!--- // 1) Connecting MixItUp JS library using public CDN link --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>
<script>
// 2) 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();
};
// 3) Creating dynamic elements classes from its categories for filtering:
var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
var className = conv(text);
elem.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add(className);
});
// duplicate filtering the tags on the sides and top of the work page
var catArray2 = document.querySelectorAll('.w-dyn-item .filter-category-2');
catArray2.forEach( function(elem) {
var text2 = elem.innerText || elem.innerContent;
var className2 = conv(text2);
elem.parentElement.parentElement.parentElement.classList.add(className2);
});
//SORTING IS HAPPENING IN THE SEtTINGS OF THE VARIOUS CLASSES!!
// 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
var containerE1 = document.querySelector('.all-work-collection-list');
var containerE2 = document.querySelector('.skills-label-filter-list');
// 6) Call the MixitUp plugin
mixitup(containerE1, {
"animation": {
"duration": 250,
"nudge": true,
"reverseOut": false,
"effects": "fade translateZ(-100px)"
}
});
mixitup(containerE2, {
animation: {
enable: false
}
});
</script>
- Here’s a live link
- And here’s the read-only link, please let me know if there’s a better link I can provide to make it easier for you to see my code.