19.9.10

jQuery Scrollbars

Hey readers this is my first post :)

Today i wanted my div to have a scrollbar...
to make your div support scrollbar you should use CSS property 'overflow'


.Div {
 border1px solid #ccc;
 width640px;
 height385px;
 overflowauto;
}

This will make a scrollbar, but who want to use those ugly default browser scrollbars? 
So i found a great plugin for jQuery called jScrollPane.
This awsome plugin lets you design your own scrollbar using CSS and even more!
First of all you need to download it, or you can get his Git from Here.
(To get Git you can use TortoiseGit)
After you have all the files you need link them to your HTML file
<link href="js/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />
<script src="js/jquery.mousewheel.js" type="text/javascript" />
<script src="js/jquery.jscrollpane.min.js" type="text/javascript" />

Now define the scrollpane class
<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 
(Add this after the links to the files)
add a little css:
.scroll-pane
{
 width100%;
 height200px;
 overflowauto;
}
Now easily just create a div giving him class="scroll-pane"
and thats really it :)
<div class="scroll-pane"> <p>     Content Here
 <p><div>

And you'r done :)

No comments:

Post a Comment