VerLim.js A jQuery plugin

VerLim.js A jQuery plugin

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

Download                     fork me on git hub

VerLim Demo (no theme)

VerLim Demo (no theme)

VerLim Demo (with theme)

VerLim Demo (with theme)

What is VerLim?

Visiting a website on mobile device but not able to know:

  •  How lengthy the page is?
  • 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.

VerLim Demo (with another theme)

VerLim Demo (with another theme)

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.

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

Settings

Property Default Description
active “on” To disable the plug in effect set this setting as “off”, by default it’s “on” and progress bar will be visible
autoHide “off” Sets the progress to be hidden after a default (2 seconds) or configure time.
autoHideTime “2” Sets the time of the auto hide property, in seconds.
color “#52bad5” 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 “top” If top progress bar will be shown on the upper side of the screen, other option is “bottom”
thickness “5px” 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 “off”  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 “on” 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 currently includes two themes to get you started. Just include the appropriate css file. (can be downloaded from here)

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 @ thoughts2share.in 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 40 access attempts in the last 7 days.