Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Change mouse cursor to hour glass

Posted on 2006-05-24
14
Medium Priority
?
12,723 Views
Last Modified: 2011-08-18
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>
0
Comment
Question by:yongsing
  • 7
  • 6
14 Comments
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16750009
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.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16750072
<html>
<head>
<title>Test</title>
<style type="text/css">
{ cursor: wait; }
</style>
</head>

<body>
<table>

</table>

</body>
</html>
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16750266
Ah yes. global. Better.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Author Comment

by:yongsing
ID: 16757309
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?
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16758957
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>
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16758960
Just reread your last answer. Seems like you've answered it yourself?
0
 
LVL 9

Author Comment

by:yongsing
ID: 16759159
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.
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16759196
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.

0
 
LVL 9

Author Comment

by:yongsing
ID: 16759301
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.
0
 
LVL 9

Author Comment

by:yongsing
ID: 16759361
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>
0
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 200 total points
ID: 16759470
<!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 { border : 1px solid blue; }
</style>
</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>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Hello<hr />
</body>
</html>

Note that the document.body only reaches as far as the last <hr />. Above this line the cursor is busy (FF and IE). Also the cursor is only busy whilst inside the margins. I've added a blue margin around BODY to show you the problem more.

SO.

Try adding ...

height : 100%; margin : 0px;

to the body css.

This works for IE but not FF. Margins go in FF but page is not 100% tall.

The cursor property is only part of ...

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, custom, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, Hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Not window.

I don't think this can be fixed using normal CSS.

0
 
LVL 9

Author Comment

by:yongsing
ID: 16787457
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!
0
 
LVL 9

Author Comment

by:yongsing
ID: 16787602
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>

0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16787894
Well done and thanks.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question