VerLim.js Beginner’s Guide

VerLim.js Beginner’s Guide

A tutorial for first-time jQuery users.

Download                     fork me on git hub

VerLim Demo (no theme)

VerLim Demo (no theme)


Users familiar with jQuery will be better served viewing source on the demo and using that as a guide.
VerLim.js is a jQuery plugin, meaning that it extends the jQuery JavaScript library to include extra functionality. In your HTML document, you must include the jQuery library’s source before you include the source of any jQuery plugin. VerLim.js has the additional requirement that you include its stylesheet in the <head> of your document before you include the source of the plugin.
Here is an example HTML5 document with the required files:


Let’s use VerLim.js to display the progress bar using VerLim method without passing any setting parameter. We will use jQuery to query the DOM to add progress bar’s div:

Here, the jQuery() function takes in the window CSS selector and queries the DOM. It returns a collection of elements, on top of which we then append VerLim progress bar by calling jQuery’s .VerLim() method.
A browser parses your HTML document from top to bottom. When a browser encounters a <script> block, it will stop parsing your HTML document and execute the script. The browser will resume parsing your document once the script has executed. This means if you use a <script> in the <head> of your document to assign VerLim to links in your document, the script will be executed before the markup of those links have been parsed and added to the DOM. Those links must be in the DOM before VerLim can be assigned to them. Inserting the <script> after the markup for the links insures that the links will be in the DOM when we query for them (hence its recommended to put VerLim code at the end of the html i.e. just before closing body tag):


An alternative to placing this <script> at the bottom of the document would be to use jQuery’s .ready() method. This method takes in a callback function that will be executed once the DOM has finished loading.
Lastly, the .VerLim() method accepts an optional settings parameter(s) that overwrites the default settings that control VerLim progress bar behaviour. The settings is made up of individual parameter and values; which can be assign to them. Example:


Use comma to separate multiple setting(s):

Here is the .ready() method and VerLim settings parameter(s) applied to our example document:

If you have questions, go here. A complete list of the settings available are documented here.

Before you go,

Follow me on Twitter and Github, that’s where I’m most active these days. I welcome email (, you can also visit our home page @ to get more detail about us.

It's only fair to share...Email this to someoneShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestDigg thisShare on TumblrShare on Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *

Bad Behavior has blocked 17 access attempts in the last 7 days.