So there seems very little around about this. I need to be able to detect pinching in the Android browser with Javascript. Not with use of a plugin (except jQuery). The only site I have seen this implemented is Google Maps.
Lets just say for now I want to be able to pinch inside of a div and it will log when I do so.
Struggling to find any examples.
Check hammer.js http://eightmedia.github.com/hammer.js/ it looks like transform gesture may do what you want.
Related
Google has now implemented a very unique pinch zoom for their images. The viewport meta tag does not allow user scaling or zooming, and as you would expect the resulting content is not pinch-zoomable on a mobile touch device. The image, however, is pinch zoomable. The image is the only part of the page that zooms, and the viewport scaling never changes. Does anyone know what javascript framework they are using to accomplish this? Is it publicly available?
I don't think their version is opensource, however this library is pretty nice:
https://openseadragon.github.io/
Not sure what google uses but there is a jQuery library that does this. It's called
panzoom
I have tried a few different Javascript tools/hacks/frameworks that emulates touch events on a PC, but none does it as flawlessly as Chrome's developer tools. How is it done? Can it be done as good as that with Javascript?
Let me give you an example to illustrate what I mean: I have built a webapp, exclusively for touch screens, containing a bunch of draggable elements. Now I also want to make it available for ordinary web browsers. The simplest way to do this is to use a small Javascript framework that maps mouse events to touch events, like touche.js. The problem with this approach is that if I drag fast, the mouse pointer will move out from the draggable, which then immediately stops. When I use Chrome's built-in emulated touch events (in Developer Tools), this never happens. I can drag as fast as I want. The code is exactly the same, except for the framework.
Do you have any ideas why this is happening, and if there is any remedy to the problem?
Probably on a lower level than javascript. Try a search for touchstart in the chromium code base and you can see that it's mostly C++ code :(
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.
On my website, which is loaded in the webview, there is a map. There are also java scripts that detects double tap for zoom, dragging etc. But is it possible to have a javascript that detects the use of pinch zoom ? there are several examples of it working on an iphone, and on my website there is a script for the pinch zoom but it is only working on iphone.....
Is it possible to get it to work on Android ?
Thanks
When you would like to scale web content in you WebView and enable pinch and zoom, I prefer the simple android way.
webView.getSettings().setBuiltInZoomControls(true);
and you can even hide the controls if you are using API 11 or higher
webView.getSettings().setDisplayZoomControls(false)
There's an open-source library called android-pinch that you can include in your project to enable pinch zoom if you switch your WebView to a WebImageView. Here's an example of usage...
// create the WebImageView object from xml
WebImageView img = (WebImageView) findViewById(R.id.main_pic);
// fetches the image in a background thread
img.setImageFromURL("http://www.mysite.com/mypicture.jpg");
// enable pinch-zoom abilities on the image
new PinchImageView(img);
It's not exactly in a webview, but in any layout, that I wrote a piece of code for detecting pinch in an Android view.
It took me days to find out a solution for this, so I made my own custom pinch gesture detector.
You can see it in Github: http://github.com/luisfer/Neckar
Hope it helps.
This excellent tutorial shows how to implement the Pinch gesture.
I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.