Mouse won't change (onmousedown="this.style.cursor='different'")

Csaba2000 · Sep 11, 2003

I have set onmousedown to change the cursor, but this setting is ignored
(IE 5.5; NN 6.1 on Win 2K Pro) until the mouse is either moved or the
mouse button is released. On Opera 7.01, the setting seems to be ignored
completely, even when I try with window.setTimeout.

So my two questions are: (1) Most important: Is there anything I can do
so that I don't have to wait for the next mouse event before the cursor
gets repainted. (2) Why is this not working for Opera at all?

The page below can also be found at http://csaba.org/demos/revert.htm

Things I have tried include window.setTimeout for the cursor change,
putting in a <STYLE> section and trying to change the cursor by means
of changing the class, faking a mouse event by putting in a fireEvent to
simulate a mouseMove. Same behaviour as above for all attempts.

This problem also happens on the other side. That is, in a situation
where I have changed the mouse cursor on the down click (subsequently
to moving the mouse) and then I want to revert it on a onmouseup, I
should move the mouse before the cursor changes. That's not nice.

Thanks for any tips,
Csaba Gabor from New York

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">
<TITLE>Cursor changing demo</TITLE>
</HEAD>
<BODY bgcolor=gold style="margin-left:5%;margin-top:10%">
<DIV style="border:blue 1px solid"
onmouseout="this.style.cursor='auto'"
onmouseover="this.style.cursor='se-resize'"
onmousedown="this.style.cursor='move'">Click and drag</DIV>
<BR><BR><BR>
If you move the mouse over the DIV then its type should change to 'se-resize'.
<BR><BR>
If you now click (and hold) without moving the mouse,
the cursor should change to a 'move' type.
In Opera 7.01 the cursor type does not change at all.

In both IE 5.5 and Netscape 6.1 I either have to release
the mouse button, or move it (with the button still
clicked) in order to get the cursor to change. This does
not seem reasonable.
</BODY>
</HTML>

Csaba2000 · Sep 12, 2003

Ahem,

I have figured outsomething for IE and Netscape.
It's not a particularly nice solution (because it represents a large
computational overhead for the browser), but so far on my
smaller test cases it seems to be working on still mouse down
events (without mouse movement).

Replace the onmousedown line as follows:
onmousedown="this.style.cursor='move';window.resizeBy(1,0);window.resizeBy(-1,0)"

Sadly, it has not made a difference for Opera.
In Netscape 6+, the overhead of the two window.resizeBy calls may be bypassed
by using, instead, window.setCursor('move')

Csaba

Richard Cornford · Sep 12, 2003

Csaba2000 said:
I have figured outsomething for IE and Netscape.
It's not a particularly nice solution (because it represents a large
computational overhead for the browser), but so far on my
smaller test cases it seems to be working on still mouse down
events (without mouse movement).

Replace the onmousedown line as follows:
onmousedown="this.style.cursor='move';
window.resizeBy(1,0);window.resizeBy(-1,0)"

Yuk! I haven't tried it but if the problem is getting IE to redraw the
cursor you might find that toggling the visibility property of the
element that the mouse is over is sufficient. Better than re-sizing the
entire window anyway (would that even work if the user has set F11
(fullscreen)?), as none of the rest of the page would need to be touched
but it should catch the cursor (It might take a timeout on the
re-showing to actually get the re-draw). But there has got to be a
better way, unfortunately I don't have time to look (and won't for at
least another couple of days).

Sadly, it has not made a difference for Opera.
In Netscape 6+, the overhead of the two window.resizeBy
calls may be bypassed by using, instead,
window.setCursor('move')

So:-

if(window.setCursor){
window.setCursor('move');
}else{
. . . //horrible IE hack
}

Richard.

Csaba2000 · Sep 12, 2003

Hurrah Richard!

Good to hear from you.

Richard Cornford said:
Yuk! I haven't tried it but if the problem is getting IE to redraw the

I agree with both your sentiment and logic. But, after some
investigation, I was not able to get the .style.visibility to work
(which, on reflection, makes sense, since only a local portion of
the page should be redrawn. Though it would also make
sense for this problem not to exist in the first place). In particular,
if I put in a one second delay for making the (target) object visible
again and jiggle the mouse while the target object is hidden, the
mouse reverts to a pointer (which, I'm presuming, is the cursor
type of the underlying element (the body)) from whatever I had
assigned in the onmouseover, and stays that way till I either move
the mouse or release the button.

I didn't try it with .style.display since I figured that was tantamount
to recomputing the entire page, like with resizing.

Interestingly, I also tried making both Netscape and IE full screen,
and the double .resizeBy worked even better since there wasn't
any flicker this time, but the cursor did refresh. Go figure.

If you wind up finding an improvement, and by all rights there
should be one, I would love to hear about it.

Regards from New York,
Csaba

? Trouble with: passing dragElement(e.target.id);	8	Jan 12, 2023
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
Help me sort out this script	1	Oct 17, 2023
Firefox onmousedown focus/blur	0	Nov 12, 2006
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023
Cross-Browser onmousedown JavaScript	13	Jan 22, 2009

Mouse won't change (onmousedown="this.style.cursor='different'")

Csaba2000

Csaba2000

Richard Cornford

Csaba2000

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads