jqueryjscrollpanejquery-jscrollpane

jquery undefined variable for jscrollpane

I am trying to implement jScrollPane in to a wordpress theme I am working on and have followed the instructions on the site. In my head I have:

<!-- styles needed by jScrollPane -->
<link type="text/css" href="<?php bloginfo('template_url'); ?>/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.jscrollpane.min.js"></script>

and in my footer I have:

jQuery(function(){
    jQuery('#content').animate({'margin-top': '120px'}, 1500);
    jQuery('.content').jScrollPane();
});

When I load the page, the #content box animates up as it should but the scroll bar at the side of the .content div is the standard one. I refresh with my dev tools open and it says "Unhandled error: Undefined variable: jQuery" and highlights:

!function(a, b, c) {

which is the first line of jquery.jscrollpane.min.js

Any help please guys? Thanks.

Solution

  • I needed to load jQuery before any other JS files, it was being loaded after.