Questions tagged [jquery-waypoints]

Waypoints is a library that allows code to be executed whenever the user scrolls to a specific point on the page.

Filter by
Sorted by
Tagged with
0 votes
1 answer
326 views

Django. Infinite Scroll on Scrollable Table is not working

I have an scrollable table in one of my templates defined like this: <script src="{% static 'js/jquery.waypoints.min.js' %}"></script> <script src="{% static 'js/infinite.min.js' %}"...
southernegro's user avatar
1 vote
1 answer
746 views

Trigger anime.js animation when element enters viewport with waypoints

I'm triggering an animation on multiple elements when they are visible in the viewport with waypoints but I run into some problems with animations not working correctly. What is happening here is that ...
Joel Alexandersson's user avatar
2 votes
1 answer
684 views

Waypoints infinite for loading chat messages when scrolled to top of scrollable element

I'm trying to load chat messages when the user scrolls to the top of the div (the div is scrollable, so the context isn't the window, it's the div). Also when the page loads the div is automatically ...
Bratix's user avatar
  • 61
0 votes
0 answers
99 views

Errors when using Waypoints JQuery Library

I am trying to run Waypoints on a Webflow website. This is the code that I have inserted on the site to load the libraries and run a test to console log something when the element is scrolled into ...
glxtch's user avatar
  • 1
1 vote
0 answers
130 views

HoWhy jquery "waypoints" doesn't work locally?

I've tried to use the waypoint library with jquery. I expected to see an alert when the user reaches the purple div. Quite oddly, it only works on the snippets in StackOverflow, but not locally. Does ...
Jonathan's user avatar
0 votes
3 answers
920 views

React Infinite Loading hook, previous trigger

Im trying to make a hook similar to Waypoint. I simply want to load items and then when the waypoint is out of screen, allow it to load more items if the waypoint is reached. I can't seem to figure ...
notElonMusk's user avatar
2 votes
1 answer
3k views

How to scroll up history in React chat page

*Trying to show a chat history with infinite reload similar to Skype or any popular chat app In a chat page. If my chat messages limit is 10 messages. And the chat has 30. It will show latest 10 when ...
notElonMusk's user avatar
0 votes
0 answers
266 views

hx-get not fire after infinite scrolling

In each post I have this code : {% if result.has_url %} <div hx-get="{% url 'post:load-url-preview' result.pk %}" hx-trigger="revealed"> </div> {% ...
Andi Fathul Mukminin's user avatar
0 votes
1 answer
349 views

Use Waypoints to add the same class for multiple elements

I want to use jQuery Waypoints to add a class to an element when it is visible in the viewport. It is simple to target one element, but I can't figure out how to use it with multiple elements. It ...
arvanderkamp's user avatar
0 votes
2 answers
92 views

add and remove function not working in jquery

I tried to add a secondary navigation bar that is fixed to the top-right of the webpage created and only appears when we scroll the page little bit down. this navigation is contained in the "...
sravanTG's user avatar
  • 604
0 votes
1 answer
130 views

Custom JS only working on the first page of Paginated items

I'm using Waypoints Infinite Scroll to render posts. Using JS I added an event listener on the delete button on 'DOMContentLoaded'. This all works fine on the first page, but not on subsequent pages. ...
Ewan Willsmer's user avatar
2 votes
1 answer
497 views

Animate elements with the same class individually with waypoints.js and anime.js

I have this script that animates a title when it enters the viewport with viewport.js and anime.js: $(".title").waypoint(function() { anime.timeline({loop: false}) .add({ targets: '....
Biels's user avatar
  • 342
0 votes
1 answer
509 views

How to import Waypoints from my Package Code

Hi I need to use Waypoints (I learn about and download the WAYPOINTS https://github.com/imakewebthings/waypoints/zipball/latest) in my Website and I have the next issue: In my JS folder I have the ...
Ricardo Sauceda Rojas's user avatar
0 votes
4 answers
935 views

Waypoint.Infinite is not a constructor

Hi everbody i have a problem about django infinite scroll paginations. I cant solve it. home.html <div class="infinite-container"> {% for post_display in post_data %} <div ...
rufai demir's user avatar
0 votes
0 answers
104 views

Get post with infinite scroll not working in django

Js code:- im having trouble to load the post when i added following js code. i have get and post method defined in view but none of works. var infinite = new Waypoint.Infinite({ element: $('.infinite-...
optimists's user avatar
  • 191
0 votes
1 answer
66 views

My waypoint function has undefined behaviour when the user refreshes the page after scrolling past it

I have a navigation bar and I've set its position to change to fixed when the user scrolls down past it and vice versa when the user scrolls up past that point by using the following waypoint: var $...
Biggles-2's user avatar
1 vote
1 answer
444 views

Why Django JQuery Infinitescroll not working (Cannot set property 'Infinite' of undefined, Waypoint is not defined)

I want to make an infinite scroll but it's not working and throws errors in the console: Here is my HTML: {% extends 'base.html' %} {% load static %} {% block imports %} <link rel="...
Frederick's user avatar
  • 450
0 votes
2 answers
277 views

How to Change Background-Color on my Fixed Navigation Menus when Scrolling Using Waypoints(JS ES6)

Im trying to change the background-color of my navigation menus(navbar) when someone scrolls it using waypoints. Problem was, it didn't work. Because "I think", its because of the video ...
wachakit's user avatar
0 votes
1 answer
160 views

How do I reset an animation using the d3.js and waypoints.js libraries?

I am building a data visualization using both d3.js (v3) & waypoints.js (scrollytelling library). While the animation works fine when the user scrolls down, I would like my animation to reset once/...
will's user avatar
  • 511
1 vote
0 answers
132 views

Changing the Color of a Point on a Scatter Plot by Scrolling

I have a scatter plot which uses three different CSV's. The following Javascript controls the placement of points from one of these CSV's: svg.append('g') .selectAll("dot") .data(...
Noah's user avatar
  • 27
0 votes
1 answer
177 views

Waypoints in WordPress theme only works when Developer's tool is opened

I'm trying to include Waypoints (http://imakewebthings.com/waypoints/) in my WordPress theme without using their plugin (premium plugin). So, I downloaded the necessary files and enqueued them: // ...
Marcelo Xavier Vieira's user avatar
0 votes
2 answers
120 views

Background image not changing properly with 'Offset' in Waypoints.js

Here is some Javascript and CSS from my program: <script> var $body = $('body'); $body.waypoint(function (direction) { if (direction == 'down') { $body.addClass('body2'); } else{ ...
Noah's user avatar
  • 27
0 votes
0 answers
39 views

Classes not being added or removed properly in JQuery

Here is a piece of code in my project: <script> var $dipper = $('body'); $dipper.waypoint(function (direction) { if (direction == 'down') { $dipper.addClass('body2'); } else{ $...
Noah's user avatar
  • 27
0 votes
1 answer
3k views

Waypoints.js waypoint is not a function

I'm getting the console error: Uncaught TypeError: $(...).waypoint is not a function FYI: It is a Blogger template, which uses XML. I have included the files like so (only these two .js files): ...
Xarcell's user avatar
  • 2,011
0 votes
0 answers
169 views

Display element just once only on scrolling up or down when in viewport (waypoints)

I'm using jquery waypoints (http://imakewebthings.com/jquery-waypoints/#docs) to check if an element is the view of the browser I want to display element just once only on scrolling up or down when ...
chouaib achache's user avatar
0 votes
1 answer
455 views

Cant figure out infinite scrolling with Waypoints

Trying to apply infinite scrolling using Waypoints but cant seem to get it working. I have the following scripts loaded in my base.html after downloading them and saving in my static folder: &...
tsmith41094's user avatar
0 votes
1 answer
85 views

Repeating same animation for `odd and even `div` sets

I'm trying to become familiar with jQuery waypoints. I was wondering if there is anyway for me to simplify the following code. I tried to do it by checking the even/odd for item-* and wrap it inside a ...
Efe's user avatar
  • 179
-1 votes
1 answer
407 views

JS no longer working after WordPress update - Uncaught TypeError: $ is not a function

I updated a website I am working on to the latest WordPress last week. None of the custom JS is working anymore and I can't work out why. Even if I remove it in sections to try and isolate the issue, ...
Mr Toad's user avatar
  • 206
6 votes
2 answers
708 views

How to animate *independently* several sections of progress bars in Bootstrap?

I have some Bootstrap code which works perfectly well to animate a section of progress bars when it is viewed by the user. However it animates all the progress bars in the page instead of animating ...
michael's user avatar
  • 371
0 votes
1 answer
187 views

Counter continues to count (incorrectly) when div is in view

I have a number counter and I'm using waypoints to run the counter when the #ticker div is in view. The counter starts when the div is in view, so that's not the issue. But here is a use case of my ...
Freddy's user avatar
  • 655
3 votes
1 answer
2k views

Waypoints counter counts up (then down) and doesn't execute script when div is in immediate view

I have a number ticker which counts up. For demo purposes, this is how the counter is meant to work. It counts up and then stops. Now, I'm trying to get the ticker script to execute when the #ticker ...
Freddy's user avatar
  • 655
5 votes
1 answer
5k views

$(...).counterUp is not a function WordPress

Unsure why $(...).counterUp is not a function. Waypoints is enqueued after Counter-up. WP core JQuery is loaded before both of them. View source ordering: <script type='text/javascript' src='...
Freddy's user avatar
  • 655
0 votes
1 answer
656 views

How to scroll to specific element using the Infinite Scroll With Django?

When I initially load the page, It loads 10 items(1,2,3...10) and after scrolling down I am getting another 10 items(11,12,13,...20). But I need to directly scroll to the 12th element. I am using the ...
Jisha Techversant's user avatar
-1 votes
1 answer
410 views

How can I scroll to specific element using the waypoint scrolling?

The #2 id of an element only loads after scrolling down because I can't get it using getElementById("#2"). //JS code $(document).ready(function() { $('html, body').animate({ scrollTop: $("#2")....
Jisha Techversant's user avatar
0 votes
1 answer
1k views

How to send scroll events to parent component when anchored element's are in view React JS

I am using React JS React-scroll in order to scroll to view certain elements based on Nav click . But i also want to emit an event when we manually scroll and hit the element Update as the question ...
Rahul Singh's user avatar
  • 19.1k
0 votes
1 answer
152 views

Waypoints - Trigger function for THIS element and not others with same class name

I'm trying to have an animation play every time a class is in view. I'm using Waypoints and the website is horizontal scrolling. The code I have fades out the class photo. I want it to trigger on each ...
Andrew Handley's user avatar
4 votes
1 answer
440 views

Trigger effect on one div when another div has 'bottom-in-view' using JS or jquery waypoints

I am using jquery waypoints(though I am happy to use JS). I am trying to adjust the z-index or hide a div when a different div hits the offset 'bottom-in-view' (comes into view at the bottom of the ...
Mr Toad's user avatar
  • 206
1 vote
2 answers
535 views

Script will not enqueue

In addition to one other script, I am tying to enqueue the waypoints script in my functions.php file for Wordpress. I can't work out why the first script works but the second (waypoints) script will ...
Mr Toad's user avatar
  • 206
0 votes
1 answer
133 views

Waypoint to fire 30px from bottom of screen

I am trying to fire a waypoint when a section is 30px from the bottom. I tried duplicating the waypoint below and setting an offset of (calc 100vh-30px) but it did not work. I see Waypoints has a '...
Mr Toad's user avatar
  • 206
2 votes
0 answers
80 views

Multiple Animations when a Waypoint is triggered

I would like to trigger following animation when a waypoint element is triggered (a simple bar chart): colored div changes width from 0 to 500px second div containing text is fading in Problem: ...
Christian Schellenberger's user avatar
1 vote
1 answer
763 views

reactjs waypoint import issues

I am trying to incorporate the jquery waypoints module. I am experiencing ALL of these issues in every attempt to use the module in reactjs.-- in this case I get an each of undefined - but I have ...
The Old County's user avatar
0 votes
1 answer
268 views

Using waypoints for scroll on animation

Been struggling to replicate a css animation on scroll using waypoints.js This is the animation: https://codepen.io/equinusocio/pen/KNYOxJ <h1 class="reveal-text"> I'm here. </h1> :...
invrt's user avatar
  • 689
0 votes
1 answer
717 views

How to Accomplish Adding Class to ONE item at a time (WayPoints)

I have this nice Waypoint.js scrolling list that when you scroll down and hit a certain percentage from the target (window), it changes the font style and adds an arrow to the list item. Right now it’...
Birdie Golden's user avatar
2 votes
1 answer
1k views

How to target an item for animation when it hits the WayPoint div

I am hoping you can help me out with understanding how jQuery Waypoints works. The Goal Scroll down to the specified div with id of #targetPoint Once hit, trigger animation for element #smooth-logo ...
Birdie Golden's user avatar
1 vote
2 answers
156 views

Is there a way to in WayPoints to say offset from actual website top vs the current top of the browser window?

I have a logo that starts in with a basic SVG animation. When a user scrolls down it fires off another animation that pushes the logo sideways and shows part of the logo. When you scroll back up, the ...
Birdie Golden's user avatar
3 votes
0 answers
114 views

Is there a way to animate the 3 icons of the page only when in viewport?

From the webpage: http://supply54.herokuapp.com/ there are 3 icons that I would like to animate when scroll into view. However, I have tried multiple way of code, I do not know how to: + loop the code ...
Chai Chong Teh's user avatar
1 vote
1 answer
3k views

How to get element to transform progressively based on scroll position

I am attempting to use waypoints for two specific functions. To identify if a user is scrolling up or down and the container comes into view. This is not working. The second thing I am trying to ...
Paul's user avatar
  • 3,348
1 vote
0 answers
1k views

Mapbox GL JS flyTo triggered by scroll position not always working

I am trying to use Mapbox GL JS to create a map that updates (including location, style and filters) as text moves on and off screen. As in this tutorial I have created an array containing the ...
rpearce's user avatar
  • 96
0 votes
2 answers
10k views

Play a Lottie / Bodymovin animation on scroll on an HTML web page

I have been searching multiple forums looking for a solution to this problem- I am trying to code multiple lottie animations to play when each animation enters the browser window on an HTML web page. ...
Jaron Johnston's user avatar
0 votes
0 answers
155 views

Jquery waypoint index equals always zero

I am trying to get the index of the type (here: h2). But when I scroll it is always 0. $("h2").waypoint(function(e) { alert($(this.element).index()); })
Tom Senner's user avatar

1
2 3 4 5
11