FaT-Focus at This – advanced JavaScript focusing library
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! 🙂
FaT is a JavaScript library that you can customize and use for any kind of focus effect in your web pages; be it a flashing effect, fade in and/or fade out or set complete focus to an element and then escape it with a keyboard shortcut or click. It is all applied with unobtrusive JavaScript and the accessible fallback is using anchor links for setting focus to the current element. There are two different focus types: one is an overlay that dims the entire document but the focus element in question and the other sets focus just to the chosen element.
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
First, include the FaT JavaScript file:
<script type="text/javascript" src="js/jas.js"></script>
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: mouseover or 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)
- idOfElementToSetFocusTo
- The
idof the element to set focus to. - fadeIn
- If the focus should fade in.
- fadeOut
- If there should be a fade out after the element has gotten focus.
- clearFocus
- 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!
That's cool. Is there a way you could integrate some Asynchronous Streaming? I could really use some FaT-AsS.
Hehe, great timing – I've been working on my own kind the last 2 days 🙂 Looks good Robert so far. I'll have to take a close look over the weekend, perhaps there is some inspiration to get.
Have a nice weekend!
This is really neat! Looks like it's easy to implement as well!
Jonathan,
Let's hope it doesn't have to come to that! 🙂
Michael,
Enjoy!
Kalle,
I hope so; that's one of the main objectives for me when building things.
Wow, does a lot of things I've been putting off learning about, I'll definately be checking it out, thank you for sharing 🙂
It is an interesting concept, but I was mislead by the name. I thought the library would also shift the focus of the document to the element and back to the original one to help assistive technology.
As it stands, it is a nice plug-in, but normally you'd have that kind of functionality already in the application, as a fade should always be an indicator that something changed (easing the transition from completely reloading pages to partly changing pages for the visitor), happening at the end of other functionality.
I don't like the focus on the form field at all, as the constant change between dark and light hurts my eyes on this laptop.
Good job, but as a standalone library it is a bit over the top – unless you simply want to make it easier for others to integrate that effect into their app.
Steve,
Have fun! 🙂
Chris,
Thank you! It might be over the top, but that's me when I start doing things. 🙂
But the point you make is the same as my main idea for this: to function as an add-on to an existing web page or application, to make the interactivity clearer and more useful to the end user.
The form thing is definitely over the top, and should be changed to do the opposite: setting only focus to the <code>input</code> element. But that can easily be changed by just calling <code>FaT.setFocusToElm</code> instead of <code>FaT.setFocus</code>.
That might be an interesting option where to go with it if you want to build further functionality into it.
Awesome, Think i will use it sometime 🙂
Shani,
Enjoy! 🙂
Spot on Robert!!
Off-topic: for a guy who isn't that carried away by libraries, you chunk them out quite often lol 😉
Is it possible to do it the other way round? To have an element unfocused (white semi transparent overlay on it) and have it focused on mouse over?
vicky,
Absolutely, you can code and add the events and corresponding classes any way you want to.
Hi Robert, Nice to meet you. I am from Colombia and I am very happy whit this library, but I need to do light in much elements of the DOM, How I can do light in much elements into the DOM or into a div?
Thank you so much,
Christian
Christian,
Not sure exactly what you want to do. But in general, it works for one element.