Jscroll is not working in chrome and safari

Question

I tried teh jScroll plugin by Kelvin Luck. First of all its a wonderful script. Its working fine with text, ie text as contents, in all browesers. But when we insert images in that the scroll is not working in Safari and Chrome... please help me. Am a beginner in javascrpt...:)

Retheesh

Answer 1

Another way of doing it is to initialise the plugin once the entire page is loaded

$(window).load(function(){
    $('.scroll-pane').jScrollPane();
})

Answer 2

Ok, this way late, but I just spent most of the day figuring this out. It's actually quite simple and also sort of explained in the jScrollpane Demo pages...

Since I am using the Wordpress plugin, using the the workaround Dann provided seemed a bit to complicated. The solution here is setting the image height in your CSS file for this specific page instead of (or on top of) declaring them inline.

So basically if you have

<div id="mydiv">
    <img src="...." height=200px"/>
>/div>

jScrollpane won't recognize the height of the pictures and count them for your div height. So you need to add a class to your div and define the img height in your CSS:

#mydiv .newclass img {
    height: 200px;
}

and it will work fine!

Answer 3

I had a similar problem. Reinitialising the panel seemed to work. I used this script:

$('.image_class').load(function () {
        $('.scroll-pane').jScrollPane();
});

Dann

Answer 4

It's a known issue, but Dann's workaround is effective. I ended up testing for the presence of troublesome images, since they weren't always present on the page and affecting the scroll area size:

   $(function() {
        if($('.image_class').size()) {
            $('.image_class').load(function() {
                $('.scroll-pane').jScrollPane();
            });
        } else {
            $('.scroll-pane').jScrollPane();
        }
    });