jQuery Follow Focus Advanced Demo

See Simple Demo
Anchors Link 1 Link 2 Link 3 Link 4
Input fields
Select boxes

OVERVIEW

Creates a focus rectangle by tweening four corners to the focused element. (try tabbing)

WHAT'S NEW IN VERSION 0.2?

Made auto-load of jQuery work for IE

Download

DOCUMENTATION

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

Advanced Usage:

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

<script type="text/javascript">
/* <![CDATA[ */
var padding = 4;
window.followFocusSettings = {
	duration: 250,
	widthpercent: 0,
	offset_tlx : -(padding + 1),
	offset_tly : -(padding + 1),
	offset_trx : padding,
	offset_try : -(padding + 1),
	offset_blx : -(padding + 1),
	offset_bly : (padding + 1),
	offset_brx : padding,
	offset_bry : padding
}
/* ]]>*/
</script>
<script type="text/javascript" src="jquery-followFocus.js">
</script>

and add the following styles to your stylesheet:

#focus-rect-tl {
	position: absolute;
	display: block;
	background: transparent url('corner.png') no-repeat scroll top left; 
	min-width: 35px;
	min-height: 10px;
}
#focus-rect-tr {
	position: absolute;
	display: none;
	/*background: transparent url('corner.png') no-repeat scroll top right; */
	min-width: 35px;
	min-height: 10px;
}
#focus-rect-bl {
	position: absolute;
	display: block;
	/*background: transparent url('corner.png') no-repeat scroll bottom left; */
	min-width: 35px;
	min-height: 10px;
}
#focus-rect-br {
	position: absolute;
	display: block;
	background: transparent url('corner.png') no-repeat scroll bottom right; 
	min-width: 35px;
	min-height: 10px;
}

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