Hi there!
Can anybody check my link : Webflow - Официальный сайт ТРЦ Премьер
Buttons dont work!
What am I doing wrong?
PLEASE HELP ME!
Hi there!
Can anybody check my link : Webflow - Официальный сайт ТРЦ Премьер
Buttons dont work!
What am I doing wrong?
PLEASE HELP ME!
Which buttons do not work, and what should they do but currently don’t?
Hi!
On this link http://tcpremier.webflow.io/deti should work isotope filters, search is working, but filter buttons dont
PLEASE HELP)
I had the same problem. I find the solution by adding some code.
The Code:
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<script>
// document ready wrapper
$(document).ready( function() {
// find all filter buttons
const filterToggles = document.querySelectorAll('[data-filter]');
// go over each filter button
filterToggles.forEach(function(toggle) {
let attrVal = toggle.getAttribute(['data-filter']); // find the filter attr
let newVal = attrVal.toLowerCase().replace(' ', '-'); // hyphenate filter attr val
toggle.setAttribute('data-filter', newVal); // set filter attr with new val
});
// go over all collection item category label elems
$('.w-dyn-item .category').each(function(index, element) {
var _this = $( element );
// lowercase, hyphenate and add as a class to dyn-item for isotope filtering
_this.closest('.w-dyn-item').addClass( _this.text().toLowerCase().replace(' ', '-'));
});
// quick search regex
let qsRegex;
let buttonFilter;
// init Isotope
const $grid = $('.grid').isotope({
itemSelector: '.w-dyn-item',
stagger: 30,
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
// reveal all items after init
const $items = $grid.find('.w-dyn-item');
$grid.addClass('is-showing-items').isotope( 'revealItemElements', $items );
$('#filters').on('click', 'button', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
const $quicksearch = $('#quicksearch').keyup(debounce(function() {
qsRegex = new RegExp($quicksearch.val(),'gi');
$grid.isotope();
}));
// change is-checked class on buttons
$('.button-group').each(function( i, buttonGroup ) {
const $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// debounce so filtering doesn't happen every millisecond
function debounce(fn, threshold) {
let timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
setTimeout( delayed, threshold || 100 );
};
};
// disable search from submitting
$('#quicksearch').on('keyup keypress', function(e) {
const keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
});
</script>
Thank You!!!) Yeah!
I spent so much time for it, you just save me!)
Can I ask you help in one more thing?
On this page in isotope filter button ALL dont showing http://tcpremier.webflow.io/deti
Whats the proplem?
How to styling the button ALL?
Thanks in advance!
I can have a look at your preview link. Have you already add margin or padding?
Hi!
Yes! please.
Check my preview : Webflow - Официальный сайт ТРЦ Премьер
ISOTOPE is set on the page DETI
Thank you!
Hi @Andrew_Antoshkin, sorry I was not able to find the problem. I suggest you to take the steps again. Sometimes when I can’t find the problem I create a new project and start this part from scratch. It must work hopefully, Good luck!
Thanks anyway, man!))
You deserve a prize for this one!
Hi
Would you possible be able to give me a hand?
This is my read only link:
https://preview.webflow.com/preview/classic-perspective?utm_medium=preview_link&utm_source=designer&utm_content=classic-perspective&preview=d1de60f2c7a5b2f23cb0c7e9b52e4d98&pageId=5ede3f5ed50ae044488210b6&mode=preview
Not sure why but i still cant get this working.