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

Question

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 where to start.

Solution 1

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.

Solution 2

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

Solution 3

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

Solution 4

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.

View more solutions

Comments

[MANnDAaR]

Excellent!! How About iFrame Content Scrolling ? Can we achieve same Panning effect for iframe content ? I'm looking for a solution for this question stackoverflow.com/questions/8802450/…

[Jodi Warren]

Edit: Apologies, I'm wrong, zoom is supported in at least modern Webkit browsers. Original text: Zoom is only a valid property on IE7 and below. Certainly not CSS3.