Implement setFocus() on Elements with MooTools
Every DOM node provides a focus method but most nodes have a tabIndex of -1 which prevents the element from being focused on when clicked, tabbed, focused via JavaScript. I've been tinkering around with ways to make focusing on any element effortless with varying results. I tried monkey-patching the prototype which worked well in Safari and Chrome but nowhere else. I tried doing a tabIndex check but IE complained. In the end I came up with more of a shortcut method than anything else.
The MooTools JavaScript
This method can be used by any node but it could cause issues with resetting an explicitly set tabIndex.
Element.implement({
setFocus: function(index) {
this.setAttribute('tabIndex',index || 0);
this.focus();
}
});
Using this method is simple:
$('myDiv').setFocus();
There you have it. Depending on the node, the element may have a dotted outline as you would expect. Otherwise you can add onFocus and onBlur events to your DIVs, SPANs, and other nodes.
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![MooTools TextOverlap Plugin]()
Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...
![Custom Scrollbars in WebKit]()
Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone. One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...
Simple, yet effective, I like it!
Very cool! I was just asking myself how elements are focused in JS while working on my ARAI Class.
I think this should be part of more. It’s simple and can be very useful for many scenarios.
What does this part means?
...abIndex',index || 0);
What is the “index” there means?
The desired tabIndex value.
Hi every body, nice technic but in my case Firefox send back :
ReferenceError: setFocus is not definedwhile in chrome work fine!
https://gist.github.com/irwinv/5520695
Thanks worked for me..