Develop Reference

Best way of clearing up URL hashtag

Could someone point me towards on how to clean up the # inside URL?
I've currently got a popup which uses the # for reference, however when the page is refreshed the data isn't loaded because the data is only loaded when the user clicks on a button.
Currently happening:
User clicks button
Modal pops up (#user-calendar)
User refreshes page, data is no longer there, modal still pops up because #user-calendar still exists
What should be happening:
User clicks button
Modal pops up (#user-calendar)
User refreshes page, data is no longer there, modal should be closed.
I've tried things like:
setTimeout(function(){}, 500);
However with setTimeout etc the user still sees the modal then it closes. I want something clean, so it doesn't look messy to the user.
Anyone got any ideas how this can be achieved?

Try changing the hash before the modal code runs. You could put this in it's own script tag above the script that makes the modal.
if(window.location.hash === "#user-calendar"){
window.location.hash = "";
}

How can I detect that the browser back button has been pressed in a single page app?

On a certain page in my app, I have a popup guide that walks the user through several steps. When the user clicks the popup next button it advances, sometimes going to a new page (but not always). My problem is that when the user clicks the browser back button, the popup does not close and causes issues if the user tries to advance again. What i'd like to do is just close the popup if the user hits the browser back button. I'd assumed this would be an easy problem, but I can't figure out a solution.
Since this is a SPA, 'onbeforeunload' and 'onunload' don't fire. The way the app is setup, 'onpopstate' also doesn't fire. 'hashchange' fires, but it also fires sometimes when the user clicks the next button on the popup, and I don't see a way to differentiate between that hashchange and hashchange when the user clicks back.
Is there some other event I can check for? I just want to run a function to close my popup (and do cleanup) when the user clicks the back button.

The following assumes you do not use the history API:
Often times I have seen use of # (the anchor tag) in the URL. This will allow for navigation throughout a single page without refreshing the page. As the user progresses in the workflow. For example,
window.location.href = "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page" + "#test"
will not refresh the page. When the back button is pressed, the following statement will evaluate to be true:
(window.location.href == "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page")

Beforeunload is not working to redirect user to another page, how can I redirect user to another page/url when he attempts to close a window/tab?

My following code isn't working to redirect the user to another page:
$(window).on('beforeunload',function(){
window.location.href="http://www.google.com;
}) ;
I want the user to be redirected to another page when he attempts to close the tab.
What's the alternative and appropriate way to achieve this?

*Don't do it*
But it is possible with the user's permission; you can achieve something like this (took me a while to find a website that was happy in a frame)
window.onbeforeunload = function () {
window.setTimeout(function () { // escape function context
window.location = 'http://bbc.co.uk';
}, 0);
window.onbeforeunload = null; // necessary to prevent infinite loop
// that kills your browser
return 'Press "Stay On Page" to go to BBC website!';
// pressing leave will still leave, but the GET may be fired first anyway
}
Demo

I don't think this is possible.
There are some things you can can do in this event but that is severely limited due to spammers back in the day. They used to have animated text in the window statusbar which would obscure link href's so you would be clicking blind and open tons of windows when you tried to leave so that you were essentially trapped on the site.
This got to be such a problem that as far as I recall it was one of the "features" that Firefox bragged about solving when it first launched.
It was toned down to being able to beg them to stay with a dialog box but then that was abused as people worded it like official system messages and tricked people.
Now most browsers let you request a "stay on page / leave page" dialog but dont give you any control over the wording.
Here are some docs that list your options:
https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload

stop js script when scroll or click

I am using this script to make an autoscroll on my website. When the user opens the website, theres a logo and after an amount of time, the browser scrolls down.
$(document).ready(function () {
setTimeout(function(){
$('#logoclick').trigger('click');
}, 3100); });
the problem is, that everytime the user enters the website, this script runs, which is bad, because, if the user enters the page on an anchorpoint (e.g: mypage.com#contact) the first thing happens is, that the browser goes to top of the page and then scrolls down.
The question is, how could I just disable the script, e.g. when the user scrolls or clicks?
Thank you!
AD

You could put this code within an if statement which checks if an anchor is present. If so, don't execute the code.
See here for how to do that.
EDIT
If you also want to stop the animation when the user scrolls, even when no anchor is present, you can do so using a jQuery stop() function in javascripts onScroll event.
See this for the on scroll event.
See this for the rather self-explanatory stop method.

JavaScript body onunload not working

Hi I have the following code:
function redirect(){
window.location.href='logged_out_chat.php';
}
...in my header and the following body tag:
<body onunload="javascript:redirect();">
...when i try this on one laptop, it redirects as it is supposed to (when you click on any link), but on my other laptop, desktop and notebook it ignores the redirect and goes to any link you click on.
I have spent hours on this...all have the same browser. I was wondering if there is an alternative way i could redirect the user when they click on a link etc.

What do you expect would happen?
When I close your page in my browser you get to redirect me to a page of your liking?
This goes againts security and user control. You shouldn't be able to interfere with the page when I close it.
The morale is don't rely on onunload to do anything non-trivial.

When a window unloads it stops processing everything, that means ajax requests, pending downloads etc, most even freeze animated gifs. Some browsers support onbeforeunload, but I completely agree with #Raynos you can't count on the event, so using it is not a good design decision.

You can't hijack onunload and redirect the user. That would prevent the user from closing their browser, refreshing the page, or manually navigating to another site. If that's what you are trying to do, you are out of luck. All onunload is good for is asking the user if they are sure they want to leave the page.
If, however, you are trying to cause a clicked link to go to a different location, that's easy. To change the link permanently:
myLink.href = 'logged_out_chat.php';
If you want to change the links temporarily, add a click handler that you can later remove:
function goToLoggedOutChat(e)
{
e.preventDefault && e.preventDefault();
e.returnValue = false;
location.href = 'logged_out_chat.php';
}
mylink.onclick = goToLoggedOutChat;
To re-enable the link:
mylink.onclick = null;
To do it for every link on the page:
for (var i=0; i<document.links.length; i++)
{
document.links[i].onclick = goToLoggedOutChat;
}