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
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.