JavaScript

Change Cell Color on Mouseover
Change Background Color
Break out of Frames
Change Cursor
Limit Input Text
Get Object By ID
Up/Down Buttons (Spinner)

Other sites

Image Editor
Top 10 web hosting reviews

Change cursor to an Hourglass during function execution

Not too long ago I was asked how to change the user's cursor to an hourglass while the user was waiting for a function to perform a complex calculation that could take 2 to 3 seconds. Here's my answer.

To begin with define these three functions. calc() is the function that will take 2 to 3 seconds to perform the calculation.

Example Code

<script type="text/javascript">



// Changes the cursor to an hourglass

function cursor_wait() {

  document.body.style.cursor = 'wait';

}



// Returns the cursor to the default pointer

function cursor_clear() {

  document.body.style.cursor = 'default';

}



// Does some arduous calculation

function calc() {

  var dummy = 0;



  for (var i=0; i<1000000;i++) {

    for (var z=0; i<1000000;i++) {

      dummy = dummy + z + i;

    }

  }



  cursor_clear();

}



</script>

To use these functions, simply call them from where the calculation would take place. You can call them from a link or from a form's checkbox etc. on a mouse down event call the cursor_wait() function: onMouseDown="cursor_wait()" and on the mouse up event call the calc() function: onMouseUp="calc()".

Here is an example of the whole thing being used.

Example Code

<html>

	<head>

		<title>Test</title>

		<script type="text/javascript">



		function cursor_wait() {

			document.body.style.cursor = 'wait';

		}



		function cursor_clear() {

			document.body.style.cursor = 'default';

		}



		function calc() {

			var dummy = 0;



			for (var i=0; i<1000000;i++) {

				for (var z=0; i<1000000;i++) {

					dummy = dummy + z + i;

				}

			}



			cursor_clear();

		}

		</script>

	</head>

	<body>

		<form name="some_form" action="index.php" method="get">

		<input type="checkbox" name="nameless" value="5"

			onMouseDown="cursor_wait()" onMouseUp="calc()" /> Five

		</form>

	</body>

</html>

Link back to this page

Copy and paste this HTML code into your page to link back to this very page:

Or just link to the WebCodingTech site:

And your link will look like this:

Inspired by stuff found at www.webcodingtech.com.

www.webcodingtech.com

Coding Technologies for the Web

Change cursor to an Hourglass during function execution

Link back to this page

Thanks!