Annoying: Uncaught TypeError: $(...).jScrollPane is not a function

JavaScript
1

So I’m trying to implement a jScrollPane (http://jscrollpane.kelvinluck.com) function in my site so it is usable with most browsers. Unfortunately, I’m plagued with the “Uncaught TypeError: $(…).jScrollPane is not a function” error.

jQuery is first to be loaded then the scripts and yet this error is persistent.

The call is:

 <script>
$(document).ready(function () {
    $('.blog-featured').jScrollPane();
 });
</script>

I’ve tried changing it to:

jQuery(document).ready(function( $ ) {
$('.blog-featured').jScrollPane();
     });

but the same error kept posting.

I’ve tried:

$(function () {
    $('.blog-featured').jScrollPane();
 });

same error

Even tried:

(function( $ ) {
  $(function() {
    $('.blog-featured').jScrollPane();
    });
 })(jQuery);

and still plagued with it.

Any ideas on how I can solve this?

2

Obvious question, but are you including those files they ask you to? BEFORE you call the scrollPane function?

It’s saying that it can’t find any reference to jScrollPane(), which leads to the point that it can’t find the function. Which means that the files aren’t being properly included.

3

Yes, this is loading:

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

as well as

  <script src="/templates/mytemplate/js/jquery.mousewheel.js" type="text/javascript"></script>
4

Is this live somewhere? A demo / website showing hte issue will help us identify the cause and fix :slight_smile: .

5

Here you are.

6

You’re including a lot of copies of jQuery.

MOve all that Javascript code to before </body> like your jScrollPane() initiation is. Remove the duplicate jQuery files (there might be a conflict.)

7

Doing as you asked, now I have a slew of more errors:

1906×242 13.7 KB

Now my menu no longer works, I have one instance of jQuery loading, and the scrollPane still isn’t working.

8

Since it’s caused a series of errors, I moved everything back to where it was so my site’s functional again. I’ll just have to get back to it tomorrow.

9

You don’t need to move all of them down to get things working. Instead, you can just move down the code that sets up the onload/onresize event handling.

The other libraries that things depend on do result in a slower page-load experience for people when they’re higher up on the page. Moving them down to just before the body results in a better experience for people loading your page, which can be done a bit at a time until the problem is found and fixed.

Sadly though the linked-to site doesn’t seem to be giving me a 403 request blocked error, otherwise I’d investigate to give more concrete advice on how to get everything working well.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.