VerLim.js A jQuery plugin

A lightweight customizable plugin for jQuery to show horizontal length in form of vertical progress bar

What is VerLim?

Visiting a website on mobile device but not able to know: 1. How lengthy the page is? 2. How much you had scrolled before closing the page for the next read. Here is the solution; VerLim provides a cool progress bar indicating how much is the page length and how much scrolled.

In order to use VerLim simply Include VerLim.js and a CSS theme (optional) of your choice, and you get a beautiful progress indicator No need to hook into any of your code, scroll amount is detected automatically.

Highlights

Released under the MIT License. Source on Github (changelog).

Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

Bower Package: VerLim.js

Supports web browser in desktop as well as mobile versions. Lightweight: 3KB of JavaScript (less than 2KBs minified and 1KBs zipped). Appearance is controlled through CSS so it can be restyled. Can be extended with callbacks & event-hooks without altering the source files. (future inhancement) Completely unobtrusive, options are set in the JS and require no changes to existing HTML. Preloads upcoming images in a photo group

Instructions & Help

The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. First-time jQuery users can check out the VerLim.js Beginner’s Guide. Intermediate users can probably glean everything needed by view-source’ing the demos.

Usage

VerLim is fully automatic, no configuration is necessary to get started.

// Format: $(window).VerLim();

If you would like to make some tweaks, here’s how:

samples: // passing some basic setting(s) $(window).VerLim( { color: "#dd2266", autoHide: "on", autoHideTime: "2", theme: "on", position: "top", thickness: "5px", shadow: "on" });

Settings

active : To disable the plug in effect set this setting as “off”, by default it’s “on” and progress bar will be visible

autoHide : Sets the progress to be hidden after a default (2 seconds) or configure time.

autoHideTime : Sets the time of the auto hide property, in seconds.

color : This can be used to set color of progress bar, provide a valid RGB color code or valid color name (e.g. #FF0000 or red)

position : If top progress bar will be shown on the upper side of the screen, other option is “bottom”

thickness : The thickness of progress bar, can be set in any format, if only number it will be px, other options are “5px”, “5pt”, “5%”, “5em”

theme : This allows the user to set theme to the progress bar, set this as “on” and add css (if no css found default will work see demo)

shadow : If “on” provides a cool blue color shadow below progress bar using box shadow property.

Public Methods

$(window).VerLim(); This method allows you to call VerLim without having to assign any configuration to it.

Themes

VerLim.js currently includes two themes to get you started. Just include the appropriate css file.

Dependencies

As it’s a JQuery plug in; the only dependency is the earlier.

Support

VerLim is designed to show progress bar on almost all modern mobile browser(s) ; also it support IE7+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+.

Size

VerLim.js is 2kb minified. The themes vary between 2 and 4kb.

Before you go,

Follow me on Twitter and Github, that’s where I’m most active these days. I welcome email (pranay.joshi@outlook.com), you can also visit our home page @ https://thoughts2share.in to get more detail About Us.