This is the jQuery version of the Focus Overlay library. This branch is no longer maintained. Please use the latest at https://github.com/mmahandev/FocusOverlay
Plugin for creating overlays on focused elements. Inspired by NV's Flying Focus UI concept. It was built with accessibility in mind with trigger keys and ARIA roles. Demo
To install copy the files from the dist folder into your project:
<!-- In the <head> -->
<link rel="stylesheet" type="text/css" href="/dist/focusOverlay.min.css"/>
<!-- End of <body> -->
<script type="text/javascript" src="/dist/focusOverlay.min.js"></script>The CSS is small enough to copy directly from the src folder into your project's main CSS.
$(document).ready(function() {
$(".site-wrapper").focusOverlay(options);
});The above will append focusOverlay to the .site-wrapper element. The options is an optional parameter. See options for more info.
By default focusOverlay will show and animate when hitting keyboard keys such as the Tab key. It's also preconfigured to animate via CSS transitions.
The default options are:
{
id: "focus-overlay", // ID added to the focus box
activeClass: "focus-overlay-active", // Class added while the focus box is active
animatingClass: "focus-overlay-animating", // Class added while the focus box is animating
targetClass: "focus-overlay-target", // Class added to the target element
zIndex: 9001, // z-index of focus box
duration: 500, // Duration of the animatingClass (milliseconds)
inactiveAfterDuration: false, // Removes activeClass after duration
triggerKeys: [9, 36, 37, 38, 39, 40, 13, 32, 16, 17, 18, 27], // Tab, Arrow Keys, Enter, Space, Shift, Ctrl, Alt, ESC
inactiveOnNonTriggerKey: true, // Make focus box inactive when a non specified key is pressed
inactiveOnClick: true, // Make focus box inactive when a user clicks
alwaysActive: false, // Force the box to always stay active. Overrides everything
watchTransitionEnd: true // Reposition focus box on transitionEnd for focused elements (IE10+)
}Note that bindings need to be added before the plugin is called. An example:
// Overriding the focusOverlay target before the box moves
$(".site-wrapper").on("foBeforeMove", function(event, focusOverlay, $previousTarget, $currentTarget, $nextTarget) {
if ($nextTarget.is(".header-btn")) {
focusOverlay.$nextTarget = $(".header-btn.alt");
}
}).focusOverlay();| Event | Params | Description |
|---|---|---|
| foInit | event, focusOverlay | Fires after focusOverlay initializes |
| foBeforeMove | event, focusOverlay, $previousTarget, $currentTarget, $nextTarget | Fires before focusOverlay begins its duration timer |
| foAfterMove | event, focusOverlay, $previousTarget, $currentTarget | Fires after focusOverlay's duration timer is finished |
| foDestroyed | event, focusOverlay | Fires after focusOverlay is destroyed |
// Example use of the "moveFocusBox" method
$(".site-wrapper").focusOverlay("moveFocusBox", $("#element"));Arguments: none
Deconstructs the focusOverlay instance
Arguments: jQuery Selector
Moves the focusBox to a target element
In some cases you might want focusOverlay to ignore certain elements, or focus other elements instead. There are a few options available:
<div id="input-wrapper">
<input type="text" data-focus="#input-wrapper">
</div>In this example when the user focuses the input, focusOverlay will instead target the wrapper. The data-focus attribute accepts a jQuery selector string.
<label for="stylized-checkbox" class="rounded-checkbox">Click me</label>
<input id="stylized-checkbox" type="checkbox" class="visually-hidden" data-focus-label>In this example when the user focuses the input, focusOverlay will instead target its associated label.
<a href="/info.html" data-focus-ignore>Really important information here!</a>In this example focusOverlay will not target this element at all.
FocusOverlay works on IE9+ in addition to other modern browsers such as Chrome, Firefox, and Safari. See notes for exceptions.
jQuery 1.7
-
If you would like to fully support older browsers such as IE9-10 then
inactiveOnClickmust be set totrue. Since these older browsers do not support the CSSpointer-events: nonepeople would not be able to click elements under the focus box with it being always active. -
watchTransitionEndis disabled by default on browsers that doesn't support thetransitionEndevent (IE9).
- Examples page
- I would like to remove jQuery as a dependency entirely