Search Results for 'filter style'

[Jonathan Appleton]

This reply has been marked as private.

Add New Note to this Reply

[Kamil Sawoń]

For feature:

<button class="mobile-menu-accordion" id="mobile-accordion-button" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function addListenerToSearchAndFilter(){
	var elements = document.getElementsByClassName("sf-label-radio");
	for (var i = 0; i < elements.length; i++) {
		elements[i].addEventListener('click', switchAccordionAfterClick, false);
	}
}

function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.innerHTML = "zwiń filtry";
		} else {
			x.style.display = "none";
			y.innerHTML = "rozwiń filtry";
		}
	addListenerToSearchAndFilter();
}

function switchAccordionAfterClick (){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");		
	x.style.display = "none";
	y.innerHTML = "rozwiń filtry";
}
</script>

This code works well, however I would like to do one more thing. I would like to get name of the chosen filter to display. So now, the point is to find the way to get element label text

Add New Note to this Reply

[Kamil Sawoń]

Thank You
Update – This code works, but only once. looks like afer use s&f resets my event listener

<button class="mobile-menu-accordion" id="mobile-accordion-button" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.innerHTML = "zwiń filtry";
		} else {
			x.style.display = "none";
			y.innerHTML = "rozwiń filtry";
		}
}

var elements = document.getElementsByClassName("sf-label-radio");

function switchAccordionAfterClick (){
	if (window.screen.width < 757){
		var x = document.getElementById("mobile-menu-panel");
		var y = document.getElementById("mobile-accordion-button");
		x.style.display = "none";
		y.innerHTML = "rozwiń filtry";
		
	}
}

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', switchAccordionAfterClick, false);
}
</script>

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', switchAccordionAfterClick);
});

Add New Note to this Reply

[Kamil Sawoń]

There is a code:

<button class="mobile-menu-accordion" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else { x.style.display = "none"; }
}

function switchAccordionAfterClick (){
	if (window.screen.width < 757){
		var x = document.getElementById("mobile-menu-panel");
		x.style.display = "none";
	}
}

document.querySelector('.sf-label-radio').addEventListener('click', switchAccordionAfterClick)
</script>

Add New Note to this Reply

[Alessandro Epis]

This reply has been marked as private.

Add New Note to this Reply

[Lindsey Siehda]

There is no lazy loading, but I found the issue. For whatever reason the filtered results columns are losing styles, the columns are not resizing to 100% for mobile so there is not enough room to display the content with the padding. Not sure if this is my theme or the plugin, but I’m using WP Bakery Default Post Grid with 3 columns. I can fix this using css. Thanks!

Add New Note to this Reply

[Trevor]

In my example, the Category filter? If the form is set correctly, our cache will populate that list from the terms you have used in the posts.

I would point out that there are a number of pre-made card layout styles (templates) for that grid, I just made a simple one for myself (the first one on this list):

https://www.screencast.com/t/dcTqeyhm4

Add New Note to this Reply

[Trevor]

You would need to apply custom CSS to the form to suit your precise needs. There are many CSS snippets on our forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

I do sometimes provide these, if I have the available time (but I am rather busy at the moment, sorry).

For example, to find snippets for the search field, which has the class name sf-field-search, this search should give you posts that style that field:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter+sf-field-search/

Rounder corners are set with the CSS border-radius attribute.

Add New Note to this Reply

[Richard Hartley]

This reply has been marked as private.

Add New Note to this Reply

[Arthur Mayr]

This reply has been marked as private.

Add New Note to this Reply