How to listen for URL change in JavaScript

Question

I'm trying to implement an effect similar to the StackOverflow effect when you visit a post and the answer has an orange background that fades out. Example: How do I add a class to a given element?

My approach looks something like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Highlight element based on URL hash example</title>
        <style>
            /*
            Custom class to be applied to our element.
            */
            .focused {
                padding: 5px;
                border-radius: 30px;
                box-shadow: 0px 0px 30px #9FC43E;
                animation: fade-out-in 5s;
                animation-fill-mode: forwards;
            }
            /*
            Add keyframes to our fade out effect
            */
            @keyframes fade-out-in {
                0% {
                    border-radius: 30px;
                    box-shadow: 0px 0px 30px #9FC43E;
                }
                100% {
                    border-radius: 0px;
                    box-shadow: 0px 0px 0px transparent;
                }
            }
        </style>
    </head>
    <body>
        <section style="max-width: 768px">
            <div id="target">
                This element will be highlighted on load.
            </div>
        </section>
        <script>
            // Highlight the target based on the URL
            var anchor_id = window.location.href.split('#');
            var target = document.getElementById(anchor_id['1']);
            target.className += ' focused';
        </script>
    </body>
</html>

This works for the first visit, but if the user clicks on a new anchor on the same page, or changes the URL fragment in the address bar, the class remains on the old element.

I'm looking for a way to move it every time the URL changes like that.

Thanks in advance.

If you have multiple pages, load and unload events will tell you when those events happen. If you have only one page and hash fragments, hashchange is the event you can use. — Shilly, Apr 24 '17 at 14:24
If you aren't opposed to external libraries, PubSubJS is a lightweight framework for publishing and subscribing to events. — Nard Dog, Apr 24 '17 at 14:25
`:target` is a CSS pseudo-class that matches an element having an ID matching the #fragment in the URL, if it helps. — Niet the Dark Absol, Apr 24 '17 at 14:26
Possible duplicate of [How can I detect an address bar change with JavaScript?](http://stackoverflow.com/questions/1930927/how-can-i-detect-an-address-bar-change-with-javascript) — gforce301, Apr 24 '17 at 14:30
@NiettheDarkAbsol: That was the ideal solution. Simple and elegant. Thank you! For this one operation, JavaScript does seem to be overkill, though you can do it. As per K-Gun but this solution was just the behavior I was looking for. Thank you. — KCCLEMO, Apr 25 '17 at 15:47
@K-Gun: I ended up going with the `:target` pseudo selector. — KCCLEMO, Apr 27 '17 at 12:31

How to listen for URL change in JavaScript

0 Answers0