8

I have a element on my website which is freely resizable. This is done by 4 handles on the edges. On hovering these handles and while resizing the element I want to show the respective resize arrows.

Currently I implemented this behavior by setting the css cursor style of the body/root to these arrows. The problem about it is the limit to the client area of the browser window. It would be visually more consistent and less confusing, if the arrow cursor would be visible everywhere while the mouse is hold down.

Google Maps is doing the same thing with their hand cursor while moving the map. So my question is how to achive this effect on my own.

My current (relevant) source:

function startObjectScaling(e){
    e.stopPropagation();
    e.preventDefault();
    document.documentElement.style.cursor = this.style.cursor;
    window.addEventListener("mouseup", stopObjectScaling, false);
}

function stopObjectScaling(e){
    e.stopPropagation();
    document.documentElement.style.cursor = '';
    window.removeEventListener("mouseup", stopObjectScaling);
}

[...]

var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
    handle.addEventListener("mousedown", startObjectScaling, false);
    handle = handle.nextSibling;
}
6
  • 2
    For me on Chromium, the Google Maps cursor only stays a hand if I go out of the window without going over any other part of the page; otherwise, it reverts to the normal cursor. I think this means that you probably can't get a 100% solution to your problem, unfortunately. Commented Nov 1, 2010 at 23:25
  • I tested it in Firefox and Chrome and there it worked just fine - it's so or so better than my current solution.
    – V02460
    Commented Nov 2, 2010 at 0:20
  • You're asking to control something beyond the scope of your control - there's no way this is a reasonable thing to ask, let alone try and reliably achieve.
    – annakata
    Commented Nov 3, 2010 at 16:34
  • Isn't it reasonable in the restricted case of dragging? (exact: mouse down in client area and moving out while holding down the mouse button) And wouldn't it be smart to implement it in browsers (I think they did already...)?
    – V02460
    Commented Nov 11, 2010 at 9:53
  • You've got two responses telling you it won't work, and one telling you it doesn't, and you're still trying to tell us we're wrong? Interesting...
    – jcolebrand
    Commented Nov 11, 2010 at 13:06

2 Answers 2

5

There is a special function implemented in the more modern browsers for this purpose. The name is setCapture(). It redirects all mouse input to the object the method was called on. Now a simple css cursor definition on that element is enough to archive the desired effect. After mouse release this effect stops (for security for sure). It can also be stopped manually by calling releaseCapture

example:

<style type="text/css">
#testObj {
    /* this cursor will also stay outside the window.
       could be set by the script at the mousedown event as well */
    cursor: hand;
}
</style>

[...]

document.getElementById('testObj').onmousedown = function(e){

    // these 2 might be useful in this context as well
    //e.stopPropagation();
    //e.preventDefault();

    // here is the magic
    e.target.setCapture();
}
0
-1

if the arrow cursor would be visible everywhere while the mouse is hold down.

You're relying on a potential OS quirk to create your behavior. This is not something you can ASSUME will always hold true. However, once you start a mousedown, the cursor at that point will normally stay the same, no matter where you move the mouse to, UNTIL something else (another window that you may mouse over? the desktop? a system-interrupt?) changes the cursor.

In other words, don't rely on this behavior. Find something else that will work for you. If you must do this, re-examine your business requirements.

3
  • 2
    This is a wild guess and I didn't find any information about it with a quick search, but I think it's not an OS quirk, but instead a behavior the browser vendors (yeah, it's consistent by all of them) implemented - just like the mouse coordinated update outside the client area if you hold down the left mouse, but not the right. They did it for those kinds of applications to work properly.
    – V02460
    Commented Nov 11, 2010 at 9:40
  • I still stand by it being an OS quirk on account of cursor drawing is supposed to be managed by the GDI or the WM. If I mouse over a window with a spinning lock I get the spinner. I've not purposely tried to test this on any system, so if you build a working testbed that includes Gnome, KDE, Windows, MacOS and Chrome, Firefox, Safari and IE with cursor changes in each application and drag-out-of-bounds-with-cursor-change and drag-out-of-bounds-without-cursor-change please be sure and let me know. Until then, I'm going to go with my understanding.
    – jcolebrand
    Commented Nov 11, 2010 at 12:56
  • Also I'm going to point out that if it's consistent by all of them, then you're probably wrong. Browser vendors can't even get element spacing 100% consistent. You expect them to get mouse behavior consistent?
    – jcolebrand
    Commented Nov 11, 2010 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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