CODEWITHSUNDEEP
htmlwordpressjquery-scrollify
Paul Stephen Davis
Paul Stephen Davis

Reputation: 153

Cant get scrollify.js to work?

I am trying to use scrollify.js on my single page website but cannot get it to work?

I have the following html, header.php for loading scrollify and my js in my custom.js file.

What am I doing wrong?

Thanks in advance?

HTML

        <?php get_header(); ?>
        <div id="sections_all">
        <div id="section_1">
            <section class='section'>
                <div class="section-1-container">
                    <h1 id="section_1">
                        <span style='font-size: 20vh;'>Sell your old <br>Garrard</span>
                    </h1>
                    <h2 id="section_1">
                        Looking to sell your turntable? We buy your used Garrard 301 & 401 record players.
                    </h2>
                </div>
            </section>
        </div>
        <div id="section_2">
            <section class='section'>
                <div class="section-2-container">
                    <!--<p class="contact-text">Contact Us</p>-->
                    <?php echo do_shortcode('[contact-form-7 id="66" title="Contact Us"]'); ?>
                </div>
            </section>
        </div>
        <div id="section_3">
            <section class='section'>
                <div class="section-3-container">
                    <h1 id="section_3">
                        Sell your old turntable
                    </h1>
                </div>
            </section>
        </div>
        <div id="section_4">
            <section class='section'>
                <div class="section-4-container">
                    <h1 id="section_4">
                        Sell your old turntable
                    </h1>
                </div>
            </section>
        </div>
        </div>
        </div>

        <?php get_footer(); ?>

Header PHP

 <!DOCTYPE html>
        <html lang="en" class="no-js">
            <head>

                <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
                <meta name="viewport" content="width-device-width">
                <meta name="apple-mobile-web-app-capable" content="yes">
                <meta name="apple-mobile-web-app-status-bar-style" content="black">
                <meta name="description" content="<?php bloginfo('description'); ?>">
                <title>SellGarrard301</title>
                <script src='https://www.google.com/recaptcha/api.js'></script>
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollify.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollify.min.js"></script>
                <?php wp_head(); ?>

            </head>
                <body>
                    <div class="container">
                        <header class="header-wrapper">
                            <p class="logo-text">Sell Garrard.com</p>
                            <div class="hamburger-helper">
                            <div id="menu-toggle">
                                <div id="hamburger">
                                  <span></span>
                                  <span></span>
                                  <span></span>
                                </div>
                                <div id="cross">
                                  <span></span>
                                  <span></span>
                                </div>
                            </div>
                            </div>
                            <nav class="menu-hide">
                                    <?php
                                                wp_nav_menu( array(
                                                    'theme_location' => 'header_menu',
                                                    'container'      => '',
                                                    'container_class' => 'menu-hidden',
                                                    'menu_class'     => 'menu-hide',
                                                    'menu_id'     => 'header_menu',
                                                    ) );
                                            ?>
                            </nav>




                        </header>

        <!-- end of header start of main content -->

Custom JS function

 $(document).ready(function(){

 $(function() {
      $.scrollify({
      section: ".section",

      });
 });

 });

All files and scripts are loaded when I check but I cannot find any information on how to get it to work?

UPDATED CONSOLE ERRORS:

                jquery.scrollify.js:45 Uncaught ReferenceError: jQuery is not defined
                at jquery.scrollify.js:45
                at jquery.scrollify.js:47
            (anonymous) @ jquery.scrollify.js:45
            (anonymous) @ jquery.scrollify.js:47
            jquery.scrollify.min.js:1 Uncaught ReferenceError: jQuery is not defined
                at jquery.scrollify.min.js:1
                at jquery.scrollify.min.js:1
            (anonymous) @ jquery.scrollify.min.js:1
            (anonymous) @ jquery.scrollify.min.js:1
            jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
            jquery-3.2.1.js?ver=4.8.3:3860 jQuery.Deferred exception: $.scrollify is not a function TypeError: $.scrollify is not a function
                at HTMLDocument.<anonymous> (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/custom.js?ver=4.8.3:134:7)
                at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:26911)
                at Object.add [as done] (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:27220)
                at n.fn.init.n.fn.ready (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:29326)
                at new n.fn.init (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:24411)
                at n (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:405)
                at HTMLDocument.<anonymous> (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/custom.js?ver=4.8.3:133:1)
                at mightThrow (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/jquery-3.2.1.js?ver=4.8.3:3583:29)
                at process (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/jquery-3.2.1.js?ver=4.8.3:3651:12) undefined
            jQuery.Deferred.exceptionHook @ jquery-3.2.1.js?ver=4.8.3:3860
            process @ jquery-3.2.1.js?ver=4.8.3:3655
            setTimeout (async)
            (anonymous) @ jquery-3.2.1.js?ver=4.8.3:3689
            fire @ jquery-3.2.1.js?ver=4.8.3:3317
            fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
            fire @ jquery-3.2.1.js?ver=4.8.3:3455
            fire @ jquery-3.2.1.js?ver=4.8.3:3317
            fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
            ready @ jquery-3.2.1.js?ver=4.8.3:3920
            completed @ jquery-3.2.1.js?ver=4.8.3:3930
            jquery-3.2.1.js?ver=4.8.3:3869 Uncaught TypeError: $.scrollify is not a function
                at HTMLDocument.<anonymous> (custom.js?ver=4.8.3:134)
                at j (jquery.js:3094)
                at Object.add [as done] (jquery.js:3140)
                at n.fn.init.n.fn.ready (jquery.js:3373)
                at new n.fn.init (jquery.js:2816)
                at n (jquery.js:76)
                at HTMLDocument.<anonymous> (custom.js?ver=4.8.3:133)
                at mightThrow (jquery-3.2.1.js?ver=4.8.3:3583)
                at process (jquery-3.2.1.js?ver=4.8.3:3651)
            (anonymous) @ custom.js?ver=4.8.3:134
            j @ jquery.js:3094
            add @ jquery.js:3140
            n.fn.ready @ jquery.js:3373
            n.fn.init @ jquery.js:2816
            n @ jquery.js:76
            (anonymous) @ custom.js?ver=4.8.3:133
            mightThrow @ jquery-3.2.1.js?ver=4.8.3:3583
            process @ jquery-3.2.1.js?ver=4.8.3:3651
            setTimeout (async)
            jQuery.readyException @ jquery-3.2.1.js?ver=4.8.3:3868
            (anonymous) @ jquery-3.2.1.js?ver=4.8.3:3888
            mightThrow @ jquery-3.2.1.js?ver=4.8.3:3583
            process @ jquery-3.2.1.js?ver=4.8.3:3651
            setTimeout (async)
            (anonymous) @ jquery-3.2.1.js?ver=4.8.3:3689
            fire @ jquery-3.2.1.js?ver=4.8.3:3317
            fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
            fire @ jquery-3.2.1.js?ver=4.8.3:3455
            fire @ jquery-3.2.1.js?ver=4.8.3:3317
            fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
            process @ jquery-3.2.1.js?ver=4.8.3:3671
            setTimeout (async)
            (anonymous) @ jquery-3.2.1.js?ver=4.8.3:3689
            fire @ jquery-3.2.1.js?ver=4.8.3:3317
            fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
            fire @ jquery-3.2.1.js?ver=4.8.3:3455
            fire @ jquery-3.2.1.js?ver=4.8.3:3317
            fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
            ready @ jquery-3.2.1.js?ver=4.8.3:3920
            completed @ jquery-3.2.1.js?ver=4.8.3:3930

Upvotes: 0

Views: 1371

Answers (1)

ProEvilz
ProEvilz

Reputation: 5455

header.php

remove 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollify.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollify.min.js"></script>

Open footer.php

find 

</body>

Add this directly above like so

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollify.min.js"></script>
</body>

Your problem is as I suggested, jQuery needs to load in on the page first, then load in scrollify. Making scrollify the very last thing to load in should resolve the issue. If not, then you need to do it the proper WP way by enqueing the script.

Upvotes: 1

Related Questions