Question

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)

Answer 1

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>