leandromoreira/focusable

Set a spotlight focus on DOM element adding a overlay layer to the rest of the page

Focusable

An awesome and lightweight library for performing spotlight in your DOM elements, setting an animated overlay to the rest of the page.

Showcase

API

Set spotlight (jQuery style)

$('#my-element').setFocus(options);

Set spotlight (through library)

Focusable.setFocus($('#my-element'), options);

Refresh current focused element

Focusable.refresh();

Hide spotlight

Focusable.hide();

Options

Property	Value	Description
fadeDuration	Number	Duration of the overlay transition (milliseconds).
hideOnClick	Boolean	Hides the overlay when the user click into it.
hideOnESC	Boolean	Hides the overlay when the user press Esc.
findOnResize	Boolean	Refind the element in the DOM in case that the element don't still exists.

Dependencies

• jQuery

TODO

• Add hightlight option
• Add comments to code
• Remove jQuery dependency
• Support multiple elements at same time