SVG Based Element Highlight Overlay Plugin With jQuery - Highlight.js

Highlight.js is a jQuery plugin which helps create SVG based highlight overlays on the webpage to bring your user's focus to specific DOM element(s). Also can be used as a site guide that displays multiple highlight overlays in sequence.

See also:

• jQuery Plugin To Focus/Highlight Any Elements - focusify

How to use it:

1. Put the latest version of jQuery library and jQuery highlight.js plugin in the html page.

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.highlight.js"></script>

2. The JavaScript to generate a SVG overlay on a specified DOM element.

$('.element').highlightOverlay();

3. The JavaScript to highlight multiple DOM elements in sequence.

var selectors = [
    'h1',
    'h2',
    'h3',
    'article'
  ];
var i = 0;
$(selectors[i++]).highlightOverlay();
var timer = setInterval(function() {
  if (i >= selectors.length) {
    clearInterval(timer);
    $.dismissHighlightOverlay();
    return;
  }
  $(selectors[i++]).highlightOverlay();
}, 1000);

4. Destroy the plugin and remove highlight overlay(s) from DOM.

$.destroyHighlightOverlay();

Change log:

2016-07-19

• Parameterise the svg path generation function

---

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