FaT implementation

How do I use it in a web page?

Start by including the FaT JavaScript file:

<script type="text/javascript" src="js/jas.js"></script>

Default FaT elements

The default FaT elements are elements that will have events applied to them as soon as the web pages has loaded, and for this to happen you need to give them the fat class. Two event types are available per default: mouseover and click. This can be set in the defaultEvent parameter.

FaT behavior for specific elements

You can also choose to set focus to an element that isn't initially a FaT element. When setting focus to this element it will momentarily get the FaT class and any custom class you might want to apply to it, and it will be removed when the element loses focus. It can be triggered through the FaT.setFocusToElm method.

Focus types

Focus options are to use an overlay that dims the entire background/everything but your chosen element, or you you can just set focus to a specific element. The default behavior for FaT elements are to use the overlay presentation and to apply a certain class to the FaT element that has focus (which class can be set in the defaultFocusClass parameter).

To have element-specific looks, you can apply the fat-custom-yourClassNameHere and replace the text "yourClassNameHere" with the element specific class you want to use for the element in question. I.e. a FaT element with the class fat-custom-important-focus will apply a class named important-focus to the element while it has focus.

If you want to set focus to just a FaT element itself instead of using the default overlay, make sure to apply the classes fat-only-this and fat-custom-yourClassNameHere to give it its own original appearance.

To make an element gain focus several times, give it a class like this: fat-multiple-numberOfTimes, where you replace "numberOfTimes" with the consecutive number of times you want the element to get focus in the same instance. E.g. the class fat-multiple-3 will make the element receive focus three times in a row.

Methods to call

Here are the methods to call if you want to set focus to an element that isn't initially a FaT element:

If you want to set focus to an element using the overlay, call the FaT.setFocus method. To set focus to the element itself, use the FaT.setFocusToElm method.

Parameters for both methods are:

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.

Settings and parameters

overlayId : "fat-dim-overlay"
The id of the overlay element.
clickOverlayToClearFocus : true
If you want a set focus to be cleared when the overlay element is clicked.
clickDocumentToClearFocus : false
If you want a set focus to be cleared when the document element is clicked. If you set this to true, make sure to remember to add this code for any link in the page that sets focus (otherwise it will be immediately cleared). Set oEvent as the first parameter of the function: 

var oEvent = (typeof oEvent != "undefined")? oEvent : event;
event.cancelBubble = true; 
if(oEvent.stopPropagation){
	oEvent.stopPropagation();
}
useClearFocusHelpText : "true"
If a help text should be shown as a tooltip when an overlay is shown and the focus isn't cleared.
clearFocusHelpText : "Press Esc to clear focus"
The help text to show as a tooltip when an overlay is shown and the focus isn't cleared.
defaultEvent : "mouseover"
The default event for FaT elements that will set focus to them when triggered. Available events are "mouseover" and "click".
defaultFocusClass : "fat-focused-elm"
The CSS class that will be applied to any element that gains focus.
originalFadeLevel : 0.5
The original fade level used for the overlay element when fading in and out (Note that 1 means totally opaque).
elmOriginalFadeLevel : 1
The fade level used for any specific element when fading in or out (Note that 1 means totally opaque).
fadeIncrement : 0.1
The fade increment, i.e. how big each fade step is.
timeForFadeIncrement : 200
The time between each fade increment when fading the overlay in or out.
timeForElmFadeIncrement : 50
The time between each fade increment when fading a specific element in or out.
timeBeforeFocus : 500
Time before focus is set to a FaT element when its defaultEvent is triggered.