Dynamically target multiple HTML elements from one Waypoints.js Constructor

Question

I've long been using the excellent JS plugin called Waypoints.js to change CSS classes based on a user's viewport position. Now I'm trying to dynamically create these waypoints.

I've come up with two unsuccessful approaches.

Given this HTML:

<div class="emp-question-set fade-up" id="emp-question-set-1"></div>
<div class="emp-question-set fade-up" id="emp-question-set-2"></div>
<div class="emp-question-set fade-up" id="emp-question-set-3"></div>

Approach 1: Generate the waypoints using a for loop and getElementByID

// Number of question areas
var questionCount = $('.emp-question-set').length;

// Setup variables
var waypointName, selector, selectorjQuery;

// Start at 2, leave the first item to load normally
for (var i = 1; i <= questionCount; i++) {
  waypointName = 'questionsRollIn' + i;
  selector = 'emp-question-set-' + i;
  selectorjQuery = '#emp-question-set-' + i;

  waypointName = new Waypoint({
    element: document.getElementById(selector),
    handler: function(direction) {
      if (direction === 'down') {
        $(selectorjQuery).addClass('fade-up-active');
      }
      if (direction === 'up') {
        $(selectorjQuery).removeClass('fade-up-active');
      }
    },
    offset: '70%'
  });
}

Approach 2: Generate the waypoints using getElementsByClassName

  questionsRollIn = new Waypoint({
    element: document.getElementsByClassName('emp-question-set'),
    handler: function(direction) {
      if (direction === 'down') {
        $('emp-question-set').addClass('fade-up-active');
      }
      if (direction === 'up') {
        $('emp-question-set').removeClass('fade-up-active');
      }
    },
    offset: '70%'
  });

Hopefully one of you can help, thanks in advance.

David J · Accepted Answer · 2017-09-22 12:37:38Z

5

+50

I think the problem with your first approach is about a wrong understanding how JavaScript closures working. This is sometimes confusing when coming from a language like Java or C#. Please note that your local variables are somehow global to the closure where the Event handler lives. Finally while executing the Event, your local variable 'selectorJquery' may contain something unexpected. You can verify this by logging the contents of the variable into the JavaScript console.

The second approach probably can't work because you seem to try to bind a set of elements where the js API just might expect only one element.

You can try like this (untested)

// just in case we need the waypoints later on
var waypoints = [];

$('.emp-question-set').each(function(index, value) {

    var that = $(value)

    var waypoint = new Waypoint({
        element: value,
        handler: function(direction) {
            if (direction === 'down') {
                that.addClass('fade-up-active');
            }
            if (direction === 'up') {
                that.removeClass('fade-up-active');
            }
            },
            offset: '70%'
    });
    waypoints.push(waypoint);
});

This is somewhat similar to your first Approach. The idea here is to iterate over all Elements with class .emp-question-set and to create a waypoint object for each. The important Thing is that we make sure that every handler live in his own closure. And so no variable collision can happen.

edited Sep 22, 2017 at 12:37

answered Sep 8, 2017 at 19:29

David J

1,5649 silver badges15 bronze badges

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

1 Comment

Sahib Khan Over a year ago

I upvoted the answer for the closure concept, but the solution you gave still does not solve the closure problem. At the end of the loop that will have the last question object

Sahib Khan · Accepted Answer · 2017-10-26 17:09:51Z

0

I up voted the first answer for the closure concept, but it seems like it does not actually solve the problem. Doing the following should be solving your problem.

$('.emp-question-set').each(function(){
     questionsRollIn = new Waypoint({
     element: $(this), //this is now jquery loop context(this question)
     handler: function(direction) {
       if (direction === 'down') {
         $(this.element).addClass('fade-up-active'); //this is now the waypoint context
       }
       if (direction === 'up') {
         $(this.element).removeClass('fade-up-active');
       }
     },
     offset:"10%" //this can be modified based on how sensitive you want it
    });
});

$(this.element) should be your selector for changing the css class

edited Oct 26, 2017 at 17:09

answered Oct 26, 2017 at 16:23

Sahib Khan

6026 silver badges19 bronze badges

6 Comments

serraosays Over a year ago

Using this avoids the closure problem?

Sahib Khan Over a year ago

I edited the answer for you to give you the Idea what I wanted. Yeah by this I meant the current waypoint object

serraosays Over a year ago

How do you get around making functions within loops in this model? Seems like it still wont work. Also - I need to keep jQuery out of this implementation. It needs to be straight JS.

Sahib Khan Over a year ago

jquery should not be your problem. You can say document.getElementsByClassName("emp-question-set").forEach(function(){ and the above code here. instead of $(this.element) use this.element}); I have tested the above solution and it works fine.

Sahib Khan Over a year ago

BTW in your initial post you did use jquery

|

Collectives™ on Stack Overflow

Dynamically target multiple HTML elements from one Waypoints.js Constructor

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related