Question

I’m trying to modify the scrollbar colors for jscrollpane.

This didn’t work for me:

$('a.athlete_popup_content').click(function(){
    $('#box_on_top').append($content); //.athlete class is within $content
    $('.athlete').jScrollPane({autoReinitialise: true});
    $('.jspVerticalBar').css('width', '10px');
    $('.jspTrack').css('background','lightgrey');
    $('.jspDrag').css('background','black');
    $('.athlete').jScrollPane({autoReinitialise: true});
});

i tried placing athlete class both before and after… it doesn’t do anything… also, the second time this runs, the scrollbar doesn’t appear at all.

any help?

-=update=-
For the issue where it does not appear correctly the second time, I had to destroy the jsp on close and it started working.

var element = $('.athlete').jScrollPane(); 
var api = element.data('jsp');
api.destroy();

I was unable to get the colors to work.

I am including the .css initially, but want to change the colors on load. I wasn’t able to figure out this issue so I just modified the .css

Thanks!

Answer 1

Your code es working perfectly, as you can see here. If you are calling jScrollPane() on a click event then the tags you are trying to reach (.jspVerticalBar, .jspTrack, .jspDrag) are created after css() calls, then you should use .on() to attach those calls to the event.