Friday, 21 August 2009

Elegant ScrollPanes with jQuery and CSS3

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 <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 &lt;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 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.


CSS3 rounded corners for every browserHow to implement a news ticker with jQuery and ten lines of codeHow to implement a launching soon page with PHP and jQueryHow to implement a Post-to-Wall Facebook-like using PHP and jQuery

No comments:

Post a Comment