Progression.js - Real time hints & progress updates

Progression.js is a jQuery plugin that gives users real time hints & progress updates as they complete forms

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: git.aaronlumsden.com

1. INCLUDE CSS AND JS FILES

<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>

2. HTML

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>

3. JAVASCRIPT

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

4. OPTIONS

$("#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
});