jQuery Follow Focus Demo

jQuery FollowFocus plugin

author: jvoogt, pjones

description: Creates a focus rectangle by tweening four corners to the focused element.

Recommend use of jQuery Easing plugin by George McGinley Smith

Usage:

Place the following code snippet in the <head/> of your html file:

<script type="text/javascript">
/* <![CDATA[ */
window.followFocusSettings = {
	duration: 250
};
/* ]]>*/
</script>
<script type="text/javascript" src="jquery-followFocus.js">
</script>

Note: If jQuery isn't already loaded, this plugin will try to load jQuery using document.write

Settings:

focusables

selector for elements to follow focus for -- default: "a,input,textarea,button,select"

cornerspace

spacing around element for corners to appear -- default: 2

widthpercent

value from 0 to 1 indicating the percent to auto-stretch width of corner (0 leaves width to css) -- default: .3

heightpercent

value from 0 to 1 indicating the percent to auto-stretch height of corner (0 leaves width to css) -- default: 0

duration

duration of tween between focusable elements (milliseconds) -- default: 300

duration_def

fduration of tween from default location (milliseconds) -- default: 500

easing

string indicating the kind of easing to use for moving the four corners of the rectangle when changing focus (will be used in jQuery's animate function) -- default: 'easeInOutBack' if exists, otherwise 'swing'

easing_def

string indicating the kind of easing to use for moving the four corners of the rectangle from the default location (will be used in jQuery's animate function) -- default: 'jswing' if exists, otherwise 'swing'

opacity

value from 0 to 1 indicating the transparency of each of the four corners when they have faded all the way in -- default: 1

fadeOutTimeout

Number of milliseconds to wait with fading out, which occurs when no focusable elements are in focus -- default: 500

fadeOutDuration

Number of milliseconds for the fade out animation, which occurs when no focusable elements are in focus, after the fadeOutTimeout -- default: 500

offset_tlx

integer indicating the horizontal offset for top left corner -- default: -3

offset_tly

integer indicating the vertical offset for top left corner -- default: -3

offset_trx

integer indicating the horizontal offset for top right corner -- default: 1

offset_try

integer indicating the vertical offset for top right corner -- default: -3

offset_blx

integer indicating the horizontal offset for bottom left corner -- default: -3

offset_bly

integer indicating the vertical offset for bottom left corner -- default: 2

offset_brx

integer indicating the horizontal offset for bottom right corner -- default: 1

offset_bry

integer indicating the vertical offset for bottom right corner -- default: 2