scroll bar customization

Permalink 1 user found helpful
where can I find the css to customize the scroll bar that appears when I set overflow to auto ?

DianaAyub
 
Mainio replied on at Permalink Best Answer Reply
Mainio
From nowhere.

Use this:http://jscrollpane.kelvinluck.com/...
DianaAyub replied on at Permalink Reply
DianaAyub
That's exactly what I want, but I'm new at this... can you tell me how I integrate the files and the code into my files? thanks!
Mainio replied on at Permalink Reply
Mainio
There is the "How to use" section which covers the installation of the script:
http://jscrollpane.kelvinluck.com/#usage...

Just download it and follow those instructions.
DianaAyub replied on at Permalink Reply
DianaAyub
I did that, but I'm doing something wrong because the scroll bar still looks the same.
for example, where do I insert this code:
$(function()
{
   $('.scroll-pane').jScrollPane();
});

I put it in the full.php at first then in the header.php and still nothing
I created a folder root/themes/mytheme/js and I put the js files in it. As for the css file, I put it in root/themes/mytheme/css/

is that correct? (I'm thinking I'm using the $(function... code wrong ? )
Mainio replied on at Permalink Reply
Mainio
1. Go to your theme folder /themes/your_theme/
2. Unzip the scrollpane into /themes/your_theme/jscrollpane/
3. Add this to your header:
<!-- styles needed by jScrollPane -->
<link type="text/css" href="<?php echo View::getInstance()->getThemePath() ?>/jscrollpane/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="<?php echo View::getInstance()->getThemePath() ?>/jscrollpane/script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="<?php echo View::getInstance()->getThemePath() ?>/jscrollpane/script/jquery.jscrollpane.min.js"></script>


Only thing I changed from the lines in the how to is:
- I removed jQuery inclusion (already automatically done by c5)
- I put the relative paths to your theme in front of the included file like suggested in theme generation guides here
DianaAyub replied on at Permalink Reply
DianaAyub
Still not working! I did exactly as you said... :(
here's the site :http://graphprime.info/privinvest-new...
Mainio replied on at Permalink Reply
Mainio
Ok, you're not referencing the scrollable area correctly (above) and in the source I cannot see the call for initializing that script.

Add this to your header or footer, depending on preference and wanted display behavior:
<script type="text/javascript">
$(document).ready(function() {
  $('#left-sidebar-inner').jScrollPane();
});
</script>
DianaAyub replied on at Permalink Reply
DianaAyub
It worked!! Thankyou so much!!!! :)
djoniba replied on at Permalink Reply
djoniba
Hello. Can I add a question here.

Can I add support for more than one div in this script? I have a fullpage version of the theme where another div has to be scrollable, but I am using a separate header.php file that is the same for both pages.

Hope it was understandable.
Mainio replied on at Permalink Reply
Mainio
Yes I think you should be able to do this as their demo shows:
http://jscrollpane.kelvinluck.com/less_basic.html...

Multiple scroll areas shouldn't be a problem.
djoniba replied on at Permalink Reply
djoniba
Great. Thanks