Waypoints with non-jQuery/framework build

Question

I've used waypoints.js a few times before to great success. Using code like the example below:

$(document).ready(function() {

    $('.section').waypoint(function() {
        $(this).toggleClass('in-view');
    },
    {offset: '65%'});
});

That was created using version jQuery Waypoints - v2.0.3. I'm trying to use the same code on a website I've inherited which uses Waypoints 4.0.1 but the above code doesn't work and I think that's because the script is the non-jQuery version.

So my question is, how would I format/write the above code in a noframework build?

I struggle enough with jQuery so code the the example below is totally foreign to me!

var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

How would I write my jQuery script in what I guess is plain javascript? Can someone shed some light on this please?

Thanks in advance!

dferenc · Accepted Answer · 2017-11-27T16:17:41.017

3

The equivalent would be something like the following:

var waypoints = document.querySelectorAll('.section');
for (var i = waypoints.length - 1; i >= 0; i--) {
    var waypoint = new Waypoint({
        element: waypoints[i],
        handler: function(direction) {
            this.element.classList.toggle('in-view');
        },
        offset: '65%',
    });
}

The Waypoint documentation is quite descriptive here: http://imakewebthings.com/waypoints/guides/getting-started/

Update: Codepen example

edited Nov 27 '17 at 16:17

answered Nov 26 '17 at 17:46

dferenc

7,918
12
41
49

None of that makes sense to me (at the minute) haha! For example the `querySelectorAll`, I don't know where I'd have got that from! I suppose when you're not used to Javascript this probably isn't the easiest place to start. Thanks a lot for the reply. I'll give it a shot and let you know how I get on! – user1406440 Nov 26 '17 at 17:53
1

Actually, in this case you could also use `.getElementsByClassName()` –which might be more self-explanatory– instead of `.querySelectorAll()`. Both of these calls return an array-like object, containing the selected tags. – dferenc Nov 26 '17 at 18:02
Ah ok, what about the `.length - 1; i >= 0; i--) ` bit? The rest from there _kinda_ makes sense. `element` being where you declare the variable you've defined earlier (waypoints[i]) followed by the function you want applied to it? – user1406440 Nov 26 '17 at 18:48
1

Regarding the for loop: it is just a way of writing it. You will find more about that on the following link. https://stackoverflow.com/questions/17484227/javascript-improved-native-for-loop As for the `this.element`: this is how `Waypoint` implented the `handler` callback. The `this` keyword is a reference to the Waypoint instance, which keeps a reference to the DOM element with its `element` property. So yes, `this.element` equals to `waypoints[i]`. – dferenc Nov 26 '17 at 19:29
I couldn't get the code to work with my script so I think it might be best if I create a codepen later on and update my post. – user1406440 Nov 27 '17 at 16:02
I just have updated the answer, as I noticed that a comma was missing from the end of the handler callback definition. A codepen is on the way. – dferenc Nov 27 '17 at 16:11
That's ace, looks like it works a treat! I'll give it a good test tomorrow. Thanks again! – user1406440 Nov 27 '17 at 19:36

Waypoints with non-jQuery/framework build

1 Answers1