Scrollbar Indicator

What is the use of Scrollbar Indicator?

Scrollbar Indicator is useful for lengthy webpages. It helps indentifying the current location on a giving page. The Scrollbar Indicator can also be used to navigate through the content of a page. It is really simple to set up.

Dependencies

Scrollbar Indicator requires the following libraries:

  1. The latest Jquery, which you can download from here.
  2. The latest jqueryUI, you can download from here.

Getting Started

Download the latest code from here

How to use Scrollbar Indicator

Include the following css files into the header

<link href="http://example.com/css/jquery-ui.min.css" rel="stylesheet">

<link href="http://example.com/css/jquery-scrollbar-indicator.css" rel="stylesheet">

Include the javascript files into the page

<script src="http://example.com/js/jquery.min.js"></script>

<script src="http://example.com/js/jquery-ui.js"></script>

<script src="http://example.com/js/jquery-scrollbar-indicator.js"></script>

HTML decoration for your images goes like this

<div id="scrollbar"></div>

Include the following near the end of the page or in a seperate javascript file

<script type="text/javascript">
    $("#scrollbar").scrollbarIndicator();
</script>

Initialization Options

The following are the initialization options and their default values

handleColor: "#556b2f"

backgroundColor: "#e9e9e9"

height: 400

You can override any of these values during initialization.

<script type="text/javascript">
    $("#scrollbar").scrollbarIndicator({
        "handleColor": "pink",
        "backgroundColor": "yellow",
        "height": 400
    });
</script>