8

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!

Community
  • 1
  • 1
Wojciech
  • 159
  • 2
  • 9
  • 1
    Solved it :) It was actually suprisingly simple! #graphics must have: "position: relative" instead of "position: absolute" – Wojciech Feb 10 '14 at 22:36
  • 4
    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 Feb 28 '14 at 07:56

1 Answers1

1

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

Wojciech
  • 159
  • 2
  • 9