Im looking for (if possible) javascript libraries/plugins to provide swipe events.
However I am not after the simple detection of a swipe, for example what jqTouch provides. I wish to create behavior similar to that of the images viewer on the iPod devices. So for example you drag left or right to go to the next image. You have to drag the image over 50% of the way and let go and it will snap to the next image. If you do not drag 50% of the image, it just snaps back to the original.
Any advice appreciated. Thanks.
I think you might be looking for something like the Carousel component in Sencha Touch (view on iPad/iPhone or Chrome/Safari). This has the behavior you want built in. [I work for Sencha]
Here is a standalone solution for your problem:
http://swipejs.com/
The more general solution to javascript swipe events can be found here:
https://github.com/eikes/jquery.swipe-events.js
Related
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
I've tried a few libraries and Jquery plugins for sliding "pages" through the viewport using touch gestures, but none of them have "physics" similar to the iOS homescreen.
My goal is to assign a three-finger gesture that works on both touchscreens and touchpads that will simply move through a set of "pages" horizontally in realtime, and when the touch is released, "snap" to the currently most-visible page in the viewport. Just like the iOS homescreen.
SwipeView will give you that. It's an infinite scroller that only loads three pages at a time. It's very quick (the company I work for uses it for one of their products.)
You'll need to customise it to work on three fingers rather than just one. If you need any help using it, I'll be glad to help =)
Currently what I'm trying to do is rotate an image such as a chair or a table and when user
touch the image and drag upward or downward, they will be able to see the top and bottom of
that chair or table. Can someone give me a solution or any reference which can help me to
fulfill this task? Thank you very much in advance!
If you are using jQuery Mobile (I'm assuming you are because of the tags you applied to your post), try to play with Touch events. Specifically, try taphold.
jQuery mobile >
For the touch and drag, you can use touchstart/touchmove/touchend events. You can easily find documents of touch events from Apple's developer website. Both iOS and Android support touch events.
Because touch and drag is a gesture, you might want to see if there is any library implemented this gesture. A gesture is a combination of touches with restrictions. Of course you can define a gesture with touch events and a lot of JavaScript code, but it would be easier to reuse what's been written and tested by others. See if you can find anything useful in jQuery Mobile, Sencha, or Pointer.js.
Image rotation can be done with CSS3 transform. You can easily get information about transform property from Apple's developer website or just a Google search. Use 3D transform instead of 2D when available, because in most devices 3D transform is hardware accelerated while 2D is not.
Have you seen yahoo's ipad/tablet home page? The swipe effect for flipping through headlines is impressive. I have seen some workarounds in jquery (using the cycle plugin + the touchwipe plugin) but these all simply detect user gesture and then run the x- absolute position animation, rather than actually track the user's gesture. Know of a solution similar to yahoo's?
Found the solution: http://cubiq.org/iscroll-4
Used the "snap-to" option to re-create the carousel effect.
Swipe JS is a good one. If this is the effect that you are looking for - http://swipejs.com
Not sure, but there is jQuery Mobile.
I am playing around with Sencha Touch, especially with examples like http://dev.sencha.com/deploy/touch/examples/
However I am faced with a problem, when using the component the scale is set on the iPhone and the user cannot scroll the page or zoom in or out.
How may I disable these settings as I would like to have the carousel on a page which can be scrolled, and zoomed in/out.
Thanks.
[Sencha person] You can't zoom in or out of a Sencha component. Having fixed UI Chrome is one of the reasons to even use a UI framework (otherwise you'd might use a simple mobile-optimized web page).
You can have a scrollable area within a carousel, but you might want to consider whether that's really the best UX, since the carousel is already a scroller (it just scrolls in fixed increments) Take a look at touchstyle.mobi/app for an example of a data-store backed carousel.
I could be wrong, but it seems to me that the goal of sencha is to make full screen apps, so it seems logical that you cannot zoom/scroll the page ?
There are methods and plugins for zooming if you want.
Carousel ImageViewer (plugin) - Zoom feature
Pinch-to-zoom in panels
Pinch emulator (plugin)