Search code examples
javascriptjquerycssjscrollpanejquery-jscrollpane

'Is not a function' error in jquery script

I am working on a demo with a jquery carousel script and jScrollpane scrollbars with anchors links but I can't seem to get it working properly. Can someone point out what I am missing here in the script?

Via firebug I got the error messages:

"Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null"

$(".scroll-pane-arrows").jScrollPane is not a function

$('.scroll-pane-arrows').jScrollPane(my_jscrollpane_opts); from: jquery.contentcarousel.js (line 272)

syntax error

} from: index.html (line 525)

Solution

  • You are calling jScrollPane before you actually include its definition. If you view source in chrome

    view-source:http://members.chello.nl/j.bemmel2/carousel_/

    and look at line 512 - 518, you have:

    <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
    $('#ca-container').contentcarousel();
</script>
<!-- the Scrollbar script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

    You are calling .contentcarousel() which calls jScrollPane, but without first including jscrollpane.min.js

    What you should do is to have

    <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

    prior to calling .contentcarousel(), as the following:

    <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<!-- the Scrollbar script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $('#ca-container').contentcarousel();
</script>