jQuery Plugin To Highlight Important Sections In Sequence - highlight-window

highlight-window is a tiny, simple-to-use jQuery plugin that helps you create a fullscreen overlay to highlight important sections of the html document in sequence. Great for site tour that lets your users learn about new features and functions.

How to use it:

1. To use this plugin, you first need to load the latest version of jQuery library in the document.

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

2. Then include the JavaScript file highlight-window.js after jQuery.

<script src="highlight-window.js"></script>

3. Initialize the plugin and highlight the first element as this:

$.highlightWindow('init').moveTo('#one');

4. Highlight the other elements one by one:

window.setTimeout(function(){
  $.highlightWindow('moveTo','#two');
  window.setTimeout(function(){
      $.highlightWindow('moveTo','#three');
      window.setTimeout(function(){
          $.highlightWindow('moveTo','#four');
          window.setTimeout(function(){
              $.highlightWindow('hide');
          },1000);
      },1000);
  },1000);
},1000);

5. Style the highlight overlay in the CSS. Override or modify the CSS snippets as shown below and then insert them into your webpage. You can also include the style sheet highlight-window.css directly in the header of the document.

#highlight-window {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 110%;
  height: 110%;
  z-index: 2000000;
  border: 10000px solid rgba(0, 0, 0, 0.6);
  margin-left: -10000px;
  margin-top: -10000px;
  box-shadow: inset 0 0 0 4px #038BCF, inset 0 0 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  -webkit-border-radius: 10010px;
  -moz-border-radius: 10010px;
  border-radius: 10010px;
  transition: all .6s ease .3s, border-radius .3s ease;
  -webkit-transition: all .6s ease .3s, border-radius .3s ease;
  -moz-transition: all .6s ease .3s, border-radius .3s ease;
  -ms-transition: all .6s ease .3s, border-radius .3s ease;
  -o-transition: all .6s ease .3s, border-radius .3s ease;
  display: none;
}

.highlight-window-content {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
}

---

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