[jQuery] jScrollPane Not Scrolling All The Way After Re-Skinning
I'm using jScrollPane pretty much out of the box with the following
changes:
I put the scripts into assets/scripts, the css into assets/css, and
the images into assets/images. Any urls have been changed to reflect
this.
I created three jpgs for the up arrow, down arrow (10 x 9 px) and the
drag grab center (10 x 10 px)
The problem I am having is that the content doesn't scroll down enough
to display all the content of the div. In the sample div, it's the
anchor a the bottom that's not showing up.
Here's the call:
<--
$('.scrollPane').jScrollPane({showArrows:true, scrollbarWidth: 10});
-->
Here's a sample div:
<--
<div class="scrollPane">
<h2>NEWS</h2>
Brulant S.W.A.T (Strategic Web and Technology) Event
<a href="#">View All News</a>
</div>
-->
and here is the pertinent css:
<--
.jScrollPaneDrag {
position: absolute;
height: 10px;
background: url(../images/drag_grab.jpg) no-repeat 0 0;
cursor: pointer;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
background: url(../images/up_arrow.jpg) no-repeat 0 0;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
background: url(../images/down_arrow.jpg) no-repeat 0 0;
}
.scrollPane {
width: 175px;
overflow: auto;
height: 50px;
margin:10px 0 15px 0;
}
.scrollPane a:link, .scrollPane a:hover, .scrollPane a:visited,
#centerRightCol a:link, #centerRightCol a:hover, #centerRightCol
a:visited{
color:#b7c71c;
height:7px;
padding-right: 10px;
background-image:url(../images/right_arrow.jpg);
background-repeat:no-repeat;
background-position:right;
}
-->