Real Time Hints & Progress For Forms - jQuery Progression

Progression is an useful and user-friendly jQuery plugin that gives users real time hints & progress updates as they complete forms.

How to use it:

1. Include jQuery library and jQuery Progression in the header section of the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="progression.min.js"></script>

2. Include required jQuery Progression CSS to style the plugin

<link href="progression.min.css" rel="stylesheet" type="text/css">

3. Create the html

<form id="myform">
<p>
<label for="">Click on a field</label>
<input  data-progression type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="">
</p>
<p>
<label for="">Helps provide a better user experience</label>
<input data-progression type="text" data-helper="Tracks users progress when filling in forms" name="email" value="" placeholder="">
</p>
<p class="left">
<label for="">Another Field</label>
<input data-progression type="text" data-helper="The tooltip is fully customisable" name="mytel" value="" placeholder="">
</p>
<p class="right">
<label for="">Another Field</label>
<input data-progression type="text" data-helper="And can be positioned left or right" name="mytel" value="" placeholder="">
</p>
<p>
<label for="">Telephone Number</label>
<textarea data-progression name="" data-helper="Either the helper text or progress bar can be turned off"></textarea>
</p>
<p>
<input type="submit" class="button" name="" value="Lets Go!" placeholder="">
</p>
</form>

4. Call the plugin with options

$("#myform").progression({
  tooltipWidth: '200', // The width in pixels that you would like the tooltip to be
  tooltipPosition: 'right', // Whether the tooltip should sit to the left or right of the form
  tooltipOffset: '50', // The width in pixels that you would like the offset of the tooltip to be
  showProgressBar: true, // Whether the progress bar should be displayed or not
  showHelper: true, // Whether the helper text should be shown or not
  tooltipFontSize: '14', // Set the font size of the helper text in pixels
  tooltipFontColor: 'fff', // The hash color reference of the helper text
  progressBarBackground: 'fff', // The hash color reference of the progress bar background
  progressBarColor: '6EA5E1', // The hash color reference of the progress bar
  tooltipBackgroundColor: 'a2cbfa', // The hash color reference of the progress bar
  tooltipPadding: '10', // The padding for the tooltip in pixels
  tooltipAnimate: true, // Whether to animate the tooltip or not
  validator: false, // enable form validator
});	

Change log:

2017-08-01

• replace .parent().parent() with closest('form')

---

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