Skip to content
A jQuery plugin that gives users real time hints & progress updates as they complete forms
Branch: master
Clone or download
aarondo Merge pull request #19 from adamplabarge/patch-1
replace .parent().parent() with closest('form')
Latest commit b769014 Jul 31, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo initial commit Jun 9, 2013
src replace .parent().parent() with closest('form') Jan 14, 2016
.gitattributes initial commit Jun 9, 2013
.gitignore initial commit Jun 9, 2013
README.md Update README.md Dec 22, 2015

README.md

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>
Variable
You can’t perform that action at this time.