TypeError: $(...).perfectScrollbar is not a function

Question

I am trying to createa "Perfect Scrollbar" using this:

https://noraesae.github.io/perfect-scrollbar/

With the most simple possible code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#msgid").html("This is Hello World by JQuery.");
    $('#msgid').perfectScrollbar();
});
</script>

<div id="msgid"></div>

And I have the followin error:

TypeError: $(...).perfectScrollbar is not a function

Of course every js/css is pointing to the right direction, if needed you can see it live here:

http://florida.red111.net/a.html

Looks like jQuery is not recognizing the library,

Any ideas?

Thanks in advance.

Answer 1

You might not have the jQuery enabled version. This code worked for me:

<title>Test</title>
<!-- META -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- SCRIPTS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/min/perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">

    $(document).on('ready', function() {

        console.log('HELLO!');

        $('.id-parent').perfectScrollbar();

    });

</script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/css/perfect-scrollbar.min.css" />
<style type="text/css">

    .id-parent {
        position: relative;
        overflow: auto;
        height: 200px;
    }

    .id-child {
        height: 1000px;
    }

</style>

</head>

<div class="id-parent">
    <div class="id-child">
        <h1>Content goes here</h1></div>
</div>