If in some of my tabs alert() is executed, then this tab becomes selected instantly. The thing is - this alert() box is ugly. I have created with my design and all.. But when I call it - tab is not selected/focused.
window.focus(); does not work. Any ideas?
You cannot reliably force windows or tabs to grab focus. Some browsers are more amenable to the idea than others: IE will generally allow it, but Firefox has to be configured by the user to allow it, and Safari will basically never honor a focus request. (Well, almost never.)
Related
OK, I'm trying to reset the activeElement from the middle of the page so that the tab key would start from the top like, the same way as the page is just refreshed.
For that purpose (tested in FF and Chrome) I'm trying to use document.activeElement.blur() (from the browser console). As result, the selection of the <a href></a> gets visually removed (nice).
Also,running
document.activeElement after running document.activeElement.blur()
from console shows
<body class="ng-tns-0-0">
which looks good (the activeElement is body now?)
However, if I close the console and hit the Tab key, the focus appears on the next to the previous a href - Not to the link that is focused on page load + Tab key.
Why and how to fix that behavior?
The question appeared from the accessibility point of view, as the significant part of the page gets rendered with another content. The tab key needed to start over, like for a new page.
In fact, you shouldn't use blur() ever, and this method shouldn't even exist.
After having called blur(), you have no control of where the focus goes. It may go in menu bar, toolbars, or even go totally outside of the browser and/or become completely unrecoverable without a mouse.
The behavior you observe with firefox and chrome isn't standard, isn't specified anywhere, may depend on OS and/or browser settings, and you don't have control at all on it
The safest solution if you want to go back to the first element of the page is probably to focus that first element, rather than calling blur() and hope for the best.
In order for any application or website to be keyboard accessible, the focus must always be under control, i.e. you must always know exactly where it is. As the method blur() doesn't specify where the focus goes next, you lose control of the focus when using it; so you should never use it. As far as I know, it has probably no legitimate use.
I'm using the following code to open a new tab on click of a PDF download.
The problem is the new tab becomes the main tab often before the PDF loads.
How can I make the view stay on the current window (PDF) and open the new tab but not switch to it?
Note: In Chrome and Opera they understand the HTML5 download tag so the PDF simply downloads and the current window redirects - All good! So this is only a problem on IE & Firefox.
<h2 style="text-align: center;"><a href="http://cdn2.hubspot.net/hub/155045/file-847580737-pdf/Stepping_into_a_new_age_of_marketing_with_CRM_FINAL_APPROVED.pdf" onclick="casestudiesopen()" download><strong>Click here to download your eBook</strong></a></h2>
<script>
function casestudiesopen() {
window.open("http://www.workbooks.com/case-studies");
}
</script>
Well, I'll advise you to read this Stackoverflow answer, which is, in a way, quite similar to yours (the purpose anyway) :
Javascript disable switches current tab functionality in browser
JS/JQuery is indeed very powerful but also have its limits. Imagine a web page always requesting and keeping focus once you've opened it. I think you would be really annoyed, among other things.
That's why browsers prevent those kind of actions. Common browsers at least. Meaning, there's no way to prevent a browser like Firefox, Chrome, IE & Co. to focus a table since it depend of user's parameters.
You'll have to find a way to workaround your problem. I can propose this answer since it seems to have worked for the other guy.
Is there any DOM event for when the browser tab loses/gains focus? I know there are the blur and focus events on window, but they also fire when the browser window as a whole loses focus. The browser might then be still visible to the user. Of course such an event would be browser specific, but that's ok.
The reason why I want this is because I run animations that might consume quite some CPU time. When the browser tab is not visible there is no reason to continue animating. Now I know that modern browsers reduce the timer resolution of background tabs, but I could actually pause the animation, so that no CPU time whatsoever is consumed.
In case you are wondering, this is what I'm writing:
http://panzi.github.com/Browser-Ponies/
At least Google Chrome supports a webkitvisibilitychange event and a document.webkitHidden property. See the visibility API. But it seems only to fire when the shown tab changes, not when the whole window is minimized. There also seems to be a visibilitychange event for Internet Explorer, but the documentation doesn't say anything about it.
The closest thing I believe you'll find is the top answer here:
Is there a way track the focus on tab with Javascript?
Now they have exactly what was needed:
https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
Currently I am developing a web application for which I am using a pre-loader icon. What I want is that the pre-loader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:
window.onbeforeunload = function() { $("applicationdisabler").show(); };
For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.
The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.
Of course I have been looking for some workarounds already. The following code shows the alert in IE7, but the div still doesn't become visible.
window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };
The code of my div:
<div id="applicationdisabler"><img src="images/preloader.gif" /></div>
Hopefully someone can help me out.
You need to put the # before the id on the jQuery selector:
$("#applicationdisabler").show();
Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.
Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.
As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.
That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.
Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.
So either:
Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
Use the onLoad event of the next page to show the preloader image instead
Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.
Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.
I've written a bookmarklet to look a word up in a Chinese dictionary:
javascript:Qr=document.getSelection();if(!Qr){void(Qr=prompt('%E8%AF%8D%E8%AF%AD',''))};if(Qr)(function(){window.open('http://nciku.com/search/all/'+Qr);})();
This opens a new tab with search results for your selected word or a word you type in at the prompt. Is there a way to load the new tab in the background? I'd like to keep the focus on the page I'm looking at, and look at the search results later.
There is an option "When I open a link in a new tab, switch to it immediately" in Firefox, this doesn't help.
Edit: Note that this is for my use, so an answer that tells me how to change Firefox (3.0.11) settings to do this would work as well. Also I've tried the following modification, but it's still focusing the new tab.
javascript:Qr=document.getSelection();if(!Qr){void(Qr=prompt('%E8%AF%8D%E8%AF%AD',''))};if(Qr)(function(){var%20oldWin=this;window.open('http://nciku.com/search/all/'+Qr);oldWin.focus()})();
Edit 2:
Looking around to see if I can find an answer I see this guy who's got the opposite problem (new tabs don't get focus, but he wants them to have it), but with no resolution:
Possible to set tab focus in IE7 from JavaScript
There's apparently talk about a _tab target in HTML 5, but that doesn't help me much.
http:/ /forums.whatwg.org/viewtopic.php?t=185&highlight=tab+focus
(apparently as a new user I can only post one link, so I've mauled it)
This seems pretty broken browser behaviour if this is impossible.
In FireFox type about:config and change browser.tabs.loadDivertedInBackground to true.
This has worked for me with browser bookmarklets.
source: http://lifehacker.com/263940/force-links-to-open-in-the-background
No, not programmatically through JavaScript. You don't have control over the user's browser preferences, only they have control over that.
Moreover, even if you did have control over that, you shouldn't do it, because it undermines the control that your script is given to you by the browser. If the user wants a page to open in the background, they should be able to control it, not you, as the developer.
Apparently this is only possible with previously opened windows, not the root window.
Calls to window.open with the same
window name as an already existing
window, loads the URL into that window
and gives a reference to the window
back. The window isn't given focus,
its opener property isn't changed, and
a third argument to window.open is
ignored. You can use the focus method
to give the window focus manually.
var oldWin = window.open("url.html","oldName");
oldWin.focus(); // give focus
Facing the same issue, I only noticed that if you alert() something just after opening the window, Firefox would not switch to the newly opening tab.