Home | Php | JavaScript | SQL | HTML | Server Admin | Tools
JavaScript
Welcome
History

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.

Thanks!





Copyright © 2005 WebCodingTech.com Our URL is: http://www.webcodingtech.com