TIP: Try navigating through list using left & right arrow keys
f

focusable

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

1075
Github issues
7
Github stars
5 days ago
Github last update date
394
NPM current week downloads

Focusable Build Status Awesome

Gitter 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

Installation

$ npm i focusable-element --save

$ bower i focusable-element

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();
Get focused element
Focusable.getActiveElement();
Get options
Focusable.getOptions();
Options
PropertyValueDefaultDescription
fadeDurationNumber700Duration of the overlay transition (milliseconds).
hideOnClickBooleanfalseHides the overlay when the user click into it.
hideOnESCBooleanfalseHides the overlay when the user press Esc.
findOnResizeBooleanfalseRefind the element in the DOM in case that the element don't still exists.
circleBooleanfalseHave the spotlight in a circle shape
Runing tests
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
Author

You can follow me on Twitter - https://twitter.com/zzarcon

Buy us a coffeeBuy us a coffee