Reload page when changing hash

Question

Reload page when changing hash.

I have a simple one-page site with several 'pages' on it. These pages are in one wide container which scrolls when you choose one. I have added a hash to the URL so that you can locate to specific pages directly. This just sets the style.left attribute when it matches a hash in a switch statement.

The problem is that when I change the hash value in the URL. For example, changing it from Home.html#Web to Home.html#Photos. When doing this, the page doesn't reload so the Setup function I've created that check for the hash isn't called and the page just remains where it is.

Any ideas for a way to force the page to reload? Or a better solution?

Thanks, Andy

Zobe

Answer 1

Don't reload the page. Instead, set up a onhashchange event handler, and adjust the left value from there:

window.onhashchange = function() {
    // do stuff
}

Otherwise, why using hash links instead of regular links? In any case, if you really want to reload, just put window.location.reload() inside the onhashchange handler...

Wingless

Ok, I've added it to the start of my Javascript but it doesn't seem to be firing when I change the hash. – Zobe

You have to use window.onhashchange = PageAdjust (no parentheses after PageAdjust). – Wingless

Still nothing. I feel like I'm putting it in the wrong place or something. Currently, it's just at the top of my external js file, outside of any function. – Zobe

Strange, it should be working (see a simple demo). Which browser are you using? – Wingless

I'm not actually clicking anything. I'm just changing it in the URL bar in the browser. IE10 for testing. – Zobe

It should work just the same (see another demo). Check your browser console for js errors, you probably got one (or more). – Wingless

No errors in console. I have a breakpoint on the window.onhashchange in my js and it doesn't even get hit when I change the hash value in the url. I think I've experienced this before when trying to catch window events, never figured out what I'm doing wrong. – Zobe

There must be some detail in your code, as all my tests seem to work (do they work for you too?) – Wingless

They do work, yeah. I don't understand how it's not even hitting the breakpoint when I change the hash. I'll try and upload it somewhere soon. – Zobe

Here's the Javscript. Still, nothing happens when I change the hash in the URL bar in the browser and hit Enter. – Zobe

Try adding one of your hashes here and typing enter. It works, the div moves offscreen. – Wingless

Yes it does. I just managed to get it working! I had 'window.onhashchange = PageAdjust;' in an external javascript file and I'd also placed it at the bottom of the html but in the html I hadn't removed the '()' after the function call like you said before. I removed the line in the html completely and now it works... That seems strange to me. Was it trying to call the one in the html, failing because there were brackets and then just ignoring the one in the js file do you think? Thank you very much for your help by the way. – Zobe

Sounds like you were overwriting the good handler with the bad one. I'm glad you solved it! – Wingless

Answer 2

I had a JQuery function that fired on $('body').on('click', '.subcategory-link', function () { }); which detected if there was a hash appended to the URL in my case, so I kept that function the same and then just used a force reload whenever a hash change was detected: below i write the code pls try this one it wrok from me charm.

       $(document).ready(function() {    
            $('body').on('click', '.subcategory-link', function () {        var data = $(this).attr('href');
           alert($(this).attr('href'));
           window.location.reload();
           });

});

Pout