Comments (5)
Hello Jirawat,
the propagation of the touch events is being stopped immediatelly after the slide handler executes as the mousemove binding returns false a ceices the event. There is one exception though - Reel detects direction of the touch move and if the direction is rather vertical, it allows the propagation of the event to allow page scrolling. This wa a very legitimate request from iPhone users, where the Reel instance tends to fill significant portion of the screen and makes scrolling the page quite annoying. This exception also doesn't apply to multi-row or orbital setups, where the event is prevented in any case.
Can you maybe show me your setup? I might be able to asses your problem deeper if I have a chance to interact with it directly on my iPad. You can use my e-mail (petr at vostrel dot cz) if you can not share it here publicly.
.pisi
from reel.
Yes, I was just attempting the same thing. On the iPad, you don't really want the viewport to be scrolled when you're 'reeling' the image, and sometimes this happens accidentally (maybe something to do with the direction detection not being strict enough). But I found the fix...
Find this line in the plugin...
.bind(_touchmove_, function(e){ t.trigger('slide', [finger(e).clientX, finger(e).clientY, true]); return !(opt.rows > 1 || opt.orbital || get(_reeling_)) })
Change to
.bind(_touchmove_, function(e){ t.trigger('slide', [finger(e).clientX, finger(e).clientY, true]); return !(true || opt.rows > 1 || opt.orbital || get(_reeling_)) })
You're basically inserting true ||
into the return statement so that it always returns false and does not bubble up the event list.
Simon.
from reel.
Thanks Simon.
I also found at the Start function.
Change ....
.bind(touchstart, function(e){ t.trigger('down', [finger(e).clientX, finger(e).clientY, true]); })
To ....
.bind(touchstart, function(e){ t.trigger('down', [finger(e).clientX, finger(e).clientY, true]); return false })
By adding False, it's solve my problem.
from reel.
Although Simon's solution does the job, Dan's solution appears to be better and cleaner in terms of what he wants to do. In the touchstart
binding the return false
is intentionally ommited, so that Reel can eventually let the underlaying system handle the touch sequence when it is detected to be rather vertical than horizontal. So returning false in the binding completely steals the touch interaction and the viewport won't be scrolled in any circumstance.
Maybe you are right and the direction detection should be fine adjusted. Right now it calculates an angle from the touchstart position and 45° is the threshold.
from reel.
OK, thanks for the feedback pisi. I might use that code instead then. Probably better to do it on touchstart than on touchmove.
from reel.
Related Issues (20)
- Dragging within a range of sequence
- Reel.js is not working in Chrome when add next and previous button.
- data-loops = 'false' does not work on rows
- possibility to ude it merging some images to compose the shown one
- touch support HOT 1
- Reach event rotates one frame backwards before rotating correctly
- python
- sensitivity on touch movement
- responsive and Ajax - In russian is love)))
- Jquery reel larger than container
- how to stop image cache
- Dimension(s) of the target image unknown Ab HOT 3
- ReferenceError: jQuery is not defined
- Image Request Loop Issue HOT 3
- Using reel js object animated by a slider (jquery ui) inside a book of moodle. It doesn't work
- Not working properly on mobile Safari? HOT 8
- 360 spinner doesn't work well on mobile HOT 6
- Chrome: Jerky or not smooth scrolling if it is placed at about 3000px or below in height
- Implement in Vuejs
- Uncaught TypeError: Cannot use 'in' operator to search for 'length' in 50, latest JQuery jquery.min-3.6.0.js not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reel.