jQuery mini help system

A mini help system with jQuery, able to display help text or a guide to users of our web application and search the content.

Mini help system with jQuery

It’s a small widget, with content searchable in real time. All matching terms will be highlighted.

Usage

1. Include CSS:

<link rel="stylesheet" href="assets/css/styles.css" />

2. Include necessary JS libs:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="assets/js/highlight.jquery.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/script.js"></script>

3. Define the html content:

<div id="widget">
  <div id="header">
    <input type="text" id="search" placeholder="Search in the text">
  </div>

  <div id="content">
    <!-- Your help text goes here -->
  </div>
</div>

Sample view:

jQuery mini help system
jQuery mini help system

Demo:

http://demo.tutorialzine.com/2012/12/mini-help-system-jquery

Full tutorial with download:

http://tutorialzine.com/2012/12/mini-help-system-jquery

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1