I came across a very strange behaviour on Chrome which seems like a bug to me: when you click a link, the link does not receive the focus. Worse, the body takes the focus instead.
This behaviour can be observed here: http://jsfiddle.net/YfbR7/4/ (see code sample here)
Is this a bug? Is this standard behaviour? Is there any workaround to make the links receive the focus on mouse down, like on the other browsers?
Add tab index to anchor tag it should work, it's not a bug its a web kit thingy.
Click me
In addition to the accepted answer:
Since setting tabindex to 1 would change the TAB behavior, I recommend setting it to -1 instead: it won't break the TAB navigation and will still enable it from being focused.
Example
By the way, here's a very nice article regarding these concerns.
Note: the same thing happened with me, but just on Safari: probably Chrome has already that issue fixed.
A link should always natively receive focus. If your link does not have a href attribute it won't (not sure the use case of a link without a href though!).
Related
When we click a link like A link, the current page will be redirected to the given URL. But we'll be led to a new tab if we cmd/ctrl+click it. I wonder that is there a browser interface(something like window.open()) in JS that can give the click event of a non-a tag the same behavior above? The solution I got from the Internet is all about detecting e.metaKey/ctrlKey to decide whether to add _blank to the window.open() or not. The solution is tricky and still has some differences from the expected behavior. Maybe we can just simply use the <a> tag directly to avoid this. But can this be the solution for all situations? And could you guys please give me the reason if there's indeed not a pure JS way to simulate the event? Cuz it's weird to me.
When an <a> element is clicked on, normally it changes it's color or something to indicate it has been clicked. I just noticed that in iPhone's Safari, the CSS attribute change of a link upon click doesn't take place and the page just seems to not be responding, then it redirects to the link's URL properly, but the user will think that the link is broken because of this. Has anyone seen this problem? Have you been able to workaround it?
I have compared my website to others and it's kind of common. I have also tried a couple of things with javascript, but seems that the CSS changes are ignored and the link redirects before changing the CSS in the link. This doesn't happen on other browsers like Chrome in Android. Any help will be appreciated.
The following I tested on the latest versions of Chrome and Firefox, and IE11, and the results were the same.
If you do a Google search and then mouse over a link on the search results page, the link shown in the bottom-left corner of the browser window is not the same as the actual href of the a element.
In all three browsers I tested this on, if you inspect the link in the element inspector though, you can easily see the real link (which is to www.google.com), and while the inspector is open, if you mouse over the link again, then you'll see the real URL link in the bottom-left corner of the browser window.
I have two questions regarding this behavior?
While perhaps a bit naive to ask, why does Google do this?
How does Google do this? Because I saw this behavior in Chrome, Firefox and IE11, I'm thinking that this is some JavaScript-controlled behavior (as opposed to some browser-controlled behavior), but I've never heard of this being possible in JavaScript. If it is possible in JavaScript, how do you do it?
Thank you.
Look at the initial markup:
<a onmousedown="return rwt(this,'','','','3','AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw','35cXyZwuoZY8hBY1VfDr8Q','0CEAQFjAC','','',event)"
href="http://en.wikipedia.org/wiki/How_Do_You_Do_It%3F">
<em>How Do You Do It</em>? - Wikipedia, the free encyclopedia
</a>
Initially the href attribute shows the "real" URL. But when you click on the link, the rwt function changes the attribute value to
http://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&ved=0CEAQFjAC&url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHow_Do_You_Do_It%253F&ei=8nSMUqXtLKfe4QSzwIDADQ&usg=AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw&sig2=35cXyZwuoZY8hBY1VfDr8Q&bvm=bv.56643336,d.bGE
To answer your question: they use the onmousedown attribute to change the link's href attribute when you click on it. Barmar points out why they do it.
The link in the results page points to a redirect page on the Google server. They do this so they can track which links people click on. This is more reliable than using Javascript, since it doesn't require users to have Javascript enabled.
You can see the eventual target of the link in the url parameter of the URL.
When the user clicks the href,
the onmousedown event handler gets executed
before the default behaviour kicks in.
This time frame is used to change the href of the anchor tag.
Check out this simplified version of their code:
<a
href="https://www.google.com/"
data-href='https://www.yahoo.com/'
onmousedown="this.href = this.dataset.href"
>Link</a>
I have the following code, it fades elements in and out in a repeating cycle. When the tab is inactive the text within the divs piles up on top of each other for a split second before being cleared when the tab is activated again. Is there a way to stop this animation when the window blurs and start it again on focus?
(cycle = function () {
setTimeout(function(){$('#right').fadeOut(1000)},10000);
setTimeout(function(){$('right').fadeIn(1000)}, 11000);
setTimeout(function(){$('#left').fadeOut(1000)},13000);
setTimeout(function(){$('#left').fadeIn(1000)},14000);
setTimeout(function(){$('#left').fadeOut(1000)},15000);
setTimeout(function(){$('#left').fadeIn(1000)},17000);
})();
I gave a suggestion in a comment, but then remembered that that solution is not necessarily cross-browser compatible, as I had come across it before, thus the creation of my plugin.
Suffice it to say, $(window).blur() and focus do not always work as expected on all browsers. I don't remember the exact list of problems I ran into, but I know some were things like; clicking on another tab (in FF, i think) did not trigger the blur, clicking on another program would trigger the blur despite the fact my main browser window was still open and that tab had focus, it ddnt have Windows Focus, etc...
The following plugin I created might be helpful in that I've filed it down to work in "most" browsers and versions (not tested on all versions) and it functions exactly as we expect where I work. It only goes blur if the exact browser window's tab loses focus to another tab of the same browser. And of course vice versa with focus.
See jsFiddle Example usage and unminified code
Minified Plugin:
Simply Add to a js file to be called after jquery or place at top of your code
(function(jQuery){jQuery.winFocus||(jQuery.extend({winFocus:function(b){function c(a){a=a||window.event;a.hidden=a.type in{focus:"visible",focusin:"visible",pageshow:"visible",blur:"hidden",focusout:"hidden",pagehide:"hidden"}?"focusout"===a.type:this[d];jQuery(window).data("visible",!a.hidden);jQuery.winFocus.methods.exeCB(a)}var d="hidden";d in document?document.addEventListener("visibilitychange",c):(d="mozHidden")in document?document.addEventListener("mozvisibilitychange",c):(d="webkitHidden")in document?
document.addEventListener("webkitvisibilitychange",c):(d="msHidden")in document?document.addEventListener("msvisibilitychange",c):"onfocusin"in document?document.onfocusin=document.onfocusout=c:window.onpageshow=window.onpagehide=window.onfocus=window.onblur=c;for(x in arguments)"object"==typeof arguments[x]?(arguments[x].blur&&(jQuery.winFocus.methods.blur=arguments[x].blur),arguments[x].focus&&(jQuery.winFocus.methods.focus=arguments[x].focus),arguments[x].blurFocus&&(jQuery.winFocus.methods.blurFocus=
arguments[x].focus)):"function"==typeof arguments[x]&&(void 0===jQuery.winFocus.methods.blurFocus?jQuery.winFocus.methods.blurFocus=arguments[x]:(jQuery.winFocus.methods.blur=jQuery.winFocus.methods.blurFocus,jQuery.winFocus.methods.blurFocus=void 0,jQuery.winFocus.methods.focus=arguments[x]))}}),jQuery.winFocus.methods={blurFocus:void 0,blur:void 0,focus:void 0,exeCB:function(b){jQuery.winFocus.methods.blurFocus?jQuery.winFocus.methods.blurFocus(b,!b.hidden):b.hidden?jQuery.winFocus.methods.blur&&
jQuery.winFocus.methods.blur(b):jQuery.winFocus.methods.focus&&jQuery.winFocus.methods.focus(b)}})})(jQuery);
Also: #line-o 's referenced SO Question is where I was first inspired to write this plugin and I also have this plugin answer posted there. lol
Take a look at the Visibility API for current browser. You'll still need a fallback for older ones (namely IEs).
Or you might find a solution here:
Is there a way to detect if a browser window is not currently active?
I'm using this code to change the status bar of IE.
Google
But the problem is when i'm using a menu (links inside a div) it doesn't change anymore the status bar. Is there any way to fix it?
Most modern browsers allow the user to decide, if she wants the status bar being overwritable. If it is disabled (which is, I assume, the default in many browsers), you have no way to bypass this (other than finding a zero day exploit).
Here's an awesome solution
<a href="//./ Woo status bar" onclick="this.href='http://google.com'">
No, but really though - this practice this a little outdated. Users expect to be able to see the URL of the link they're about to click to ensure it is legit. If you want to give people more information about a link, encode it either in the paragraph (eg: "take a look at this big search engine or this up-and-coming one"), or use the title attribute on the link. The text you enter there will appear in a tooltip if the user hovers on the link.
onmouseover="window.status='Google';
works only for IE. It doesn't seem to work for FF. What browser are you testing it?
I suspect, this works in only IE but it won't work for other browsers.
Link 4
This worked for me on Chrome/IE(7/8)/FF.