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>
        <p>Brulant S.W.A.T (Strategic Web and Technology) Event</p>
        <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;
}

-->

Reply via email to