1

I need a cross browser way of capturing the right mouse click, preventing the default context menu and making it where when the user drags the mouse they can pan the contents of a div. This is largely similar to Google maps in that they will grip the contents and drag to see what they want.

No external libraries please.

I am already capturing the events, and know that this will prevent default actions: 

  if (evt.preventDefault)
 {
        evt.preventDefault();
 }
    else
 {
        evt.returnValue = false;
 }

But this doesn't prevent the context menu AFAIK.

Edit: I really am unsure about how to prevent the context menu and what the best way to manipulate the scroll bars would be? examples would be great

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Shaunwithanau
  • 575
  • 5
  • 13
  • @Robert Harvey, for example when move the map around in Google Maps, that's called panning. – Tatu Ulmanen Apr 13 '10 at 14:57
  • @Robert Harvey, yes like Tatu said, I want users to be able to hold the right mouse button and relative to where they move it while still pressed they can navigate the contents (ex. a very large image) of a div – Shaunwithanau Apr 13 '10 at 15:03

2 Answers2

0

This tutorial on scrollbar parallax scrolling might be of some use;

http://inner.geek.nz/javascript/parallax/

Mathew
  • 8,203
  • 6
  • 37
  • 59
  • Well I don't need things going at different speeds but this does look helpful to the second part of my question. It looks like speed ratio is just a matter of trial and error until you find what works? – Shaunwithanau Apr 13 '10 at 15:00
  • 1
    Your other comment makes things clearer; I was imagining a background pan rather than a gmaps effect. I would say 1:1 mouse movement to div pan, but if the div is small then a faster pan speed might be kinder to your users. If the user is "gripping" and pulling the content (like gmaps) then a 1:1 ratio makes sense from a UI perspective, as it simulates the physical act of pushing the content about on a tabletop. – Mathew Apr 13 '10 at 15:20
  • I checked and it is "gripping" rather than relative to the fixed point where they initially clicked that I am trying to reproduce. So 1:1 does make sense. I assume the easiest thing is to just use ScrollBy()? Is this cross browser? – Shaunwithanau Apr 13 '10 at 15:27
0

So I'm using oncontextmenu="return false" which I know can be over-ridden by user preference but for those people they can use the menu bar options at the top of my app.

To handle the scrolling I am just modifying div.scrollLeft and div.scrollTop

Shaunwithanau
  • 575
  • 5
  • 13