JavaScript Library To Highlight / Navigate Through DOM Elements – highlighter.js

Category: Javascript , Recommended | August 3, 2015
Author: 720kb
Views Total: 2,324
Official Page: Go to website
Last Update: August 3, 2015
License: MIT

Preview:

JavaScript Library To Highlight / Navigate Through DOM Elements – highlighter.js

Description:

highlighter.js is a small JavaScript library used to highlight, navigate through DOM elements of your document just like a site tour.

Basic usage:

Load the core JavaScript highlighter.js in your document.

<script src="highlighter.min.js"></script>

Create a new highlighter instance.

var Highlighter = new window.Highlighter();

Options.

var Highlighter = new window.Highlighter({
  
  // Automatically scroll to the underlined element
  'scroll':true, 

  // Scrolling speed
  'scrollDuration': 500 

});

API.

// Select next element starting from the current selected element (by default is the first DOM element)
Highlighter.next();

// Select previous element starting from the current selected element ( by default is the first DOM element)
Highlighter.previous();

// Skip a bunch of next elements starting from the current selected element

Highlighter.skipNext(50);

// Skip a bunch of previous elements starting from the current selected element
Highlighter.skipPrev(35);

// Highlight the current selected element
Highlighter.underline();

// Remove highlighting from the current selected element
Highlighter.erase();

// Select next element (by ID) starting from the current selected element (by default is the first DOM element)
Highlighter.next('#test');

// Select next element (by class/classes) starting from the current selected element (by default is the first DOM element)
Highlighter.next('.class .class-2');

// Select next element (by < tag > name) starting from the current selected element (by default is the first DOM element)
Highlighter.next('<span>');

// Select previous element (by ID) starting from the current selected element (by default is the first DOM element)
Highlighter.previous('#test');

// Select previous element (by class/classes) starting from the current selected element (by default is the first DOM element)
Highlighter.previous('.class .class-2');

// Select previous element (by < tag > name) starting from the current selected element (by default is the first DOM element)
Highlighter.previous('<span>');

// Select first element in the DOM by ID
Highlighter.select('#id');

// Select first element in the DOM by class or classes
Highlighter.select('.class .class2');

// Select first element in the DOM by < tag > name
Highlighter.select('<span>');

Events listener.

window.addEventListener('Highlighter:selected', function (evt) {
 console.log('This element has been selected', evt.eventData);
});

window.addEventListener('Highlighter:underlined', function (evt) {
 console.log('This element has been underlined', evt.eventData);
});

window.addEventListener('Highlighter:erased', function (evt) {
 console.log('This element has been erased', evt.eventData);
});

window.addEventListener('Highlighter:skipped', function () {
 console.log('Elements were skipped');
});

window.addEventListener('Highlighter:scrolled', function (evt) {
 console.log('Scrolled to this element', evt.eventData);
});

window.addEventListener('Highlighter:restart', function () {
 console.log('Highlighter restarted from the first DOM element');
});

You Might Be Interested In:


Leave a Reply