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

Preview:

Description:

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

How to use it:

1. Load the core JavaScript highlighter.js in your document.

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

2. Create a new highlighter instance.

var Highlighter = new window.Highlighter();

3. Available options.

var Highlighter = new window.Highlighter({
  
  // Automatically scroll to the underlined element
  'scroll':true, 
  // Scrolling speed
  'scrollDuration': 500 
});

4. API methods.

// 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>');

5. Events listeners.

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');
});