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.
534
questions
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' %}"...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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>
{% ...
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 ...
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 "...
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. ...
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: '....
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 ...
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 ...
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-...
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 $...
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="...
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 ...
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/...
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(...
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:
// ...
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{
...
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{
$...
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):
...
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 ...
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:
&...
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 ...
-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, ...
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 ...
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 ...
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 ...
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='...
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 ...
-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")....
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 ...
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 ...
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 ...
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 ...
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 '...
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: ...
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 ...
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>
:...
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’...
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
...
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 ...
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 ...
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 ...
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 ...
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. ...
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());
})