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.
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
how do you implement pinch to zoom for a cordova android project
I have a iframe in which I am loading my src
and I want to implement pinch to zoom on the iframe because it is occupying the whole screen
To be precise you can achieve pinch to zoom in two ways
If you open the image in a native container which allows zoom and pinch - the performance is far better, here you might need a Cordova plugin which can do that for you, i found https://github.com/keensoft/FullScreenImage-Cordova-Plugin but i think it only opens up the image in full screen natively but doesnt allow pinch and zoom , you can try
If you dont use a plugin which means the image is shown inside the webview, for which you either write code for touch events or simply use hammer.js which allows this.
I'm developing an app with Phonegap for IOS. I would zoom and move an image contained in a box div (overflow hidden) with the finger: multitouch for zoom in and out and touchmove for move the image.
Is it possible? and how?
I'm looking with Google for the solution but I don't find it!
There are a couple ways to do it.
Probably the easiest way is to use iScroll4's pinch/zoom feature: http://cubiq.org/iscroll-4
You should check this tutorial about Multitouch and HTML/JS. It works with PhoneGap applications too. http://www.appliness.com/multitouch-with-hammer-js/
this one is a nice simple tutorial in using iscroll4 for image zooming:
http://iphonedevlog.wordpress.com/2013/07/03/adding-picture-zooming-to-your-phonegap-app-with-iscroll4/
helped me a bit in my phonegap app. now, if i could only figure out how to use it with an svg. hmmm..
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.
I have a flash application written in actionscript 2.0 that shows vector architectural maps and works perfectly on common web browsers. There are many interactions with javascript functions called by user events on the webpage, such as zooming to a certain x,y point. This event is usually accomplished via the mouse wheel.
Now I have to make sure that the thing works on tablet pc, in particular the Galaxy Tab. The first thing I have to fix is that, obviously, there is no mouse wheel and the user naturally tries to pinch zoom the flash application, with the result of zooming the entire web browser.
What I need is to listen to the multitouch gesture and, when a pinch zoom event is called, disable the default zooming event and call a javascript/flash function that allows my flash app to zoom only the objects that need to be zoomed: in few words, the browser stays still and only a part of the flash zooms in or out.
Consider that I am totally new to Android and that I already have working javascript functions to call flash object functions for the zooming purpose, so I just need to connect them to some android things that tell me when the user tries to pinch zoom in and when he tries to pinch zoom out (and possibly the x,y point of zoom).
Thanks a lot for your help!
Max (Italy)
Passing a JavaScript call from android to flash is a very very hard task as far as I know.
Not because of android (follow this tutorial http://code.google.com/p/openmobster/wiki/JavascriptBridge to pass a JavaScript call to a web page ), but because of flash securities for local content.
It is not too much of an issue on a local computer, but the flashplayer on android is very very buggy.
I think the best is to try to find an other solution if possible...