Link to home
Start Free TrialLog in
Avatar of yongsing
yongsing

asked on

Change mouse cursor to hour glass

I tried to set the mouse cursor to hour glass using the following HTML. But it seems that the mouse cursor will only turn to hour glass within the area around the table. I need the mouse cursor to be hour glass everywhere within the page. I am using IE 6, by the way.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>

<body onload="document.body.style.cursor = 'wait';">
<form name="MyForm" method="POST" action="Test.do">
<table width="98%"  border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="98%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#A3B5EF">
      <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1">
       <tr>
        <td bgcolor="#FFFFFF">
         <table width="100%"  border="0" align="center" cellpadding="3" cellspacing="3">
          <tr>
           <td>test          
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
    </td>
  </tr>
</table>
</form>
</body>
</html>
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Hi yongsing,

remove the onload stuff and try ...

<style type="text/css">body {cursor : wait; }</style>

in the <head> part of the page.



Regards,

Richard Quadling.
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image
<html>
<head>
<title>Test</title>
<style type="text/css">
{ cursor: wait; }
</style>
</head>

<body>
<table>

</table>

</body>
</html>
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Ah yes. global. Better.
Avatar of yongsing
yongsing

ASKER

Actually I'm using javascript to change the cursor to hour glass when the user clicks the Submit button on a form. In the javascript, I did this:

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

Can I have a javascript solution for this?
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
I do this in my code. I have a page which always takes a while, so I have a "Please wait" DIV at the top of the page. The page is PHP based. So, whilst the code is running, generating the output, the PleaseWait div is shown and the cursor set to busy.

At the bottom of the page, once all the data has been sent to the client, the pleasewait div is hidden and the cursor back to normal.

I use the following code ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>{APP_TITLE}</title>
<script type="text/javascript" language="JavaScript"><!--
// Supply the screen res so all CSS is scaled according to known dimensions.
document.write('<link title="StyleSheet" rel="stylesheet" type="text/css" href="/global/css.php?W=' + window.screen.width + '&amp;H=' + window.screen.height + '">');
//--></script>
</head>
<body>
<script language="JavaScript" type="text/javascript"><!--
// Cursor is busy.
document.body.style.cursor = 'wait';
//--></script>
<div class="MDIV">
      <h1>{APP_TITLE}</h1>
      <hr />
</div>
<div id="pleasewait" class="MDIV">
      <table class="MTABLE">
            <caption class="MCAPTION">
                  <span class="MTitle_SPAN">Please wait - generating results.</span>
            </caption>
            <tr>
                  <td>
                        This may take some time.<br />
                        If you want to abort the current operation, then click <a href="/index.php">here</a> to return to the main menu.
                  </td>
            </tr>
      </table>
</div>


This appears at the top of my page. A title and a "Please wait" with a busy cursor.

At the bottom of the page (which could be several minutes later - don't worry - this is an INTERNAL site) ...

<div align="right" style='font-size:8pt'>
      This page took {$sDuration} to generate.<br />
      This page used {$s_SQL_Queries} in $s_SQL_Duration.<br />
      This page processed {$s_SQL_Rows}.<br />
</div>
<script language="JavaScript" type="text/javascript"><!--
// Hide the "Please wait".
document.getElementById('pleasewait').style.display = 'none';
// Cursor is now normal again.
document.body.style.cursor = 'auto';
//--></script>
</body>
</html>
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Just reread your last answer. Seems like you've answered it yourself?
Avatar of yongsing
yongsing

ASKER

The problem is, the following:

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

does not work for my HTML page. The hour glass only shows when the cursor is around the area of the table. I have demostrated this problem using my original HTML.

The following may work:

<style type="text/css">body {cursor : wait; }</style>

But I want the hour glass to appear only when the form is submitted, not when the document is loaded. So I can only use javascript to change the cursor dynamically.
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Ah. Yes. Setting the cursor at run time can be done in the form's onsubmit event handler.

<form onsubmit="document.body.style.cursor = 'wait';" ...>

should work.

Avatar of yongsing
yongsing

ASKER

You don't seem to understand my problem. What I am trying to say is that the following

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

only causes the cursor to turn to hour glass around the area of the table. In some areas of the page, the cursor turns back to the pointed arrow.
Avatar of yongsing
yongsing

ASKER

Try the following. It will show my problem. Just click the button and move the mouse cursor. You will notice that it changes to hour glass only within the table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function changeCursor() {
  document.body.style.cursor = 'wait';
}
-->
</script>
</head>

<body>
<form name="MyForm" method="POST">
<table width="98%"  border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="98%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#A3B5EF">
      <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1">
       <tr>
        <td bgcolor="#FFFFFF">
         <table width="100%"  border="0" align="center" cellpadding="3" cellspacing="3">
          <tr>
           <td align="center">Mouse cursor change to hour glass only within this table
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
    </td>
  </tr>
</table>
<br>
<center><input type="button" onclick="changeCursor();" value="Change to Hour Glass"></center>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of yongsing
yongsing

ASKER

Hi RQuadling,

Sorry for the late response. You latest solution works. However, I have a problem. Our web pages are already using style sheets, and the body attributes are already defined as follows:

body {
      font-family : Verdana;
      font-size : xx-small;
      font-style : normal;
      margin-bottom : 0px;
      margin-left : 0px;
      margin-right : 0px;
      margin-top : 0px;
      overflow : auto;
      background : white;
      line-height: 20px;
}

Somehow, when I added in "height : 100%; border : 1px solid blue;" to body { }, my problem comes back again. See HTML below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function changeCursor() {
  document.body.style.cursor = 'wait';
}
-->
</script>
<style type="text/css">
body {
      font-family : Verdana;
      font-size : xx-small;
      font-style : normal;
      margin-bottom : 0px;
      margin-left : 0px;
      margin-right : 0px;
      margin-top : 0px;
      overflow : auto;
      background : white;
      line-height: 20px;
      height : 100%;
      border : 1px solid blue;
}
</style>
</head>

<body height="100%">
<form name="MyForm" method="POST">
<table width="98%"  border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="98%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#A3B5EF">
      <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1">
       <tr>
        <td bgcolor="#FFFFFF">
         <table width="100%"  border="0" align="center" cellpadding="3" cellspacing="3">
          <tr>
           <td align="center">Mouse cursor change to hour glass only within this table
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
    </td>
  </tr>
</table>
<br>
<center><input type="button" onclick="changeCursor();" value="Change to Hour Glass"></center>
</form>
</body>
</html>


If the body is defined simply as :

body {
      height : 100%;
      border : 1px solid blue;
}

Then the wait cursor will appear over the entire page. I need the rest of the body attributes to be there as well.

Thanks!
Avatar of yongsing
yongsing

ASKER

OK, I managed to get it to work. I just override the "overflow" attribute and set it to "visible":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function changeCursor() {
  document.body.style.cursor = 'wait';
}
-->
</script>
<style type="text/css">
body {
      font-family : Verdana;
      font-size : xx-small;
      font-style : normal;
      margin-bottom : 0px;
      margin-left : 0px;
      margin-right : 0px;
      margin-top : 0px;
      overflow : auto;
      background : white;
      line-height: 20px;
}
</style>
</head>

<body style="height : 100%; overflow:visible;">
<form name="MyForm" method="POST">
<table width="98%"  border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="98%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#A3B5EF">
      <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1">
       <tr>
        <td bgcolor="#FFFFFF">
         <table width="100%"  border="0" align="center" cellpadding="3" cellspacing="3">
          <tr>
           <td align="center">Mouse cursor change to hour glass only within this table
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
    </td>
  </tr>
</table>
<br>
<center><input type="button" onclick="changeCursor();" value="Change to Hour Glass"></center>
</form>
</body>
</html>

Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Well done and thanks.