List item color for anchored section

[keneso]

Thank you.

Yeah, I kinda guessed that, I am looking forward to Paul’s kindness.

[PaulOB]

@keneso

Thank you.

The issue is that when moving away from the last clicked image the highlight stays on, I mean you click on the image, and then decide to go to another section of the page although you are not viewing the image the link image is still highlighted.

If you don’t want it persistent then you can do it with css on focus instead.

e.g. Remove this script:

<script>
$(document).ready(function() {
    // add class to link when clicked   
    $('body').on('click','.ab-links-sx li a', function(event){
            $('.navon').removeClass('navon');
            $(this).addClass('navon');
    });
});

</script>

Then add these styles:

ul.ab-links-sx{
    margin:0;
    padding:0;
    list-style:none;
    width:27%;
    float:right;
}
.ab-links-sx a,.ab-links-sx img{display:block;width:100%;height:auto}
.ab-links-sx li a:focus{outline:1px solid yellow;background:#0F0}

[keneso]

Thank you.

It works as expected.

Now I don’t want to push my luck, and abuse of your kindness, I am happy with your solutions, but would it be possible to have it in a way that also by scrolling away from the section the focus is remved?

You’ve done already a lot, and I will accept a no.

Thanks again.

[PaulOB]

Hi,

@keneso

I am happy with your solutions, but would it be possible to have it in a way that also by scrolling away from the section the focus is remved?

That would be quite awkward because you would have to monitor the scroll event for the window and then remove the focus from the link which means every time you scrolled the page this action would be triggered which would slow the page down a bit. You would probably need something like waypoints if you only want to remove focus when the element is out of view.

As you are already scrolling the window with some dynamic actions you would probably need to incorporate it into that code also otherwise you would lose the focus the first time you clicked the link.

This is probably a question for the JS forum now and would be better rephrased and posted there as it will likely need more sophisticated coding that I can offer here.

[keneso]

Thank you.

I might post in js, as it’s not a priority, though a nice feature, now I have to work on the content.

Thanks again.