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.
538
questions
0
votes
0
answers
43
views
waypoint is not a function
I'm trying to use waypoints and console gives me this error:
Uncaught TypeError: jquery$1(...).waypoint is not a function
I was trying everything and nothing works...
I'm including waypoints after ...
0
votes
0
answers
38
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
38
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
330
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
509
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
120
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
149
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
0
answers
46
views
Using Waypoints/Inview with jQuery to repeat same command on all sections
My JS/JQ knowledge is very limited though I managed to make the basic function work I wrote this according to some tutorials and it works
var section = $('section')
section.waypoint(function() {
$('...
0
votes
0
answers
111
views
How to use multiple infinite-scroll in a page in django
I have recently done Infinite Scroll With Django pagination & using Waypoints on a card on HTML, On the same page I have another card & I want to implement the same on the 2nd card , The ...
0
votes
0
answers
25
views
Ajax Infinite scroll on fixed element does not work. Can I change the window reference to the element?
Let me tell you the problem.
Picture 1
I need a fixed element as you can see in picture 1. The context flows there. I use django for backend.
I want to use infinite scroll and if I don't use overflow-...
0
votes
2
answers
77
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
0
answers
104
views
JS, CSS Using A Link To Add/Remove a Class to Open/Close a Div
I have been working on making a div slide left and right when a waypoint is reached, which is working great. However, I would like to add a link to make the div slide left and right when it's clicked ...
0
votes
1
answer
47
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
238
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
192
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 ...
-1
votes
3
answers
484
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
72
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
45
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
296
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
215
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
139
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
88
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
121
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
91
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
38
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
2k
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
85
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
374
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
67
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
377
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
593
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
105
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
1k
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
4k
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
484
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
328
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
620
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
99
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
336
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
1
answer
350
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
98
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
71
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
557
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
103
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
703
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
137
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
96
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
2k
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 ...