jscrollpane styling the arrows

Question

I'm implementing the jScroll pane jQuery script (from http://jscrollpane.kelvinluck.com ) on a page under development, and want to style it to suit the design of the page:

• for some reason the scroll area doesn't span to the full text of the div. don't know what could be the problem? (solved with making a fallback font for the @font-face loaded font, and making the font-size-adjust in css)

• I'm using both arrows on bottom, but I would like to resize the complete arrow area so that it's more loose

• also, I would like to make the disabled arrows grey, and have prepared the images, but I don't know how to make the selection to .jspDisabled class so it shows the appropriate images and not the same image for both.

The page: http://baksagaspar.com/francesco-work/

Any help please?

Answer 1

From what I remember, jScrollPane uses CSS for the arrow images.

Just replace the background-image property on the style for the classes: .jspArrowDown and .jspArrowUp.

For disabled, make sure the backgroud-image for .jspArrowUp .jspDisabled is set to important.

Example:

.jspArrowUp {
  background-image: url(upArrow.jpg);
}

.jspArrowUp.jspDisabled {
  background-image: url(upArrowDisabled.jpg) !important;
}

Answer 2

I think you are setting the scroll on the wrong div.

$('#text-content-in').jScrollPane( {
    showArrows: true,
    verticalArrowPositions: 'after',
    horizontalArrowPositions: 'after'
});