4

I'm making a component for a webpage that will need zooming in and out at the location of the mouse cursor. The de-facto standard way I know of doing this is via Ctrl+Mousewheel... but I can't use that. The reason is that Firefox doesn't have any mousewheel support at all (though there are hacks with scrolling), and most other browsers intercept this particular gesture to perform their own zoom of the whole webpage - which I can't override. Also, simple scrolling with the mousewheel needs to be there too, because the data (especially when zoomed in) will be larger than the viewport.

As such, what other widely accepted mechanism is there to perform zooming at the mouse location without compromising standard mousewheel functionality?

| improve this question | |
  • I'm pretty certain firefox supports capturing mousewheel events. Is there a particular version you have to support that doesn't capture these events? – zzzzBov Dec 29 '11 at 17:05
  • According to Quirksmode - no, it doesn't. And my own testing shows the same. The best that can be done is to try and emulate it with scrolling events. – Vilx- Dec 30 '11 at 8:57
2

A mechanism used in some cases is simply to click with the mouse at the point about which you want to zoom in/out and then drag the mouse up to zoom in and down to zoom out.

Typically a 2D view can be click-dragged via the left mouse button, so usually the click-drag to zoom would be off the right mouse button. In some applications a modifier like ALT is used - I guess it depends on the relative priority and ease of access required for a given scenario.

The good thing is it's achieved via a single action and it's essentially an invisible slider that has no limit on length. Even if your cursor hits the top of the screen you can keep going.

It's best combined with real time scaling of the view so that you can see how much you're zooming in/out by, and so that the user experiences a smooth and synchronized sense of direct manipulation. It's one step closer to direct manipulation than using a slider which often feels one step removed from the end result.

I'd also suggest some visual feedback to the user if they hit zoom limits - similar to the way Android apps glow or bounce when you scroll/swipe too far.

The not-so-good thing is it's not obviously intuitive or easily discoverable without actually trying it and so would require teaching the user.

| improve this answer | |
  • 1
    Just as a sidenote - Opera uses right mouse click-drag for gestures, while other browsers usually pop up the context menu at the release point. – Roger Attrill Dec 30 '11 at 10:28
1

With google maps a double left click is a zoom in and a double right click is a zoom out.

| improve this answer | |
  • Cute. :) Though in Opera rightclick is unavailable for Javascript. OTOH I can say that Opera isn't supported, so that's not so much a problem. What is a problem is that I've already planned for doubleclick to do something else (though to be fair - I hadn't mentioned that, so it's a good suggestion). – Vilx- Dec 29 '11 at 14:27
1

Can you use the same magic-y keyboard shortcut goodness that Google uses in several of their apps? https://www.google.com/reader/ui/660982038-en-keyboard-help-tearoff?hl=en

Just to see what happens, I hit the + key in Reader and it will set the zoom level for whatever feed you have currently selected. The label adjusts to the feed's current zoom size:

In Google Maps, scrolling the wheel up or down over a particular portion of the map will zoom in with that area centered, so there has to be a way to determine the user's mouse location in a web app as well:

If it's possible, you can combine these two methods and allow the user to hit + or - and zoom at their current mouse location.

| improve this answer | |
  • Well, the + and - keys are pretty much on the far side of they keyboard, unless you're left-handed (and even then people tend to keep their hands off of numpad). But having dedicated zooming keys is a good idea. Might not be too intuitive though. – Vilx- Dec 29 '11 at 14:23
  • It may be the Lazy in me talking, but I regularly use the keypad Enter key with my mouse hand's thumb. My mouse is right next to my keyboard, so this works for me, at least. Incidentally, Google also accepts = as plus when using the main keys on the keyboard. – Karen Dec 29 '11 at 14:27
  • Heh, interesting, I don't do that. :) Still, if you have to coordinate mouse at the same time while hitting the key with your thumb, it could become... awkward. :) – Vilx- Dec 29 '11 at 14:28
  • It's mostly when I know it'll be faster to move my thumb about 1.5 inches than to try and hit whatever tiny button someone's asking me to click on. – Karen Dec 29 '11 at 14:31
1

CTRL+Mousewheel is the default control to change magnification of content in general and it's used primarily for enlarging content in case of visual disabilities. Don't ever change its function.

Firefox supports pure mousewheel zooming via JavaScript. Google Maps has multiple options for zooming: double-clicking, mousewheel (intercepted from default scrolling action), and even multi-touch zooming gesture. Dig through their scripts to see how exactly they do it.

| improve this answer | |
  • Multitouch is largely unavailable on desktop systems (my primary if not only target); mousewheel works in Maps because they don't need to scroll things; Double-clicking is one-way (how do I zoom out?) and besides - I'll already use it for other things (though to be fair - I hadn't mentioned that, so it's a good suggestion). – Vilx- Dec 29 '11 at 14:25
  • It's more important that you didn't mention that the whole page is scrollable, too. Google Maps iFrames work only with the zoom slider and double-clicking. Zoom-out is accomplished with RMB double-click, which isn't obvious but can be mitigated with instructions on top of the zoomable area. – dnbrv Dec 29 '11 at 15:21
0

OK, so I think that I've decided to use a dedicated popup slider whenever you push SHIFT. And you won't have to drag it manually either - just hold SHIFT and move your mouse. Perhaps not the most obvious thing in the world, but not difficult to master either.

To be fair however, I won't accept my own answer, but whichever other answer is best.

| improve this answer | |
  • A more user-friendly solution would be SHIFT + mousewheel but you still need to have the instructions present in the interface. – dnbrv Dec 29 '11 at 15:24
  • Will you add a way to show users that they need to use Shift to get the zooming function? If not, it will be hidden and they could easily miss it. – Todd Sieling Dec 29 '11 at 16:57
  • I'm pretty certain there will have to be instructions. Shift+wheel isn't much better, btw, because at least Opera uses that as back/forward. Haven't checked other browsers. – Vilx- Dec 30 '11 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.