Javascript function on url change of page

Question

I have an html page (http://www.autoelettric.com/info/SafeConversionToLed.html) that when I click on button the status bar on top will change. The site would be designed for easy navigation through the buttons, but if an user uses the scroll, the status bar is not updated. So I would like to know if can I do an event that updates the status bar on the change of url (httt.url.com # step1, httt.url.com # step2, httt.url.com # step3).

For example, my code now:
Script:

<script type = "text/javascript">
    function status0()
    {
        document.getElementById("imgStausBar").src ="status0.png";
    }
    function status1()
    {
        document.getElementById("imgStausBar").src ="status1.png";
    } 
    function status2()
    {
        document.getElementById("imgStausBar").src ="status2.png";
    } 
    function status3()
    {
        document.getElementById("imgStausBar").src ="status3.png";
    } 
</script>

Html

<a href="#FlasherUnit" onclick="status1()"><div class="btn-5" width="50px">↓ START</div></a>
<a href="#ExactPower" onclick="status3()"><div class="btn-5" width="50px">→ YES</div></a>
<a href="#FlasherUnit" onclick="status1()"><div class="btn-5-previous" width="50px">↩ PREVIOUS</div></a>
<a href="#SafeConversion" onclick="status0()"><div class="btn-5-top" width="10px">↑</div></a>

What I would do:

 if current url is #SafeConversion do status0()
 if current url is #FlasherUnit do status1()
 if current url is #ExactPower do status2()
 etc...

EDIT:

I added this, but it doesn't work.

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else {
    var locationHash = window.location.hash;

    window.setInterval(function () {
        if(locationHash == "#SafeConversion") {
            status0();
        } else if(locationHash == "#FlasherUnit") {
           status1();
        } else if(locationHash == "#ExactPower") {
           status2();
        } else if(locationHash == "#ExactPower") {
           status2();
        } else if(locationHash == "#YourSolution") {
           status3();
        } else if(locationHash == "#YourSolution2") {     
           status3();
        } else if(locationHash == "#YourSolution2/1") {     
           status3();
        } else if(locationHash == "#YourSolution3") {     
          status3();
        } else if(locationHash == "#YourSolution3/1") {     
          status3();
        } else if(locationHash == "#YourSolution4") {     
          status3();
        } else if(locationHash == "#Contact") {     
          status0();
        }
    }, 100);
}

Possible duplicate of [Handle URL anchor change event in js](http://stackoverflow.com/questions/2161906/handle-url-anchor-change-event-in-js) — rpadovani, Feb 10 '17 at 14:48

rpadovani · Accepted Answer · 2017-02-10T15:50:00.740

Something like this should work:

<script type="text/javascript">
function hashChanged(locationHash) {
    if(locationHash == "#SafeConversion") {
        status0();
    } else if(locationHash == "#FlasherUnit") {
        status1();
    } else if(locationHash == "#ExactPower") {
        status2();
    } else if(locationHash == "#ExactPower") {
        status2();
    } else if(locationHash == "#YourSolution") {
        status3();
    } else if(locationHash == "#YourSolution2") {     
        status3();
    } else if(locationHash == "#YourSolution2/1") {     
        status3();
    } else if(locationHash == "#YourSolution3") {     
        status3();
    } else if(locationHash == "#YourSolution3/1") {     
        status3();
    } else if(locationHash == "#YourSolution4") {     
        status3();
    } else if(locationHash == "#Contact") {     
        status0();
    } 
}

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

</script>

I added this code, but it doesn't work.. I upload the page on site, you can try.. ( http://www.autoelettric.com/info/SafeConversionToLed.html ) — Marika F., Feb 10 '17 at 15:42
I add the { after the function... now is working. thanks a lot! — Marika F., Feb 10 '17 at 15:45

score 0 · Answer 2 · answered Feb 10 '17 at 14:46

0

If you mean the url, when you said status bar, i tried it and the status bar updated when i scroll-up or down.

answered Feb 10 '17 at 14:46

Dora

25
2

No, I think he means the progress bar that is at the top of the page – rpadovani Feb 10 '17 at 14:48
but only if you use the button.. if you scroll (with the mouse on pc and with a finger on mobile) the status bar isn't updated – Marika F. Feb 10 '17 at 14:48

score -1 · Answer 3 · answered Feb 10 '17 at 14:48

-1

use "window.location.hash"

var locationHash = window.location.hash;
if(locationHash == "#SafeConversion") {
    status0();
} else if(locationHash == "#FlasherUnit") {
    status1()
}

and so on....

answered Feb 10 '17 at 14:48

Vilas Kumkar

1,322
9
16

And where can I add this? On in section? – Marika F. Feb 10 '17 at 14:50
@Vilias Kumkar, I added but doesn't work (view my edit code in question).. – Marika F. Feb 10 '17 at 15:02
No, I don't tink. But I have to call this function() anywhere? @Vilias Kumkar – Marika F. Feb 10 '17 at 15:14
@MarikaF. Would mind to bundle you all code in fiddle and share over? – Vilas Kumkar Feb 10 '17 at 15:16
Of course you need to call the function, you need to insert in a setInterval() so every x milliseconds (100 should be ok) it check the location hash – rpadovani Feb 10 '17 at 15:27
@rpadovani How can I do this? I added window.setInterval(function () {...my if...}, 100); – Marika F. Feb 10 '17 at 15:33

Javascript function on url change of page

3 Answers3