tpaksu / jquery.scrolite

A simple jQuery Scrollbar which appends to a given element to limit it's dimensions and make it scrollable via a CSS scrollbar element.

Home Page:http://tpaksu.github.io/jquery.scrolite/demo.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Description

This plugin appends a vertical scrollbar to any element which you need to limit its dimensions like an image, a div or an ul list etc. This is the initial release of this plugin, so feel free to test it and give me some feedback so I can update this plugin with new improvements or with bug free versions. (horizontal scrollbar will be added later.)

It uses Brandon Aaron’s beautiful mousewheel plugin for mouse wheel scrolling support.

It can be configured with many ways as scrollbar width, color, edge radius, scrollbar bed width, color, edge radius, scroll panel width, scroll panel height, mouse scroll sensitivity.

File sizes are 7.36 kBytes for the development version, 4.08 kBytes for the minified version (as for alpha stage), and 206 bytes for the CSS file. (The zip file is big because of the included jQuery library and png image.)

Demo

You can see a working example at tahapaksu.com.

Installation

Include these lines into your script’s declaration:


<script src="lib/jquery.min.js" type="text/javascript"></script>
<script src="lib/jquery.scrolite.min.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/jquery.scrolite.css"></link>

Usage

Then use this script with :


$(".scrollable").scrolite({
width:500,
height:300
});

Options

The plugin options are:


‘barColor’ : The color of the scrollbar handle
‘bedColor’ : The color of the scrollbar bed
‘bedWidth’ : Width of the scrollbar bed
‘bedCornerRadius’ : CSS3 border-radius of scrollbar bed
‘barWidth’ : Scrollbar handle width
‘barCornerRadius’ : CSS3 border-radius of scrollbar handle
‘width’ : scrollable area width
‘height’ : scrollable area height
‘scrollSensitivity’ : pixel scrolling value of one tick of the mousewheel

CSS Elements

You can change other CSS values by referring to these classes in your styles file:


‘.scrolite’ : refers to container of all the elements below
‘.scrolite-bed’ : refers to scrollbar bed element
‘.scrolite-bar’ : refers to scrollbar handle element
‘.scrolite-container’ : refers to the scrollable area wrapper

Public Functions

If you are using an AJAX script to load it’s contents from somewhere, you can refresh the scrollbar’s calculations by this function (included in the demo file):


$(".scrollable").data("scrolite").refresh()

The “.scrollable” refers to your initial element which you’ve added the scrollbar.

About

A simple jQuery Scrollbar which appends to a given element to limit it's dimensions and make it scrollable via a CSS scrollbar element.

http://tpaksu.github.io/jquery.scrolite/demo.html

License:GNU General Public License v2.0


Languages

Language:JavaScript 55.5%Language:HTML 43.5%Language:CSS 1.0%