Skip to content

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

Notifications You must be signed in to change notification settings

leandromoreira/focusable

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%