Website: Detect when I arrive somewhere because of History Navigation - javascript

I have a page where I show a throbber when I navigate away from the page. Like <a onclick="throbber.show()"> on every link. When I now navigate back in Firefox, the throbber is still shown.
Is there any javascript event that is fired to the arriving webpage when I click back? Or one that is fired just when the webpage is changed to the new one? Or can I make my throbber more intelligent?
Thanks for any input!

put this in your html:
<form name="_browser"><input id="checker" value="1" type="hidden"></form>
and also this javascript:
function cacheCheck()
{
var checker = document.getElementById("checker");
if (checker.value == 2) return true;
checker.value = 2;
checker.defaultValue = 2;
return false;
}
function cacheReload()
{
if (cacheCheck()) location.reload(true);
}
and then call cacheReload when your page loads:
<body onload="cacheReload()">

Dldnh's answer inpired me to do some tests. I suspected that the body.onload() event would be called when going back and forth. So I created a simple testpage and found out that this is true in Firefox 10, IE7, IE 8, IE 9 and Chrome 17. Also jQuery(document).ready() will be called.
The very simple solution for hidind the throbber would therefore be either using
<body onload="hideThrobber()">
or using jQuery ready
jQuery(document).ready(function () {
hideThrobber();
};
to hide the throbber then. I implemented this and it seems to work fine on my page. Would be great if somebody with a similar problem could confirm this.
I also found this interesting Stackoverflow question. While it is a little outdated, the point that calling javascript on navigation back and forth slowing down the page is still true. But I would guess that todays JS-Engines are fast enough so this is not a real issue anymore.

If you can't turn off the throbber from the page you navigate to, there are a few things you can do. The trick is that the page will be left active, so you can start up some things before you leave, in the onclick. They aren't perfect though.
Start a timer. The timer will be running when you return to the page, so the timeout routine will be called, and you can switch the throbber off there.
Problem: if you set the timer interval too small, the timeout routine will be called before the user has actually left the page, and the throbber will stop. Or if you set the interval too large, it will take a while before the timeout routine kicks in after they have returned.
Add an event listener to the body that responds to the mousemove event, so that as soon as the user moves the mouse, the routine that turnes off the throbber will be called.
Problem: if the user clicks the browser's Back button, the mouse will be outside the window when the page is redisplayed, so the throbber will remain visible until the user moves the mouse into the window.
So, take your pick. Or do both. Just remember to clean up afterwards - stop the timer, remove the event listener.

Related

How to switch between different window.locations depending on answer to window confirm() method

I have a page that presents a test, where javascript sets a timeOut to abandon the page if the user waits too much (180") before giving an answer and pressing submit.
It has to be done for various reasons, and I cannot modify the committment.
After 180" on the page, so, currently the code goes back to a beginningpage.php where the user will have to re-enter its unique ID to continue the test.
This is the simple javascript code:
setTimeout(function () {
window.location.href= "beginningpage.php";
}, 180000);
Everything runs smooth. Now I need to modify the code to better manage the case. We assume that if the user has gone away, it will not be able to answer to an alert box. So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
Otherwise, if the user is still at his desk and is simply wondering about the answer to give, he must be given the possibility to click "ok, I hurry up" to remain on the page for say another 60". That means that after the first displaying of the confirm window, the timeout must be set to a different deadline, not 180000 as before but 60000.
Maybe the idea of using different window.locations.href is not the right one.
How could be the code to accomplish everything I need as above explained?
Just don't use a confirm box... Show a div with two buttons after 180 seconds and then start counting your 30 seconds.
So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
You can't. confirm, alert, and promopt are 1990s holdovers with stop-the-world behavior. (Mostly. Browsers are eroding that slowly over time.) That means none of your JavaScript code can run while the archaic window is showing.
Instead, switch to using modern alerting techniques (showing a "modal" div, etc.) so that your JavaScript code can use setTimeout to give up after the relevant amount of time.
You can never achieve this with alert or confirm because they block further js execution till the popup is active.
You need a custom modal with html element and a js function
All you have to do is call clearTimer for auto-page reload based on the response from custom confirm modal.
var x = document.getElementById("stopReloadBtn")
var reloadTimer
setTimeout(function() {
x.style.display = "block"
reloadTimer = setTimeout(function() {
window.location.href = "beginningpage.php"
}, 5000)
}, 5000);
function stopReload(){
clearTimeout(reloadTimer)
x.style.display = "none"
}
<button id="stopReloadBtn" style="display: none" onclick="stopReload()">Still Here?</button>
I have reduced the timers to 5 sec in this code. A button will appear after 5 sec. After which you will have 5 sec to click this button else the page will reload.

Html onmousedown vs href Precedence

I use the following code in one of my html pages.
When user clicks "Search Engines" links it opens yahoo.com on a new page and Google on current page.
I've tested this and it works (opens both urls), but is there any chance that the page will complete the window.location (redirect to a different page) without completing the href command?
Is there a rule for Precedence between the two command?
**Note: I know I can solve the problem in different ways, but I'm curious about this specific situation.
<html>
<head>
<title></title>
<script type="text/javascript">
function clickRedirect() {
window.location = 'http://www.google.com';
}
</script>
<body>
<a onmousedown="clickRedirect()" href="http://www.yahoo.com" target="_blank">Search Engines</a>
</body>
</html>
The mousedown event will happen first, but as you can see from the fact your code is currently working, that's not the whole story.
The question is: Once the mousedown has happened and you've set window.location, does the page get whisked away immediately (and therefore processing of the default action of the click on the a element doesn't happen), or does that default action get completed before the page is destroyed and replaced with the new page?
The answer is: I don't think that's guaranteed behavior at all (either way), and I wouldn't rely on it cross-browser. For one thing, what if the user holds down the mouse button? Since the default action of an a element isn't triggered until a click, which requires a mouseup.
Instead, I'd probably hedge my bets, in two ways:
First, I'd use click, not mousedown, for this. Users don't expect pages to swap out when they just hold the mouse down.
Second, I'd change your function:
function clickRedirect() {
setTimeout(function() {
window.location = "http://www.google.com";
}, 0);
}
Now you're specifically giving the browser a chance to complete the default action of the click before you go off to another page.
You might find more information on this buried deep in the DOM events specifications:
DOM2 Events
DOM3 Events
...in that they might say something about what should happen when an event is in progress and the page is being destroyed. I didn't immediately see anything.

Synchronous Blocking Animation Slider Function in jQuery?

Possibly this has been discussed a zillion times and I'm over thinking this, but...
How does one create a 'blocking' jQuery animation?
I have a page which has a 'special' slider animation that executes the first time a user visits the site. But there is a 'normal' slider animation that fires every time the user visits the same page. Since both animations fire with document.ready() they both occur at the same time. What I -want- is for the first animation to fire and then when the user clicks a button to close the window -then- the second animation fires.
//pseudocode
jQuery( init );
function init() {
if(firstVisit) {
Animation1(); //Special. Only shows 1st visit to site
Animation2();
} else {
Animation2();
}
}
}();
Here's the site: http://jchmusic.com
I guess I can re-write the code for -both- so that the second one explicitly starts only when the user clicks the 'close' button on the first animation, but to -me- it would look much cleaner if I could just make the code on the first animation 'blocking'... ie. the second animation doesn't start until the first animation returns. I messed about with SetTimeOut and various 'loops' and all it does is hang the browser... I'm sure this has been mulled over many times.
Any ideas?

How to get scrollTop of page just after page onload event?

I know how to get the scrollTop of a page, I use this simple JS function (code copied around):
function GetScrolledTop()
{
//I never work in IE quirkmode, I always use DOCTYPE as 1st line, so I don't need to test for document.body.scrollTop
return self['pageYOffset'] || document.documentElement.scrollTop;
}
This works and my problem is the following: I tried to add it in the page onload event
<body onload="alert(GetScrolledTop());">
On page load I get ZERO (which make sense), but the problem is that I get ZERO even if I scroll the page and then reload it without touching the scrollbar.
It seems like the browser does:
loads page
calls my GetScrolledTop() (so obviously shows ZERO)
then scrolls the page to where it was before.
Do you know how to get the scolledTop after the step 3?
I mean how to get the scrolledTop AFTER the browser scrolled the page?
(maybe without using a timer)
Probably not without using a timer. But you might be able to use a timer with a 0ms delay, which would execute the function when the thread becomes idle, whilst still appearing to be instant:
<body onload="window.setTimeout(function () { alert(GetScrolledTop()); } , 0);">
EDIT - Thought it might also be worth mentioning that most browsers support the onscroll event, which should fire after the window scrolls.

Title-changing effect/window event listener does not work

I tried to search but could not find out anything useful. This is a piece of code for my Greasemonkey script. Basically, I want to have the same effect as Gmail. When the page loads and you have new messages, the title will change repeatedly and make you notice. The problem is it does not work for the first time.
For example, if the user opens the page on new tab and does not move to the page, it does not work. But if the user moves to the tab and then moves to another tab, the script works.
Can anyone point me the right direction?
function startBlink(){
window.blinkInterval = setInterval(function(){
if(document.title != "Message"){document.title = "Message";}
else{document.title = "Application";}
} , 1000);
}
function blink(){
document.addEventListener("blur",function(){setTimeout(startBlink(),1000);},false);
document.addEventListener("focus",function(){clearInterval(window.blinkInterval);},false);
}
window.addEventListener("load",blink,false);
have you thought about changing (iterating through multiple variants of) window title instead of blinking (blur/focus)? that also attracts an eye.

Categories