Menu
I need to ZOOM AND PAN a div element with CSS3
with the ability to mix zoom and pan,
so you could e.g. zoom-in, pan, zoom-in some more, pan, zoom-out etc.
ZOOMING has been SOLVED in this tread:
CSS3 zooming on mouse cursor
with an absolutely BRILLIANT answer! here:
CSS3 zooming on mouse cursor
Now the question is: How to combine PANNING with the ZOOMING (from the answer above) ?
So far, I tried using jQuery UI draggable http://jqueryui.com/draggable/ like this:
<div id="graphics">
$("#graphics").draggable();
$("#graphics").draggable('enable');
but it "jumps" when I start dragging the image when it is zoomed-in.
I think a good answer to this could help quite a few people as this is quite basic functionality and yet there is no solution for it on the web that I could find after quite extensive search!
696
Panning and Zooming with Google Maps To move the map click and hold the left mouse button and drag the map to a new place. You can also move the map North, South, East or West using the pan arrows. These can be found on the top left hand corner of the map.
Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.
UI controls. The Maps API offers built-in UI controls that are similar to those found in the Google Maps application on your Android phone. You can toggle the visibility of these controls using the UiSettings class which can be obtained from a GoogleMap with the GoogleMap.
Solved it :) It was actually suprisingly simple! #graphics must have: "position: relative" instead of "position: absolute"
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
