CODEWITHSUNDEEP
javascriptjquerywordpresselementorjquery-scrollify
Austris Balodis
Austris Balodis

Reputation: 31

How to use Scrollify.js with Wordpress and Elementor?

I am totaly new to web development and programming, I want to use Scrollify on my WP site.

So I want to load Scrollify only in one page, so I added this to functions.php

function load_js_assets() {
if( is_page( 26 ) ) {
    wp_enqueue_script('scrollify', 'https://goodlifesoft.com/scrollify.js', array('jquery'), '', false);
}

}

I added a message in console to see that the file has been loaded.

I load the latest version of jquery in the header.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I call the Scrollify function in footer.php

<script>
    $(function() {
      $.scrollify({
        section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
      });
    });
  </script>

And this is the message that I get in the console. Contents from console

enter image description here

This is working for me in JSfiddle https://jsfiddle.net/Balodis/w697stj5/60/

I would be very thankfull if someone could point out what I am doing wrong.

Thank you!

Upvotes: 3

Views: 1295

Answers (2)

confusedpancake
confusedpancake

Reputation: 31

Found this thread when trying to implement something similar on my website and got it working - here's what I did:

  1. I downloaded the scrollify.js script and uploaded it to my wordpress child theme files.

  2. I called the script using the child functions.php

add_action('wp_enqueue_scripts', 'scroll_script');

function scroll_script() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri().
        '/jquery.scrollify.js',
        array('jquery')
    );
}
  1. Finally, I added this code to my footer
<script>
    jQuery(function() {
      jQuery.scrollify({
        section : ".panel",
        sectionName : "data-id",

        interstitialSection : "",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: true,
        overflowScroll: true,
        updateHash: true,
        touchScroll:true,
        before:function() {},
        after:function() {},
        afterResize:function() {},
        afterRender:function() {}
      });
});
</script>

Of course, you will have to edit the "Section" class to the elements you want to scroll between in your own page / layout.

Upvotes: 3

Austris Balodis
Austris Balodis

Reputation: 31

If you also run into this issue add jquery in front of the function.

    <script>
    jQuery(function() {
  jQuery.scrollify({
    section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
    sectionName : "data-id"
  });
});
      </script>

Hope this helps for someone.

Upvotes: 0

Related Questions