Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Scrollify Function Not Being Found Even When Script Is Imported

Post a Comment
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: Unca

Solution 1:

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
<scriptsrc="{{ [
    '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 %}
<scriptsrc="{{ '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.

Solution 2:

Try putting your script at the bottom of your code.

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

Solution 3:

Try to use it this way

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

    $.scrollify({
       ...
    });

});

Solution 4:

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>
..
..
..
<scriptsrc="..\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.

Post a Comment for "Scrollify Function Not Being Found Even When Script Is Imported"