Javascript Cursors

Javascript - Cursors

Javascript provides a number of predefined cursors. For a somewhat cumbersome-to-use list, see CSS cursor Property and the related live examples.

This page splits those cursors into 3 groups - resize, custom, and everything else - and allows you to see the cursor by simply moving the cursor over the various values. This page is just an attempt to make them easier to see.

Resize

Resize cursors - All are bidirectional
style="cursor: value" - just float the mouse over the value column
value	Direction	Description

e-resize	east	These indicate that an edge of a box can be moved left (west) or right (east)
ew-resize	east/west
w-resize	west

n-resize	north	These indicate that an edge of a box can be moved up (north) or down (south)
ns-resize	north/south
s-resize	south

ne-resize	north/east	These indicate that a corner of a box can be moved up and right (north/east) or down and left (south/west)
nesw-resize	ne/sw
sw-resize	south/west

nw-resize	north/west	These indicate that a corner of a box can be moved up and left (north/west) or down and right (south/east)
nwse-resize	nw/se
se-resize	south/east

row-resize	up/down	This indicates that the row can be resized vertically
col-resize	left/right	This indicates that the column can be resized horizontally

ew-resize, ns-resize, nesw-resize, and nwse-resize do not work with IE8 on Windows XP

Custom

This allows you to define any cursor you want - This example uses the graphics (images) from the w3schools live example.

How to create a custom cursor
style="cursor: value" - just float the mouse over the value column
value	Description
URL	cursor:url(smiley.gif),url(myBall.cur),auto; A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
URL png	cursor:url(smiley.png),row-resize;
URL cur	cursor:url(myBall.cur),row-resize;

The cur-file works with all 7 tested browsers, but it is
- Large in IE8 on Windows XP
- Medium size with Firefox 24 and Chrome 49 on Windows XP, and Chrome 55 on Windows 10
- Very small with Firefox 47, Edge, and IE on Windows 10
The gif- and png-files
- Are large and easy to see with Firefox 24 (Windows XP), Chrome 49 (Windows XP), and Chrome 55 (Windows 10)
- Are very small in Firefox 47 on Windows 10
- Do not work with IE8 on Windows XP or with either Edge or IE on Windows 10
Edge will not read the cur-file from a local drive, the page must be on the web

cur-files allow the definition of a hotspot - gif- and png-files do not.

Everything else

Everything except resize and custom
style="cursor: value" - just float the mouse over the value column
value	Description
alias	The cursor indicates an alias of something is to be created
all-scroll	The cursor indicates that something can be scrolled in any direction
auto	Default. The browser sets a cursor
cell	The cursor indicates that a cell (or set of cells) may be selected
context-menu	The cursor indicates that a context-menu is available Only useful in Edge and IE with Windows 10
copy	The cursor indicates something is to be copied
crosshair	The cursor is a crosshair with the hotspot in the center
default	The default cursor
grab	The cursor indicates that something can be grabbed An open hand and a fist in Firefox 47 on Windows 10 No effect in Windows 10 using Chrome, Edge, or IE
grabbing
help	The cursor indicates that help is available
move	The cursor indicates something is to be moved
no-drop	The cursor indicates that the dragged item cannot be dropped here
none	No cursor is rendered for the element
not-allowed	The cursor indicates that the requested action will not be executed
pointer	The cursor is a pointer and indicates a link
progress	The cursor indicates that the program is busy (in progress)
text	The cursor indicates text that may be selected
vertical-text	The cursor indicates vertical-text that may be selected
wait	The cursor indicates that the program is busy - Worthless - see below
zoom-in	The cursor indicates that something can be zoomed in - no effect in IE
zoom-out	The cursor indicates that something can be zoomed out - no effect in IE
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Many of these are browser dependent.

The wait cursor

Setting (and using) most of the cursors is fairly straight forward. However the wait and progress cursors are a bit tricky. Basically, when these are set via code, they will not be displayed until after the code has completed executing!!! This kinda defeats the purpose.

To be clear, in one of my applications, I have code that requires about 30 seconds to complete. As a result, I want to inform the user that the last click was actually recognize and that there will be a wait.

The problem is that javascript is single threaded - meaning that cursor changes will not be displayed until the current thread - that's right, the thread that sets the cursor and runs the slow code - terminates. Thus, it is easy to change the cursor after the slow code runs .. but not before. (I have spent over a week on this.)

Timers

The idea here is to change the cursor, set a timer to start the slow code, and then terminate the original event so that the cursor will actually change before the code is run.

Apparently, the timer runs in the main (only) thread and, therefore, does not fix the problem.

On the other hand, this technique did allow the checkbox to show the change before running the slow code - it just didn't allow the cursor to change.

It is possible that I missed something and that this technique can be made to work. This code example sort of works - but there are a number of scenarios that need to be investigated before claiming success. What I tried was almost identical (I think) - good luck.

Using onMouseDown

One suggested solution (ref) is to set the document cursor on a mouse down event and to start the code on mouse up. Tried that - it did not work.

<input type="checkbox" onMouseDown=mc_xyz_Set_wait_Cursor() >

function mc_xyz_Set_wait_Cursor(){ // this fails
  document.body.style.cursor = "wait";
}

However, the following does work. (I am using any of several checkboxes to trigger the slow code.)

<input type="checkbox" onMouseDown=mc_xyz_Set_wait_Cursor(this) >

function mc_xyz_Set_wait_Cursor(id){ // this works
  id.style.cursor = "wait";
}

I frequently place checkboxes inside labels (so that clicking the label is the same as clicking the checkbox). However, onMouseDown must be attached to both the checkbox and the label. And, of course, they must both be cleared when the long operation completes.

In my application, onChange is attached to the enclosing table, and not to each checkbox. Adding onMouseDown to the table does not work - it must be attached to each checkbox. (I also tried using onMouseUp attached to the table .. but that also didn't work.)

Using onMouseDown has a bad side effect - if the user presses the mouse button, and then moves off the checkbox before releasing the button, then

The value of the checkbox does not change - this is expected
The wait cursor remains on the button and is not cleared - not acceptable

Rather than explicitly pass *this* in the function call, I tried using document.activeElement, but that does not work

document.activeElement.style.cursor = "wait"; // fails to change the cursor

Using a separate div layer

I tried placing a shield over the entire page. The hign z-index works when I set it manually via the debugger. but has no effect when setting it in the onChange event .. same result as before when just setting the cursor.

<style>
#mcCPWaitShield {
  cursor:wait;
  opacity: 0.3;
  display: none;
  background-color: black;
  z-index:-99;  /* hidden until needed */
}
</style>

<div id=mcCPWaitShield class="mcUIWindowBackground" ></div> <!-- class sets size and more -->


  mcCPWaitShield.style.zIndex = 999; // I tried this in several events

mcUIWindowBackground sets the size and location of the shield.

Basically, javascript is a single threaded language and certain actions will have no effect until the code thread terminates. This is why the onMouseDown and onMouseUp events must be used - so that the first thread will terminate and the new cursor will be displayed.

Unfortunately, using the shield also means that the mouse up and mouse clicked events will not be seen by the underlying components. Attaching onMouseUp to the shield works, but if the mouse is moved off the checkbox while it is down, it will still be clicked - marginal at best. Of course it may be possible to add even more code to make sure that the mouse is still over the same checkbox - but not today. (I've had enough of this crap!)

Attaching the shield via code was a bit tricky. At first, I tried the following - but it caused multiple problems with the application.

 var xx = this.CreateWaitShield();  // this creates all the html code
 document.body.innerHTML += xx      // just add the code to the existing page - fails

This technique (which is almost identical) worked.

 var xx = this.CreateWaitShield();         // this creates all the html code
 var yy = document.createElement("div");
 yy.innerHTML = xx;
 document.body.appendChild(yy);            // This works

I also tested onClick, it does not work - must use onMouseDown.

In one version, I set the cursor in the code - not the style definition. This was because the shield is slightly larger than the page and that results in the wait cursor being visible in areas where it should be the normal arrow. The following code was called on onMouseDown.

function mcChartProperties_Form_Set_wait_Cursor(id){
  if (id.control) id = id.control; // the label might have been clicked

  if (id.checked) return; // the shield is not required when unchecking a box

  id.checked = true;
  mcCPWaitShield.style.zIndex = 999;    // raise the shield very high
  mcCPWaitShield.style.cursor = "wait"; 
}

After that was working, I decided to add 30% black to the shield to indicate that nothing on the page could be clicked. Unfortunately, just like the cursor, using just the z-index caused the 30% black to show around the other page elements. As a result, the final code uses display to control both the color and cursor.

  mcCPWaitShield.style.display = "block"; // show
  mcCPWaitShield.style.display = "none" ; // hide

Yet another Failed method

I also tried this technique from w3schools - it also failed.

var declaration = document.styleSheets[0].cssRules[0].style;
var setprop = declaration.setProperty("cursor", "wait");

Author: Robert Clemenzi