A repository of over 1000 quality jQuery plugins

jQueryCards ♡ WPEngine

Your website deserves the fastest WordPress host on earth. (As does ours.)

Get 20% off your hosting on us.

jQuery Progression JS

Progression JS is a jQuery Date & Time plugin.

Created by Aarondo

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

Not what you're looking for? Click here to view more Date & Time jQuery plugins

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

VariableDefault ValueDescriptionValid Options
tooltipWidth200The width in pixels that you would like the tooltip to be
tooltipPositionrightWhether the tooltip should sit to the left or right of the formleft/right
tooltipOffset50The width in pixels that you would like the offset of the tooltip to be
showProgressBartrueWhether the progress bar should be displayed or nottrue/false
showHelpertrueWhether the helper text should be shown or nottrue/false
tooltipFontSize14Set the font size of the helper text in pixels
tooltipFontColorffffffThe hash color reference of the helper text
progressBarBackgroundffffffThe hash color reference of the progress bar background
progressBarColor6EA5E1The hash color reference of the progress bar
tooltipPadding10The padding for the tooltip in pixels
tooltipAnimatetrueWhether to animate the tooltip or nottrue/false


You might also like these other Date & Time jQuery Plugins

  • timedropper

    timedropper is a jQuery UI timepicker. Manage time input fields in a standard form. Focus on the input to open […]

  • jClocksGMT.js

    jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Perfect for world clocks. Now supporting automatic [&hell...

  • bootstrap-year-calendar

    A fully customizable year calendar widget, for jQuery and bootstrap.