Updated September 29th 2006
I’ve done a very minor change to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.
When I added the lightbox-like feature to JaS I was talking to my friend Teddy Zetterlund explaining how it worked. His response was:
I know a lot of situations that this could be useful in then.
I agreed with him and have now created the mother of all focusing scripts: FaT – Focus At This!
Examples of usage
Basically, the effects can be for setting exclusive focus to something, or to be used as an advanced version of CSS
:hover but with the optional support for fading and blinking as well.
- As a tutorial for different parts of a complex web page/site, highlighting them.
- Momentarily flash a certain element, one or several times, to get the end user’s attention.
- Set focus to invalid input when validating a form.
- As a helpful companion setting extra focus to important parts of the web page; for example, with a “Click here to log in” to set focus to and emphasize the log in form.
- Use it for client-side wizards focusing on each step accordingly.
- Use it for more powerful interaction effects; highlighting, for instance, items in a navigation menu when hovering them with the mouse pointer.
If you have any other ideas for usage you’d like to share, please write a comment.
How to implement it
Then one way is to simply apply the
fat class to your desired elements and then decide what the default event for triggering the focus should be:
click. You can choose if you want to have the default focus look or an element-specific focus look by applying a
fat-custom-yourClassNameHere to it.
The other way, which is used to setting focus to any element in the web page that isn’t a Fat element, is to call the
FaT.setFocus() to use the overlay focus type and
FaT.setFocusToElm() to set focus to the specific element. Both methods support four fairly self-explanatory parameters to choose how the focus should occur.
FaT.setFocus(idOfElementToSetFocusTo, fadeIn, fadeOut, clearFocus) FaT.setFocusToElm(idOfElementToSetFocusTo, fadeIn, fadeOut, clearFocus)
idof the element to set focus to.
- If the focus should fade in.
- If there should be a fade out after the element has gotten focus.
- If you don’t use fadeOut but want to clear the focus after it is done.
A more detailed explanation and also descriptions of the available settings can be found in FaT implementation.
Anyway, it took some time to write this crap so I hope you enjoy it!
Stop reading now and go and try out the demo!