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 id of 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!

14 Comments

  • 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!

  • Kalle says:

    This is really neat! Looks like it's easy to implement as well!

  • Robert Nyman says:

    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.

  • Robert Nyman says:

    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>.

    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.

    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 πŸ™‚

  • Robert Nyman says:

    Shani,

    Enjoy! πŸ™‚

  • Stefan Van Reeth says:

    Spot on Robert!!

    Off-topic: for a guy who isn't that carried away by libraries, you chunk them out quite often lol πŸ˜‰

  • vicky says:

    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?

  • Robert Nyman says:

    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

  • Robert Nyman says:

    Christian,

    Not sure exactly what you want to do. But in general, it works for one element.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.