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..
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 been developing a map using leaflet along with leaflet label plugin.
The plugin is working fine but on mobile devices it is not destroying the previous popup when another polygon touched.
You can check a demo here :
http://leaflet.github.io/Leaflet.label/
It would be very kind if anyone could help me to solve the problem with touch or find any other popup plugin with hover works in touch devices also.
Thanks in advance.
dwkns opened an issue in the Leaflet.label repository on GitHub. They also proffered an untested response which involved modifying the library. The plugin author hasn't yet replied.
One possible solution is to use L.Browser.touch to test for touch device support, and then bind a Leaflet popup for touch browsers and labels for non-touch browsers. Good luck!
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.
my goal is to build a short HTML/CSS3/JavaScript animation that will be plugged into an iPad web app. What I'm essentially after is a canvas (image) that will have several regions the user can tap to zoom to and get additional info in a popup (overlay box) for each.
I can code HTML/CSS prety well but my JavaScript skills a a bit behind.
I was wondering if there is any sort of software/toolkit that I can use to achieve what I'm after. I did look into Sencha Animator (the interractivity I'm after seems to be missing), PhoneGap and jQTouch dont have the animation capabilities (except for few sliding/fading transitions).
Any suggestions?
Indeed! Adobe released one in DW CS5. I've personally never tried it but here is the link to the announcement:
http://blogs.adobe.com/designandweb/2010/05/moving_the_web_forward.html
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.