jQuery Plugin To Set Focus On Any DOM Element - Focusable

focusable is a lightweight jQuery plugin which allows you to set a spotlight focus on a specified DOM element while adding an animated overlay covering the rest.

See also:

• jQuery Plugin To Create Canvas Based Animated Spotlight Effects

How to use it:

1. Load jQuery library and the jQuery focusable.js script into the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="app/focus-element-overlay.js"></script> 

2. Create a toggle element with the Html5 data-selector attribute specifying the jQuery selector of the elements you want to set a focus on.

<span class="toggle-button" data-selector="h1">Focus H1</span>

3. The JavaScript to set a spotlight focus on your H1 element.

(function() {
$(document).ready(init);

function init() {
$('.show-link').on('click', show);

function show() {
var selector = $(this).attr('data-selector');
var options = {

  // fade animation duration
  fadeDuration: 700,

  // Hides the overlay when the user click into it.
  hideOnClick: true,

  // Hides the overlay when the user press Esc.
  hideOnESC: true,

  // Refind the element in the DOM in case that the element don't still exists.
  findOnResize: true

};
Focusable.setFocus($(selector), options);
}

}
})();

4. Public methods.

// Set a focus on the element (jQuery)
$('#my-element').setFocus(options);

// Set a focus on the element
Focusable.setFocus($('#my-element'), options);

// Refresh current focused element
Focusable.refresh();

// Hide spotlight
Focusable.hide();

---

This awesome jQuery plugin is developed by zzarcon. For more Advanced Usages, please check the demo page or visit the official website.