/focusable

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

Primary LanguageJavaScriptMIT LicenseMIT

Focusable

An awesome and lightweight library for performing spotlight in your DOM elements, setting an animated overlay to the rest of the page. You can find a live demo here

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

Contributing

  1. Check open issues
  2. Fork it
  3. Create your feature branch (git checkout -b my-new-feature)
  4. Commit your changes (git commit -am 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request