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.
Related
I am developing an hybrid android app. I need to apply pinch zoom for a particular content section. The text size should be increased on pinch zoom. I tried many methods but all of them are suggesting with image zoom instead of text zoom. Can any one help me please.
That's not trivial. You can detect the pinch zoom state with jQuery.documentSize (which I have written). The plugin is plain JS, and despite the name, you can use it without jQuery, too.
But that's only half the solution. You need to listen to a "pinch zoom" event which unfortunately doesn't exist – at least on the web. And the "resize" event doesn't work for it. According to Peter Paul Koch ("The Mobile Web Handbook"),
... most browsers fire the resize event when the layout viewport is resized, but not when the visual viewport is resized (that is, the user zooms). This rule is not absolute, and to make things more complicated the several methods of resizing the layout or visual viewport may not all fire a resize event.
So unless you have access to an event in the Android app context which doesn't exist on the web, the only option seems to be polling, ie checking $.pinchZoomFactor() in regular intervals.
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 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...
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 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)