Progression.js

A jQuery plugin that gives users real time hints & progress updates as they complete forms

Documentation

..:: Getting Started

Include the relevant files

Firstly include jQuery and the progression.css and progress.js files. Place these before </head> section

<link href='progression.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="progression.js"></script> 

Create a form

You must give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression.

The helper text for the tooltip can be set by adding data-helper to the element. This is demonstrated below

<form id="myform">     <p>         <label for="">Name</label>          <input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />     </p>   </form>    ##### Initiate the plugin 

Once you have created your form you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

$(document).ready(function ($) {          $("#myform").progression();      }); 

If you want to initiate the plugin with options then you can do so like:

$("#myform").progression({         tooltipWidth: '200',         tooltipPosition: 'right',         tooltipOffset: '50',         showProgressBar: true,         showHelper: true,         tooltipFontSize: '14',         tooltipFontColor: 'fff',         progressBarBackground: 'fff',         progressBarColor: '6EA5E1',         tooltipBackgroundColor: 'a2cbfa',         tooltipPadding: '10',         tooltipAnimate: true     });             

..:: Options

    <th>Default Value</th>      <th>Description</th>      <th>Valid Options</th>   </tr> </thead>  <tbody>   <tr>     <td>tooltipWidth</td>      <td>200</td>      <td>The width in pixels that you would like the tooltip to be</td>      <td></td>   </tr>    <tr>     <td>tooltipPosition</td>      <td>right</td>      <td>Whether the tooltip should sit to the left or right of the form</td>      <td>left/right</td>   </tr>    <tr>     <td>tooltipOffset</td>      <td>50</td>      <td>The width in pixels that you would like the offset of the tooltip to be</td>      <td></td>   </tr>    <tr>     <td>showProgressBar</td>      <td>true</td>      <td>Whether the progress bar should be displayed or not</td>      <td>true/false</td>   </tr>    <tr>     <td>showHelper</td>      <td>true</td>      <td>Whether the helper text should be shown or not</td>      <td>true/false</td>   </tr>    <tr>     <td>tooltipFontSize</td>      <td>14</td>      <td>Set the font size of the helper text in pixels</td>      <td></td>   </tr>    <tr>     <td>tooltipFontColor</td>      <td>ffffff</td>      <td>The hash color reference of the helper text</td>      <td></td>   </tr>    <tr>     <td>progressBarBackground</td>      <td>ffffff</td>      <td>The hash color reference of the progress bar background</td>      <td></td>   </tr>    <tr>     <td>progressBarColor</td>      <td>6EA5E1</td>      <td>The hash color reference of the progress bar</td>      <td></td>   </tr>    <tr>     <td>tooltipPadding</td>      <td>10</td>      <td>The padding for the tooltip in pixels</td>      <td></td>   </tr>    <tr>     <td>tooltipAnimate</td>      <td>true</td>      <td>Whether to animate the tooltip or not</td>      <td>true/false</td>   </tr> </tbody>