Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by TzeYang Chew
TzeYang Chew
12,039 Points

how do i use plain javascript version of waypoints without using the waypoints library.

createWaypoints() { this.itemsToReveal.each(function() { var currentItem = this; new Waypoint({ element: currentItem, handler: function() { $(currentItem).addClass("reveal-item--is-visible"); }, offset: "85%" }); }); } }

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Do you mean you want to write your own code to get the same functionality? I assume you'd have scroll event handler and some code to check the current position and to call registered functions at the right time.

Since the library source is available, you might also want to look through it to see how it was implemented.

But I have to wonder, if the "wheel" is freely available, why re-invent it?

TzeYang Chew
TzeYang Chew
12,039 Points

Hi, Thanks for the reply, im just curious about how the code was implement.

TzeYang Chew
TzeYang Chew
12,039 Points
TzeYang Chew
TzeYang Chew
12,039 Points 
new RevealOnScroll($(".feature-item"), "85%");
new RevealOnScroll($(".testimonial"), "60%");

    var that = this;
    this.itemsToReveal.each(function() {
      var currentItem = this;
      new Waypoint({
        element: currentItem,
        handler: function() {
          $(currentItem).addClass("reveal-item--is-visible");
        },
        offset: that.offsetPercentage
      });
    });
  }
}

Hi, i have this code here above where this.itemsToReveal refer to the class in html . and this code here - this.itemsToReveal.each(function() { is looping through each class to have the animated scroll effect.

Can i know how do i write this line of code without jquery ?- feature-item.this.itemsToReveal.each(function() { I have try object.keys and for in loop but its not working.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

In most cases you can replace "something.each(function { //..." with: "for (item of something) {". Then where the first one used "this" you could use "item[0].