Skip to content
🔦 Set a spotlight focus on DOM element adding a overlay layer to the rest of the page
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
app Update dist Mar 2, 2016
sample_app fix(audrey): image was not available anymore Jan 8, 2016
showcase Improve showcase Nov 22, 2014
test feat(circleFocus): ability to have the focus in the shape of a circle Jan 8, 2016
.gitignore Don't wrapp columns into wrapper without pointer events Dec 23, 2014
.travis.yml Improve tests Dec 21, 2014
LICENCE Add mit licence Dec 14, 2014 Fix readme Mar 3, 2016
bower.json Rename bower package Mar 3, 2016
package.json Fix license Mar 2, 2016
relaser.json Fix registration Mar 2, 2016

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.



$ npm i focusable-element --save

$ bower i focusable-element


Set spotlight (jQuery style)
Set spotlight (through library)
Focusable.setFocus($('#my-element'), options);
Refresh current focused element
Hide spotlight
Get focused element
Get options
Property Value Default Description
fadeDuration Number 700 Duration of the overlay transition (milliseconds).
hideOnClick Boolean false Hides the overlay when the user click into it.
hideOnESC Boolean false Hides the overlay when the user press Esc.
findOnResize Boolean false Refind the element in the DOM in case that the element don't still exists.
circle Boolean false Have the spotlight in a circle shape
Runing tests
  • jQuery
  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

You can follow me on Twitter -

You can’t perform that action at this time.