Print

[siteFEEDS]

Elegant ScrollPanes with jQuery and CSS3
21 August 2009, 6:04 am





Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:



Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.

I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .



Step 1. HTML code

First of all, you have to include jQuery and jScrollPane into the tag of your web page:





Now create a DIV element into the tag of your page. This layer will contain a certain number of child elements, for example <,p> tags:

...

...

...

...

elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:

.scroll-pane {

width: 400px;

height: 250px;

overflow:auto;

}

It's important set a fixed height and the property overflow to "auto". This is the result:



Now add this JavaScript code below the inclusion of jScrollPane (in the tag) to initialize the script for the layer with ID="section-scroll":



You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:

...

...

...

...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:



Step 2. CSS Code

Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.

.scroll-pane {

width: 400px;

height: 250px;

overflow:auto;

float: left;

}

/*JScrollPane CSS*/

.jScrollPaneContainer {

position: relative;

overflow: hidden;

z-index: 1;

padding-right: 20px;

}

.jScrollPaneTrack{

position:absolute;

cursor:pointer;

right:0;

top:0;

height:100%;

}

.jScrollPaneDrag{

position:absolute;

background:#CCC;

cursor:pointer;

overflow:hidden;

-moz-border-radius:6px;

-webkit-border-radius:6px;

}

.scroll-pane{padding:0;}

.scroll-pane p{

-moz-border-radius:6px;

-webkit-border-radius:6px;

background:#232323;

padding:12px;

color:#CCC;

font-size:14px;

line-height:16px;

}

The final result is something like this:



You can change it how you prefer for your web sites. That's all! Download the source code.

For other information about jScrollPane, thake a look at the official page.

Related Posts

- CSS3 rounded corners for every browser? An alternative quick solution without headache

- How to implement a news ticker with jQuery and ten lines of code

- How to implement a launching soon page with PHP and jQuery

- How to implement a Post-to-Wall Facebook-like using PHP and jQuery





Source: Woork