A jQuery plugin that gives users real time hints & progress updates as they complete forms
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>
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
});
Variable | Default Value | Description | Valid Options |
---|---|---|---|
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 | left/right |
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 | true/false |
showHelper | true | Whether the helper text should be shown or not | true/false |
tooltipFontSize | 14 | Set the font size of the helper text in pixels |
|
tooltipFontColor | ffffff | The hash color reference of the helper text |
|
progressBarBackground | ffffff | The hash color reference of the progress bar background |
|
progressBarColor | 6EA5E1 | 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 | true/false |