0

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/jquery-scrollify@1.0.17/jquery.scrollify.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/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
Paul Stephen Davis
  • 153
  • 1
  • 2
  • 16
  • Have you checked console for errors? I'd have thought you'd need to include jquery **first**, then scrollify – ProEvilz Nov 13 '17 at 13:48
  • Further more, `I cannot find any information on how to get it to work` - Have you tried their site that lists everything including multiple examples? https://projects.lukehaas.me/scrollify/#methods – ProEvilz Nov 13 '17 at 13:50
  • Hi yes I have looked everywhere?! At a loss! I have added the console errors if that helps? – Paul Stephen Davis Nov 13 '17 at 13:54
  • can you post your header menu html here? – Vel Nov 13 '17 at 13:56
  • already have the html is header php above or do you want the output from developer? – Paul Stephen Davis Nov 13 '17 at 13:57
  • @PaulStephenDavis How could you not think to post that massive error with 'scrollify' mention multiple times within it? How can you be 'at a loss' whilst knowing you have a huge error? – ProEvilz Nov 13 '17 at 13:58
  • yes. output from developer – Vel Nov 13 '17 at 13:59
  • sorry was being a dumbass i had the sc ripts loading before the wp head tag so was loading too early, all working now! Thanks for the help in prompting errors, new to all this – Paul Stephen Davis Nov 13 '17 at 14:00
  • at a loss in reference as how to rectify the error? You can have a huge error and know it but still be at a loss as of how to fix it – Paul Stephen Davis Nov 13 '17 at 14:01

1 Answers1

1

header.php

remove 

<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.min.js"></script>

Open footer.php

find 

</body>

Add this directly above like so

<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/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.

ProEvilz
  • 5,310
  • 9
  • 44
  • 74