0

I'm not good with programming PHP and JS. But I'm trying to install and use Scrollify on my own theme for Wordpress. jQuery should also be loaded properly. Unfortunately I cannot figure out how to make scrollify work, mostly out of lack of understanding how things react to each other or are properly loaded.

As it seems, I can load scrollify with this code in my functions.php: 

function scrollify() {
    wp_register_script( 'jquery-scrollify', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollify' );

    wp_register_script( 'jquery-scrollifymin', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.min.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollifymin' );

    wp_register_script( 'Gruntfile', get_template_directory_uri() . '/js/scrollify/Gruntfile.js', array('jquery'));
    wp_enqueue_script( 'Grundtfile' ); } 

add_action( 'wp_enqueue_scripts', 'scrollify' );

My HTML structure is like this: 

<section id="portfolio" class="fullscreen" data-section-name="portfolio"></section>
<section id="about" class="fullscreen" data-section-name="about"></section>

Configuration in jquery.scrollify.js: 

    //section should be an identifier that is the same for each section
    section: "fullscreen",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    target:"html,body",
    standardScrollElements: false,
    setHeights: true,
    overflowScroll:true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
};

And the script in the Header: 

$(function() {
  $.scrollify({
    section : ".fullscreen",
    sectionName : "section-name"
  });
});

If you want to have a look at the page, the link is: http://kraftsy2017.ch.176-10-116-204.artemis.hostingmanager.ch

I would really appreciate your help, I'm feeling hopeless. Thanks.

Jean-Marc Durrer
  • 26
  • 6

1 Answers1

1

Looks like the $ isn't referencing jQuery on your page. Try this instead: jQuery(function() { jQuery.scrollify({ section : ".fullscreen", sectionName : "section-name" }); });

Luke Haas
  • 672
  • 2
  • 6
  • 16
  • Hi Luke, thanks for your time and quick look at my problem. I've changed your code, but the reference error still exists. Do you have another idea, how to fix this issue? If you don't have the time to look this deep into this problem, I can totally understand. Meanwhile I'm looking for an answer to this reference issue. – Jean-Marc Durrer Nov 13 '17 at 16:51
  • Now I've placed the script in the footer as it loaded before jQuery was loaded. And your tweak works now! Thanks alot. – Jean-Marc Durrer Nov 13 '17 at 16:57