How can I make pretty scrollbars using HTML/CSS/JScrollPane

Question

I am designing an html web page that mimics inline panes by defining this css class:

.paneSection{
  display: block;
  border-width: 1px;
  border-style: solid;
  margin: 2px;
  padding:0px; 
  height:200px;
  width:200px;
  overflow: auto
}

and applying to a span tag. The resulting code is something like this:

<table>
  <tr valign=top>
    <td>
      <span class="paneSection">
        ... A long piece of text here that will inevitably overflow the block ...
      </span>
    </td>
    <td>
      <span class="paneSection">
        ... More text, may or may not overflow, etc...
      </span>
    </td>
  </tr>
</table>

The problem is that the scrollbars that appear are ugly, gray, boxy ones. I really need a "prettier" scrollbar. I have looked around for a couple hours, and it seems that almost everything points to using the JQuery plugin JScrollPane. However, although I am a developer (I am actually using Java to generate the html for the web page), I have never used JQuery or plugins before.

I played around a little bit with source code from other pages, and got something minimal working, but still nothing pretty. I may be wrong in saying this, but it appears that I need actual image files to make the scrollbars prettier.

An example of one scrollbar that I like is the one on pane2 on this page: http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html

Where can I get the images that are referenced in the source? Do I actually need to make those images, or are they available somewhere for download?

Any other help on designing pretty scrollbars (I am NOT a graphic designer, please keep that in mind), or how to use JQuery plugins in general is appreciated.

Added Note I also need the scrollbars to work horizontally, not just vertically. Is JScrollPane still right for this?

Answer 1

No you should be able to grab the images. For example one of the arrows is here: http://www.kelvinluck.com/assets/jquery/jScrollPane/images/osx_arrow_up.png.

The easiest way to find this is use your browser's inspector (Chrome and Safari has this built in, Firefox use Firebug, no comment on IE). Just rightclick on the scrollbar or the part of the scrollbar that you are interested in for the image and do "Inspect Element." From there you can see the css for that element and in this case they are using the background-image property and you can just grab the URL from here.

If you are not a graphic designer I would just find already existing images on the web (assuming the creator allows this). For jQuery in general I would suggest perusing the documentation http://api.jquery.com/ to see what is available to you (I assume you know Javascript) and just start using it. Experience is a great teacher in this case.