How can I pan/zoom HTML content? (ie. Google Maps, WordSquared)

I'm looking to pan/zoom HTML content on a page, much like Word^2 (wordsquared.com) but I can't find a jQuery plugin or anything else to help. Am I overlooking something simple? I'm really not sure wh开发者_运维技巧ere to start.

While unlike Word^2 and Google Maps, depending on your requirements this plugin just released for jQuery might be exactly what you're looking for:

Zoomooz.js

You can achieve the panning effect with some events and a little math.

Lets assume you have content on the page that is wider and higher than the window. The browser will show scrollbars so the user can see all of the content by moving the scrollbars. What you can do to make the panning effect is to hide the scrollbars and attach some events so that when the user drags anywhere over the document, you actually programatically move the scrollbars.

Here is a jsfiddle example (obviously needs improvements): http://jsfiddle.net/jFQEW/4/

You can hide the scrollbars by putting an overflow: hidden on your content element, and you can move the scrollbars with .scrollLeft and .scrollTop

Technically these are not being "zoomed". Those pages have Javascript event listeners that "listen" for certain events such as the mouse scroll wheel motion that, when fired, will execute functions that dynamically change the attributes of the content on the page. Google maps for example changes dimensions of the images, and then when the "zoom" effect is complete it replaces the images with higher-resolution.

http://jqueryui.com/demos/draggable/

WordSquared.com uses jQuery UI and streams in our content when the drag ends if the view needs to be refreshed.

We use the drag and stop events in 'draggable' to perform these checks and update the content.

Zooming is actually implemented (or not) by the browsers and kinda just works. To get google maps-ish implementation you would need to have image detail levels and blend between them. You can't catch the browser's 'zoom' event but you can get the events that are triggering the browser's zoom (mousewheel, multitouch-- search for additional jquery plugins) and do the custom zooming work yourself.

If you set widths, heights, padding and margin in ems, then you can shrink and enlarge the elements by changing the parent container font size with + / - buttons and some simple JavaScript functionality.

For zooming you can use:

$("#drawing").css("-webkit-transform","scale(0.75)");   // chrome

or

$("#drawing").css("zoom",75%); // CSS3