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 codeFirst of all, you have to include jQuery and jScrollPane into the
<head> tag of your web page:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
Now create a DIV element into the tag
<body> of your page. This layer will contain a certain number of child elements, for example
<p> tags:
<div id="section-scroll" class="scroll-pane"><p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div> <p> 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
<head> tag) to initialize the script for the layer with
ID="section-scroll":
<script type="text/javascript">$(function
(){$('#section-scroll').jScrollPane();
}); </script> 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:
<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>
...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:
<script type="text/javascript">$(function
(){$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
}); </script> Step 2. CSS CodeNow 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.
