CODEWITHSUNDEEP
javascriptjquery
AKor
AKor

Reputation: 8882

Scrollify function not being found even when script is imported

So I'm trying to use Scrollify, which is a jQuery plugin for scroll snapping. I have jQuery imported no problem, but no matter how I import the plugin itself, I get the error:

Uncaught TypeError: $.scrollify is not a function

I have the plugin script loading after jQuery itself loads, and the configuration code after both of those load, even to the point where I put the plugin's script tag and configuration code at the very end of the page before </body>.

I've tried hosting the plugin script locally, and I tried using a CDN. Both gave the same issue.

I've had these sort of issues with other scripts and they always were due to the loading order, but I'm stumped here. Any help?

Upvotes: 2

Views: 2636

Answers (4)

Thiago Prado
Thiago Prado

Reputation: 36

So I am building a custom Theme in OctoberCMS, and I was hopping to use scrollify before running into the same error. After a lot of struggling, switching JQuery versions and moving functions around, I noticed my issue was related to using Laravel Mix/Webpack to import the scrollify code. I had it required at the top of my main.js file, but the code itself was loaded after.

My solution was using some October twig functions to load the code after JQuery manually.

// These get loaded first
<script src="{{ [
    'assets/js/app.js', // My JQuery gets loaded here
    'assets/js/vue.js'  // Other JS for the website
    ]|theme }}"></script>
// Scripts in here injected into page by the {% scripts %} tag after, having the 
// scrollify.js in the array above or outside the {% put scripts %} tag would always throw
// $.scrollify is not a function error 
{% put scripts %}
<script src="{{ 'assets/js/scrollify.js'|theme }}"></script>
<script>
    $(document).ready(function () {
        $.scrollify({
            section: ".example-section",
        });
    });
</script>
{% endput %}
{% scripts %}

The {% scripts %} tag inserts JavaScript file references to scripts injected by the application. https://octobercms.com/docs/markup/tag-scripts

As the above answers mentioned, Scrollify needs to be loaded after the page and Jquery loads, but if you are using Webpack or equivalent I would suggest checking the compiled scripts in your browser and making sure they are ordered correctly.

Upvotes: 1

Abhishek Jain
Abhishek Jain

Reputation: 897

The reason behind the error is, that the Scrollify Script should initialize after the document has finished loading. Thus, the solution is to move it to the end

Move these two lines at the end of the body tag, as shown below:

<body>
..
..
..
<script src="..\js\Scrollify\jquery.scrollify.js"></script>
<script>
    $(document).ready(function() {
        $.scrollify({
            section : ".sectionalScrolling",
        });
    });
</script>
</body>

Make sure that the script is right before the closing body tag.

Upvotes: 0

Jose Luis Sicajan Coy
Jose Luis Sicajan Coy

Reputation: 23

Try to use it this way

jQuery(document).ready(function($) {

    $.scrollify({
       ...
    });

});

Upvotes: 0

Engin
Engin

Reputation: 815

Try putting your script at the bottom of your code.

...
<script>
        $(function(){
            $.scrollify({
                ...
            });
        });
    </script>
</body>

Upvotes: 0

Related Questions