Filtering on page load

Design help Custom code
1

Hi there,

I am looking for some help on a projects page. I am using the Finsweet filtering where I am using the cms and attributions to filter with some Finsweet custom code.

I would like the filter “All” to be active on page load. So I have used some other custom code which seems to be working however, the “All” tab is not on it’s focused colour state on page load. (This means that the user will not know that the page has already been filtered.)

The problem is also that the way I have created the filtering is that when a user clicks on a filter it filters but then when a user clicks again it “unfilters” again.

So does anybody possibly know of a way to make my “All” filter load on a certain colour when that pages loads and then when the user tabs between the filter the colour would obviously need to change back to default.

Here is my custom code that I am currently using:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Jamie_Godwin,

Welcome to the forum, glad to have you here!

You could try adding this last line to this part of your code:

document.addEventListener('DOMContentLoaded', ()=>{
         document.querySelector('.filter-button.all').checked = true;
         document.querySelector('.filter-button.all').click();
         document.querySelector('.filter-button.all').focus();

This will trigger the :focus state and should give you the effect you’re looking for.

You’ll also likely find your link will have an outline around it, if you want to remove that you can add the following code to the Inside <head> tag field of your Page Settings > Custom Code:

<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js"></script>
<style> /*
 This will hide the focus indicator if the element receives focus via the mouse,
 but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
 outline: none;
}
</style>

There may be better ways to do this but hopefully this is helpful!

3

Thank you so much for this, I am half way there. With adding all of the recommended code as your concern was there is an outline on the filter, when I add the bottom piece of code the outline disappears on hover. I am not sure if I added this code in the right place would you mind having a look.

https://preview.webflow.com/preview/wilson-construction-fac7f6?utm_medium=preview_link&utm_source=designer&utm_content=wilson-construction-fac7f6&preview=6c2ef0a996c2bbfea4d39414a0f6782e&pageId=627ab223fcbb976988e40815&workflow=preview

4

Hi @Jamie_Godwin,

Almost right, I’ve added your existing code in here so you can try replace all your code with this:

<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js"></script>
<style>
.js-focus-visible :focus:not(.focus-visible) {
 outline: none;
}

.w-nav-link.w--current {
    color: #339999;
    
</style>

P.S. You don’t need to add the <head></head> tags to this field, this code is automatically inserted inside the page’s head tags.

Let me know how you go!

5

It is working! THANK YOU SO MUCH! I cannot explain to you how happy I am that this is finally working. Thank you very much for the help. Greatly appreciated!

1 Like