CSS3, ZOOM + PAN (google maps style)

7
votes

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!

1
csszoomingcoordinate-systemspancoordinate-transformation
Solved it :) It was actually suprisingly simple! #graphics must have: "position: relative" instead of "position: absolute" – Wojciech
You can answer and accept your questions so make sure to add your comment as the correct answer so the questions will be resolved/closed – Timmy O'Mahony

1 Answers

1
votes

Solved it :) It was actually suprisingly simple! #graphics must have: "position: relative" instead of "position: absolute"