Category filter styling

This topic contains 8 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 2 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #47776
    bendorf_07
    bendorf_07
    Participant

    I am using Ajax Search Pro on a development website for the blog page at https://kravebranding.com/drsd/disability-rights-blog/

    My client wanted the category selection to look like buttons rather than radio options, so I wrote some css to make it look the way they wanted it. However, they want to have an indication on the active selected category. because the radio is nested with the input inside of the label, I am unable to target anything by using input[type=radio]:checked. Or input[type=radio]:checked + label. do you have any way to make the categories display like I have it on the page now, but show say a dark blue background on the current selected category?

    #47777
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    I think the easiest and fastest way is to use a bit of javascript to mark the selected label. In CSS it’s not possible to target parent selectors, so I don’t think there is any other option:

    jQuery(function($){
        $('.asp_label').on('click', function(){
            $(this).parent().find('.asp_label').removeClass('asp_label_selected');
            $(this).addClass('asp_label_selected');
        });
    });

    This will add “asp_label_selected” class to the current selection, then you can target it with CSS:

    .asp_label_selected {
    }
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #47787
    bendorf_07
    bendorf_07
    Participant

    Thank you Ernest, I did try to add this exactly as written but it doesnt seem to be working properly. If you inspect this page you will see the function loading in the head:
    https://kravebranding.com/drsd/disability-rights-blog/

    Did I set this up incorrectly, should the function be changed a bit? My experience with CSS is high, my JS and JQuery is very low though, so your help is appreciated!

    • This reply was modified 2 months, 1 week ago by bendorf_07 .
    #47788
    bendorf_07
    bendorf_07
    Participant

    Could this be written in vanilla JS rather than jquery?

    #47793
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    The header is not the best place for the script, I recommend putting it to the footer, right before the closing body tag, that should do the trick. When I initiate it from the console it does work, so the issue is only the timing.

    Could this be written in vanilla JS rather than jquery?
    Surely, it would be a bit more complicated, but since you have jQuery on the pages loaded, it’s just much simpler to utilize it.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #47802
    bendorf_07
    bendorf_07
    Participant

    I moved the code to the theme file right before the closing body tag. A bunch of plugin scripts automatically insert below (a lot from ajax pro) it so that seems to be the lowest I can place it. Any suggestions?

    #47812
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    It still should be okay, maybe there is a delay on the window load and a timeout could actually fix it:

    jQuery(function($){
        const load = () => {
            $('.asp_label').on('click', function(){
                $(this).parent().find('.asp_label').removeClass('asp_label_selected');
                $(this).addClass('asp_label_selected');
            });
        }
        load();
        setTimeout(()=>load(), 1500);
    });
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #47826
    bendorf_07
    bendorf_07
    Participant

    This worked! Thank you so much!

    #47827
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.