Response title
This is preview!
Move this topic
swipe up and down on iPad scrolls to exact div position
in Using jQuery
•
6 years ago
I need to understand what approach to take to get the up / down swipe
events on iPad to function the same as click events that scroll exactly
to a div position. If you view the page I've set up and click on one
of the green circle buttons on the right it will scroll down or up the
page to a absolute positioned div on the page and trigger a function to
change the button color.
swipping on the iPad will scroll right past any target or marker.
I need it to stop at the div scrollTop() position.
For the moment I'm scrolling the html,body. I know if I
enclosed my divs in a wrapper and disable iPad scrolling and and touch
swipe plugging maybe I'll get what I want. But I'm lost in the
myriad of information available about which approach to take. can
anyone suggest the best method to start from?
sample:
1
Replies(21)
Bootstrap scrollspy.js
strikes me as useful for this. I'm sure there are other similar
scripts and plugins to be had.
Leave a comment on watusiware's reply
Hmmm
so far this looks like a great tool to change the menu style on
scrolling. I'm really looking for a tool that will cause the swipe
up and down events on iPad to lock into position and stop when
reaching a specific div. Not sure If I'm explain this correctly.
I'm playing around with scrolSpy however. Maybe something will
come of it
thanks
Leave a comment on jaimmy's reply
That's just the example they used.so far this looks like a great tool to change the menu style on scrolling
You
get a callback when it scrolls past the waypoints you designate, and
you can do anything you want in the callback.
the swipe up and down events on iPad
There's
no such thing as "swipe up and swipe down events". Do you
mean page scrolling?
You'll
need to use a
scroll
event
callback, and
preventDefault()
for conditions where you want to block the scroll. You might use
scrollSpy to help you set a flag for use on the
scroll
callback.
Leave a comment on watusiware's reply
d'oh! You're right!
ScrollSpy has a rather narrow purpose. When you pass an anchor, it
updates the corresponding link to "active".
I just assumed it worked the way I'd make it work if I'd
have written it! ;)
Do a search, though, as I am sure I've come across a plugin
that is more suitable for what you want.
It would be super-handy to have some plugin that will give you
callbacks when waypoints are passed, based on a selector or selectors
you provide as a parameter to the plugin!
Leave a comment on watusiware's reply
Duh!
Now, why did I call them "waypoints" above? I suppose
because I vaguely remembered this plugin!
Leave a comment on watusiware's reply
hi
just for the record I'm a total novice, and don't have a
clue what I'm talking about. Having said that I just found exactly
what I was looking for:
Works perfectly on my iPad - oddly enough the scrolling function
doesn't work at all on desktop. The buttons function it just
doesn't scroll on mouse scroll.
I'm going to strip this code down and try and fix that issue.
Leave a comment on jaimmy's reply
OK, that is quite different.
What they've apparently done there is to block scroll completely.
Then, they detect touch gestures (which would otherwise scroll
the page if scroll were not blocked!)
You won't be able to get it to work on desktop. Unless your
desktop has a touchscreen.
It's not that there is no scrolling on desktop. It's that
there's no scrolling at all. It blocks scroll and detects touch
movement and when it sees a vertical swipe, it will scroll to the
next "slide".
But there is no ability to scroll to any in-between position, and
it does not follow your finger position. When you swipe far enough, it
"triggers" the change.
This is a popular meme in web design. Do a search, and you will
find hundreds (or at least dozens!) of variants on this idea.
Leave a comment on watusiware's reply
I just decided I don't care about desktop. I really only need to get
this working on iPad. I'm going to concentrate on that. I agree this
is a very popular style that I've seen a million times. It took me
all day to find a working source code I could work from though.
thanks for your input. I'll post some questions I get bogged
down trying to add my content.
thanks!
Leave a comment on jaimmy's reply
i believe what you want is when a user swipes up or down , he goes to
the previous or next section respectively , just like when a user clicks
on the navbar , to go to a particular section. , i beleive jQuery mobile
seems to have that feature
HERE
.
Also , i don't think scrollspy is going to accomplish , what
you want .
Leave a comment on gautamx07's reply
jQuery Mobile swipe event is for horizontal
swipes, not vertical
.
If you allow scrolling (which the vast majority of website do -
they would only block if a fixed, responsive full-page design)
vertical swipes are a logical problem. When the user swipes
vertically, what do they mean? Do they mean to scroll, or do they mean
to make a swipe gesture? Do you read their mind to determine that?
There a similar issue with scrollable sections inside of scrollable
page on touchscreens. When the user scrolls inside of the section,
what did they mean to accomplish? Unfortunately, no matter what you
do, at least half the time you have an unhappy user. And most the time
I see it used, the developer hasn't made any decision at all, and
so they BOTH scroll and it is just an unusable mess.
Leave a comment on watusiware's reply
Gautamx07:
I had seen this but didn't look closely enough at
it. Thanks! I'll look into this stuff.( love your Mr Robot
icon)
Watusiware:
I just
discovered that the previous mouse scrolling issue
mysteriously works now that I've posted the exact same
code-pen Fullpage.js on my server
weird but good news.
I'm off and running...
Leave a comment on jaimmy's reply
I just discovered that the previous mouse scrolling issue mysteriously works
There
must be something intrusive about CodePen that breaks it.
I
tried it on your site. Only mouse wheel. Not drag. :(
Half
of users would likely not use mouse wheel to scroll. Some users
wheel. Some users drag.
BTW,
jQuery 2.1.4 won't work for old IE 6,7,8 if that matters to you.
If it does, you can use 1.11.3.
Leave a comment on watusiware's reply
I was just going to ask to you to compare code-pen page and my server.
but never mind. I see what you mean about 'drag' not
working on mine either, only wheel scroll. I'm using apple magic mouse.
thanks for IE info. I'll keep that in mind. For now since this
is all my small brain can digest for the moment, I'm going to
concentrate on getting the IOS version working then work backwards
from there to see how it performs on other browsers.
Leave a comment on jaimmy's reply
Since this IS such a popular thing right now, I would go look for a
plugin or script that has a maintained source-code repository. See if
the project is active.
Browser makers are like Lucy from Peanuts. When you are not
looking, they will move the football!
Find a project that will maintain the code for new browser
versions. Otherwise, you take that responsibility yourself. Are you
able to solve browser problems as they arise in the future?
I would seldom use something from a CodePen, blog post, etc.
without an active project behind it to maintain it, unless it is
something very trivial, a "technique" I will adopt, etc.
This is in the category where I would look for a maintained project.
Leave a comment on watusiware's reply
thanks for the heads up.
I also found the documentation about
fullPage.js on webdesign.tutsplus:
and GitHub:
I'll keep a lookout for this
Leave a comment on jaimmy's reply
Great!
Go get the code from the repo. It is almost certainly out-of-date
on the CodePen.
You can check the Issues on GitHub and see about any problems.
Leave a comment on watusiware's reply
But I would use the upstream repo, not the TutsPlus fork! The latter may
or may not be maintained in the future.
Leave a comment on watusiware's reply
And that isn't even it!
On Wall Street you follow the money.
With open source code, you follow the forks!
This looks like the real deal:
It has a nice home page as well:
You have to read carefully between the lines. Those other two
repos are just demos showing how to use the plugin.
Get the plugin source directly from the repo of the plugin author.
You had a fork of a demo of a plugin. Don't rely on hand-me-downs!
Leave a comment on watusiware's reply
perfect
just downloaded this latest link version and will start
with that one
thanks so much!
Leave a comment on jaimmy's reply
AMAZING!
now i just downloaded AGAIN from this latest alvarotrigo
site and demo page
Thanks so much for your enthusiastic help!
Leave a comment on jaimmy's reply
I've deleted a bunch of replies I made to this post. I think I will
post a new question based on this issue.
I've got the page working (with swipe scroll on iPad.)
however I cannot figure out why an animation I added fails to
work:
my new version :
the animation technique explained by
author:
Leave a comment on jaimmy's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jaimmy's question
{"z7664639":[14737000006482929,14737000006482937,14737000006482939,14737000006482941,14737000006482947,14737000006482951,14737000006482953,14737000006482961,14737000006482965,14737000006482967,14737000006482969],"z36736186":[14737000006483985],"z26426690":[14737000006485808,14737000006485821,14737000006485839,14737000006485845,14737000006486463,14737000006486465,14737000006482963,14737000006482971,14737000006482973,14737000006490289]}