Search code examples
javascriptjqueryhtmljquery-pluginsjquery-jscrollpane

jScrollPane is not working

I'm using jQuery jscrollpane plugin http://jscrollpane.kelvinluck.com/ to set some feature in my application. The question is it doesn't show the jscrollpane at all.

HTML:

<div class="boxcontent" id="dummy">
    <p>
        abcdefghijklmnopqrstuvwxyzkdksflajsdfkljasdlfkjas
    </p>
</div>

CSS:

#dummy {
    width: 100%;
    height: 200px;
    overflow: auto;
}
.horizontal-only {
    height: auto;
    max-height: 200px;
}

JavaScript:

$("#dummy").jScrollPane();

I included all the requirements shown in jScrollPane download section. But it is not displaying anything.

Could anyone tell me the mistake?

thanks!

Solution

  • the plugin initiation is called before the element is attached to the DOM. to fix this wrap your initiation with DOM ready callback:

    $(document).ready(function() {
    $(".dummy").jScrollPane();
});

    here's a working jsFiddle, as edited based on the original fiddle.