to possible? + Showing when filter is active

Anthony Baldo

#87632

Is there a way for me to change the select/list options to render as a ul element for advanced styling? I want to style the drop downs similar to a faux dropdown like bootstrap does. Also is there a way to add a class/attribute to the filter when it is active/filtering and remove it when the filter is “empty”, like some specific event I can hook into with javascript?

Add New Note to this Reply

Trevor Moderator

#87684

I think this reply to a different thread might be applicable to this thread:

https://support.searchandfilter.com/forums/topic/split-form-output-single-field/#post-86065

However, I have seen some users style a list of checkboxes so that clicking the title opens and closes the list? I am not sure how they have done it, by custom CSS I should think, and maybe a bit of javascript. Most elements have unique classes and/or ID’s to target.

Or did I miss the point?

I have a feeling a lot more functionality like this will arrive in the next major update, V3.

Add New Note to this Reply

Anthony Baldo

#87689

I just noticed that the title of the topic was parsed out, it was supposed to say “select to ul possible?” so that might have made it a little confusing.

What I am hoping is to make it so that instead of the filter using the select elements and the code being:
<select name="input_name"><option value="1"><option value="2"><option>
It would render the drop downs as unordered lists so that they could be custom styled. like:
<ul name="input_name"><li>option 1</li><li>option 2</li></ul>

As for the second question, what I meant is so that when the form is submitted/changed by the user I want to append a new class to the filter/elements that shows that its active and remove it when the filter is just showing the default. Is there a specific hook I can use for when the form submits and has values vs when the form clears and returns to default.

Add New Note to this Reply

Trevor Moderator

#87711

As to the first part of the question above, try changing the type of form field to Checkbox or radio and see if that looks closer in terms of the HTML structure. For me it does.

As to the second part, I understand. In your UL example, if that field had a filter selected, it would be the li that has the extra class to show it is selected, but CSS allows you to target the parent of an element that has a given class (in this case it would be the class sf-option-active). You can hide the checkbox with custom CSS as well.

Our sf_input_object_pre filter allows you to target these inner elements also.

Add New Note to this Reply

Anthony Baldo

#87720

Ok, I see what you are saying with the checkboxes. For the second one I don’t mean on an individual option. I mean I want to change the DOM based on if the entire filter has run or if it “clear”(showing all options). So as an example. I have the filter surrounded like this:

<div id="filter_holder" class="unactive">
<!-- filter is here -->
</div>

And when someone activates an option or multiple options on the filter I want to append a class to surrounding holder like:

<div id="filter_holder" class="active">
<!-- filter is here -->
</div>

This way I can show the users with extra css that the filter is narrowing down the results they are seeing.

Add New Note to this Reply

Trevor Moderator

#87747

What I am saying is that you already have is this (a rather simplistic example, not a real example):

<ul id="filter_holder">
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

And you can use CSS to target the parent of the active class; the ul. The active class will only be there if a selection has been made.

This is, in effect, the same as having a class on the outer container.

Add New Note to this Reply

Anthony Baldo

#87979

When I use the filter and select and option, there is no class that activates anywhere on the filter indicating activation/use. It only disables for a moment and then returns to normal. Also just to let you know that link you sent about the :parent selector is a hypothetical suggestion of css. The first line is there are no parent selectors in CSS.
<br />
But anyway all I want to know is if there is anywhere in the filter functions that goes off when the filter is used/active so that I can trigger other things to happen on the page when the filter isn’t showing “all results”.

Add New Note to this Reply

Trevor Moderator

#87995

Have a quick look at this thread as it shows/discusses the use of the ajax detection hooks in our plugin:

https://support.searchandfilter.com/forums/topic/how-to-put-a-custom-image-or-icon-loader-during-ajax-loading/

You can also use PHP like this to detect an absence of applied filters, see this post:

https://support.searchandfilter.com/forums/topic/force-selection/#post-87657

Add New Note to this Reply

Anthony Baldo

#88009

Ok, I’ll just write my own function to detect the changes I need. The Ajax detection might help.

Thanks!

Add New Note to this Reply

Trevor Moderator

#88011

Let me know how you get on, and if you are able to share any handy tips to others?

Add New Note to this Reply

[Author]

Posts