Author: | 720kb |
---|---|
Views Total: | 985 views |
Official Page: | Go to website |
Last Update: | June 13, 2016 |
License: | MIT |
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'); });