jQuery code messing up rest of code

[Max]

Hi there!

This jQuery code as part of jQuery Waypoints messes up all the jQuery code below it, what’s wrong please? (By messing up I mean I don’t believe code below fires.)

Very many thanks for your help.

var waypoint = new Waypoint({
  element: document.getElementsByClassName('social-section-3'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.social-bg-tennis-video').get(0).pause();
          $('.social-bg-events-video').get(0).play();
      }
      if (direction === 'up') {
          $('.social-bg-tennis-video').get(0).play();
          $('.social-bg-events-video').get(0).pause();
      }
  }
});

var waypoint = new Waypoint({
  element: document.getElementsByClassName('home-section-5'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.home-bg-social-video').get(0).play();
      }
      if (direction === 'up') {
          $('.home-bg-social-video').get(0).pause();
      }
  }
});

var waypoint = new Waypoint({
  element: document.getElementsByClassName('coaching-section-3'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-private-video').get(0).pause();
          $('.coaching-bg-junior-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-private-video').get(0).play();
          $('.coaching-bg-junior-video').get(0).pause();
      }
  }
});
var waypoint = new Waypoint({
  element: document.getElementsByClassName('coaching-section-4'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-junior-video').get(0).pause();
          $('.coaching-bg-mini-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-junior-video').get(0).play();
         $('.coaching-bg-mini-video').get(0).pause();
      }
  }
});

[Senff]

Do you get any errors in the console or anything?

Is the Waypoint library loaded before this JS is called?

[Max]

Thanks for the reply @Senff much appreciated.
The Waypoint library isn’t loaded before, no – but another Waypoint action works fine even like this, and changing it hasn’t fixed the problem on its own sadly.

I Have found that I can add as many…

var waypoint_coachingsection3 = new Waypoint({
  element: document.getElementsByClassName('coaching-section-3'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-private-video').get(0).pause();
          $('.coaching-bg-junior-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-private-video').get(0).play();
          $('.coaching-bg-junior-video').get(0).pause();
      }
  }
});

…as I like and the code the Waypoints code works, although any unrelated jQuery below or above this code fails.

I also found if I add other of these code blocks for elements on other pages, the Waypoint code blocks for the other pages below the top code fail!

Also, I found this as the only (related) console error:
Uncaught TypeError: Cannot read property ‘top’ of undefined – jquery.waypoints.min.js:7

Any ideas please – thanks so much!

[Max]

I fixed this by using a different method of calling Waypoints which worked for my situation, eg.:

`
var waypoints = $(‘.coaching-section-3’).waypoint({
handler: function(direction) {
if (direction === ‘down’) {
$(‘.coaching-bg-private-video’).get(0).pause();
$(‘.coaching-bg-junior-video’).get(0).play();
}
if (direction === ‘up’) {
$(‘.coaching-bg-private-video’).get(0).play();
$(‘.coaching-bg-junior-video’).get(0).pause();
}
},
offset: ‘30%’
})
`

[Author]

Posts