Waypoints.js with wordpress

Question

I'm developing a wordpress site and I need to trigger the user scroll in order to fire different events and hide/show some images, so Waypoints.js is perfect for it.

However I've tried different attempts to make it work with no results. I add it as a function on functions.php file, like this:

function waypoints_method() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
    wp_enqueue_script('waypoints', get_stylesheet_directory_uri() . '/vendor/waypoints/lib/jquery.waypoints.min.js');
}
add_action( 'wp_enqueue_scripts', 'waypoints_method' );

And then in the javascript:

jQuery(document).ready(function($) {
     $('.waypoint').waypoint(function() {
            alert('You have scrolled to my waypoint.');
        });
}

The only thing I get it is to console.log when resizing the browser. So, what I need to do in order to make it work? Or, there is any alternative to Waypoints.js that I could use?

Thanks!

WordPress loads jQuery in "noconflict" mode, so you can't use $() unless it's inside an IIFE. Try changing your code to use jQuery('.waypoint').waypoint(...) — Dave Ross
– Dave Ross, Commented May 4, 2016 at 16:43
Sorry, I edited my code; I actually load jQuery this way an all the other jQuery scripts are working, so I guess it has nothing to do with it? Thank you anyway, @DaveRoss ! — ohmmho
– ohmmho, Commented May 4, 2016 at 17:17
Are your paths correct? Do the files actually load correctly? — WillardSolutions
– WillardSolutions, Commented May 4, 2016 at 17:47
@EatPeanutButter I think they do but don't really know, I'm not a php-wordpress expert, I guess Waypoints.js is working somehow but not properly if I can get the alert fired sometimes when resizing the browser. — ohmmho
– ohmmho, Commented May 4, 2016 at 17:52

Sven · Accepted Answer · 2017-12-13 17:42:52Z

0

Waypoints is using $ to access jQuery, but with WordPress you need to refer to jQuery as jQuery.

I found that I had to use the no framework version of Waypoints to get it working with WordPress.

edited Dec 13, 2017 at 17:42

Sven

1,5483 gold badges35 silver badges59 bronze badges

answered Apr 4, 2017 at 6:16

Brady O'Halloran

1

Sign up to request clarification or add additional context in comments.

Comments

Dejw · Accepted Answer · 2023-04-14 10:07:56Z

0

I got stuck into the same issue for several hours today.

The solution is described - here (same issue on stack).

edited Apr 14, 2023 at 10:07

answered Apr 14, 2023 at 10:07

Dejw

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Waypoints.js with wordpress

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related