focusable Alternatives - JavaScript Tours And Guides

Popularity

3.0

Growing

Activity

0.0

Stable

Stars 1,074

Watchers 27

Forks 56

Last Commit about 4 years ago

Code Quality Rank: L2

Monthly Downloads: 0

Programming language: JavaScript

Tags: Tours And Guides HTML focusable accessibility focus

Latest version: v1.0.0

focusable alternatives and similar libraries

Based on the "Tours And Guides" category

intro.js

9.2 0.3 L2 focusable VS intro.js

A better way for new feature introduction and step-by-step users guide for your website and project.
driver.js

8.0 3.9 focusable VS driver.js

Powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page
shepherd

7.2 9.4 focusable VS shepherd

Guide your users through a tour of your app.
bootstrap-tour

6.5 0.0 focusable VS bootstrap-tour

Quick and easy product tours with Twitter Bootstrap Popovers.
chardin.js

6.4 6.9 focusable VS chardin.js

Simple overlay instructions for your apps.
hopscotch

6.3 1.0 L5 focusable VS hopscotch

A framework to make it easy for developers to add product tours to their pages.
joyride

4.0 0.0 L5 focusable VS joyride

jQuery feature tour plugin.
pageguide

3.2 0.0 focusable VS pageguide

An interactive guide for web page elements using jQuery and CSS3.
tourist

3.2 0.0 focusable VS tourist

Simple, flexible tours for your app.

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.

Do you think we are missing an alternative of focusable or a related project?

Add another 'Tours And Guides' Library

Popular Comparisons

README

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

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

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

npm install
grunt
See the result of testsuite in http://localhost:9092

Dependencies

jQuery

Contributing

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

Author

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

focusable

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