I'm trying to find an elegant way to inform a user that s/he is about to be logged out and I know that most browsers will give you some indication that a hidden tab has an alert box open. I would like to duplicate this functionality without actually showing an alert box.
I have thought about forcing the tab/window to gain focus, but that is quite obtrusive and I hate it when websites do that to me, so I'm looking for something a little more subtle.
Any ideas?
Edit/Clarification: I already have a div that pops up if they are about to be logged out. My problem is that if they are on another tab, they won't be able to see that div, so I would like some way to notify the user that something important has happened on my tab so they go check it out and see the logout notice.
The favicon idea listed below is an excellent idea, any others?
Here's an interesting way that comes to mind. When its time to be logged out, change the website's favicon dynamically. Newer browsers should be ok with it.
Look here: Changing website favicon dynamically
Some techniques I've seen:
Some sort of sound that's played (I think it's done with Flash in the case I'm thinking of, but maybe it's possible with HTML5's audio tag)
Flashing/alternating favicon
Use JavaScript to change the page title tag every 2s or so
You could create a page that informs them they will be logged out in a certain amount of time with a button that would allow them to maintain their session. Or maybe you could use a lightbox modal popup window (example here).
Why not swap out a div styled how you want to change to let them know they will be logged out soon? Then, you can simply have it as a portion of your page with all the same style and formatting?
For example, your normal page has some sort of page element with visibility:block; and then before they will be logged out, you change that to visibility:none; and change your other element (in the same place) to have visibility:block;
Does this idea make sense? You have to be able to detect when this is happening with Javascript already to alert, so instead of altering you are just swapping out display elements.
I hope this is helpful,
-Brian J. Stinar-
it probably doesn't go with what you're after but a simple modal window is probably a good idea? i know it doesn't alert the user instantly, and they won't see it unless they switch back to that tab, but it's unobtrusive and i believe most users would prefer not to have something rammed in their face!
If this notification is to be triggered by a user clicking "log out" or the likes then they will see it and it won't be as intrusive as forcing them to stop what they are doing and close the alert box.
And if it's due to time out or something similar then the user isn't overly concedrned or they would still be on that tab.
I think that this serves the best purpose in terms of usability as people don't want to be hassled or have their workflow broken by an alert shoved at them! A perfect example is Microsoft TFS which would constantly throw alerts at you when you got signed out, which got really frustrating, really quickly
so my answer is think how the user would like to be notified in the least obtrusive way :-)
Related
I know all the easy answers concerning onbeforeunload, click and keypress. but still, the browser seems to know what is happening, therefore, somewhere that information should be available.
try it, make such a page with onbeforeunload. you'll see that whenever you refresh, the popup mentions something about reloading. yet if you go to a completely different page, the confirmbox mentions something about navigation.
is there any guru who knows this and if this is (gonna be) possible?
I've noticed for a very long time that when you try to copy a link location or open a link on Facebook, it modifies the link and passes it through l.php.
For example, I can be sent to
http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.google.com%2F&h=DKVUritNDJDJLDLVbldoDLFKBLOD5dlfDJY_-d3fgDUaA9b
even though my browser render the link preview as http://www.google.com/.
Today, I took a closer look using Firebug and found that Facebook puts onmousedown="UntrustedLink.bootstrap($(this)[...] in the <a> tag. The second I right clicked the link, I saw the href attribute change in Firebug.
This worries me.
The advice many of us have given to less tech-savvy people (check where the link is taking you before you click so that you don't become a victim of phishing) now seems to have become useless. Isn't this a security risk? Can't phishing websites misuse this?
Why don't browsers prevent this behavior either by disallowing onmousedown to change the href or by running the javascript before reading the href attribute, so that I am sent to the location I thought I going to, not the one change while I was clicking it?
Edit: I want to briefly emphasize that what bothers me more than the risk of phishing is that users are being misled and it simply feels wrong to me that this can happen, whether by a trusted source or not.
I agree that there is potential here for phishing. This was reported as a bug in FireFox quite a long time ago, but the problem is this:
<body onmousedown="document.getElementById('changeMe').href='www.somewhereelse.com'">
<a id="changeMe" href="www.google.com">google</a>
</body>
Events bubble up to their parent, you would need to detect if an onmousedown event was going to change the href of a child element. Sounds reasonable? Okay, how about this:
<script>
function switcher() {
window.location = "www.somewhereelse.com";
return false;
}
</script>
<body onmousedown="switcher()">
google
</body>
So we need to look out for window.location in functions triggered by onmousedown events as well. Still sound reasonable? How about if I have the onmousedown event remove the link altogether, replace it with a new element and then trigger the click on that. I can keep coming up with examples.
The point is, Javascript can be used to misdirect people using the status bar - you shouldn't trust it, you can only trust the URL.
To change this browsers would need to give the set href value on a link at the time of the click presidency over any other events that might happen, basically disable mouse events on anchor tags. I would venture to guess they probably won't do this, it would break too many applications that already exist.
Edit: Alternatively, I've seen people propose different methods of detecting and warning the user about possible link hijacking, but I've not seen any implemented yet.
The advice many of us have given to less tech-savvy people (check where the link is taking you before you click so that you don't become a victim of phishing) now seems to have become useless.
If by "check" you mean the link 'preview' browsers show at the bottom status bar then you are correct. That is not enough to check whether a link really goes where it claims to be going. For instance, running the jquery script below on a page will cause all link to go to google.com regardless of what the actual href target of the link is:
$('a').click(function(evt){evt.preventDefault();window.location.href="http://google.com"})
Can't phishing websites misuse this?
Not really, because facebook is where the said javascript would have to be called from. The user has to go an untrusted source in the first place who would embed the javascript in the tag.
I have a problem that I have been trying to figure out and haven't been able to get past it because Chrome/FireFox/IE do not publicly publish their "rules" for pop up blocking when it comes to JavaScript, Flash, etc. I am trying to trigger a window.open() when a user clicks anywhere on page. I've tried this:
document.onclick = window.open("http://msn.com");
But all 3 browsers are blocking the popup, even though it is a user interaction.
If the user is blocking pop-ups, it's because they don't want popups like yours to appear as a response to their user interactions. If a popup (as opposed to something more sophisticated such as making an otherwise hidden div appear) is what you really must have, then inform the user that they need to enable popups to interact with your site (I've seen a few sites do that, that annoys me and I count it as a big black mark against the site that prompts me to look for their competitors and alternatives, but if there's no real alternative I'll grit my teeth and temporarily re-enable popups in such cases). (But, do consider that annoying users is not a way to win their hearts and minds, so do look for nicer alternatives!-).
If there is a need to display some simple confirmation popup, most developers would rather install jQuery, find some dialog plugin for it, skin it, than put a one liner:
if(confirm("Are you sure?")) { ... }
Using alert() for displaying error messages is considered cheap.
And how many sites can you name that are usingprompt()?
So, the question is:
Is there something wrong with those dialogs so they should be avoided? Yes they have (very) limited functionality and customization, but when you don't need anything fancy, is using js dialogs still a bad practice?
Why these dialogs haven't seen any improvement in past 10 years (probably longer) and none is planned for near future? Wouldn't it be nice to have native js access to fully customizable desktop-level dialogs? At least adding error/warning/info type of dialogs and adding ability to customize button captions would be a big help.
alert displays a modal dialog box which effectively disables the browser UI until it is dismissed. Most developers consider that to be bad design and most users consider that irritating.
One of the main issues that I find with modal dialogs is that they don't let me open a new tab and do a quick Google search before responding to them.
On some browsers, alerts() can cause the page's tab to suddenly grab focus. Occasionally useful, mostly irritating.
One of the resons why i do not use prompt or confirm or alert too much, is that they freeze all other browser UI. They dont allow the user to switch to another tab or do anything else w/o dismissing the dialog.
Cuz they are ugly and disrupt the user experience by popping up a gray box out of nowhere. Its better to have a HTML dialog conforming to your website themes and look n feel
O yeah. and they are modal. This adds insult to injury
I would like to use the jquery slideUp effect when the user navigates away from the page just to make the page look cool as it closes.
I assume that I should use the onunload event but how can I delay the page closing long enough for the effect to run to completion.
One of the options that came to mind is effectively hijacking the page closing function, storing it in some variable and then executing it once I had run my effect but I have no idea how I would do that.
Any suggestions or alternative ideas are more than welcome
what you're looking for is the onbeforeunload event.
just a warning though... it should be really quick... or your visitors are probably going to hate it no matter how cool it looks
as to preventing the page from navigating away before the animation is done, that's a bigger problem... any animation is going to rely on setTimeout/setInterval and the page won't wait for those to complete before leaving.
Doing anything but closing the window when the users ask to is breaking a contract with the user. The browser window is not yours, it's the users, and no matter how cool the effect, it will inevitably annoy most of your users.
The onbeforeunload event is very restricted in what it can do. It must return a string, which is then used to prompt the user for a confirmation about leaving the page. It won't work for cool animations.
As far as I know, the only way to stop a user from leaving a page is the onbeforeunload event, which isn't cancelable. Instead, you return a string from that method, the browser prompts the user with a Yes/No dialog, life goes on. 276660 has more info about this.
I don't think you're going to have much luck with this one.
why not, instead of making a "cool" effect when a user simple want to go away from your website (even if the user closes the browser/tab the unload event will be fired) and annoying the simple user with that ... preventing him/her to return again...
...do that "cool" effect when a user reaches your website for the first time? as a normal intro effect?
I did that as a simple idea, you can see it here: http://www.balexandre.com/jmfc
I would agree 100% with Jonathan Fingland's answer, and add this.
In IE, (I'm not sure what versions support this, I know IE6 did) you can use some propriety meta tags to achieve fades etc when leaving the page. However, this is limited in browsers (IE only), so you're stuck for cross browser use.
You may find loading new content via AJAX would give you better control of effects and transitions, as well as reducing the annoyance factor to the user which can result from trying to hijack the browser actions in such a manner.
I would look at using a form of slider as mentioned above (see for instance http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials),
or simply loading content panes in response to user clicks.
The only way I've found for delaying the window to close, is using an alert. If this is an acceptable compromise for your case, it will really delay the window destruction in memory, and allow your page timers to execute (of course, if user does not close the alert popup earlier than your animations finalize).
I recently used this approach so i could call a flex method through FABridge (which would otherwise be destroyed before the flex method call finishes). I'd like to hear your comments on this.