Real Time Hints & Progress For Forms - jQuery Progression
File Size: | 11.4 KB |
---|---|
Views Total: | 3740 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.