Hour glass cursor

qadeer05 · April 23rd, 2004, 10:35 AM

Hi all,

I just wanted to know if there is a command in javascript to change the cursor on a webpage to an hour glass without the use of a for loop.

I have a javascript function that's running for a more than a couple of seconds and I want to change the cursor to an hour glass when this function is being executed.

I would really appreciate any help.

Thanks,
Qadeer.

Snib · April 23rd, 2004, 12:18 PM

document.yourEvent = function() {document.body.style.cursor='wait';}

I think that'll do it....

Snib

<><

qadeer05 · April 23rd, 2004, 01:34 PM

Hi Snib,

Thanks for the reply.

If I use document.body.style.cursor='wait' the cursor doesn't show the hour glass when hovering over buttons or other controls on the web page.

Here is what I am trying to do: I have a button on my webpage and when I click on the button it is enabling and changing the values in a number of textboxes. This takes about 3-4 seconds. Now when this is being done I want to change the cursor to an hour glass. So as soon as the user clicks on the button I want the cursor to change to hour glass and after the execution of my function I want it to change back to default. I am trying to acheive this using the following code on button click:

on_button_click()
{
document.body.style.cursor='wait';
myfunction(); // This takes about 3-4 seconds to execute
document.body.style.cursor='default';
}

This still doesn't give me the desired result.
What am I doing wrong? or is there any other way I can acheive this?

Thanks,
Qadeer

Snib · April 23rd, 2004, 01:47 PM

At the beginning of myfunction() put the 'wait' code and at the end put the 'un-wait' code.

I might have the 'wait' thing all wrong.......

HTH,

Snib

<><

qadeer05 · April 23rd, 2004, 01:55 PM

I tried that too.. still same result.. :-(

Qadeer

richard.york · April 23rd, 2004, 07:52 PM

I would suggest using the universal selector to apply the cursor property, here is a brief demonstration of how to do it:

Code:

<html>
    <head>
        <title> Universal Selector </title>
        <style type='text/css'>

            * {
                cursor: auto;
            }

        </style>
    </head>
    <body>
        <script language'JavaScript' type='text/javascript'>

            document.styleSheets[0].rules[0].style.cursor = 'wait';

        </script>
    </body>
</html>

The universal selector will apply the style to *all* rendered elements.

This works fine in IE, but so far I haven't been able to get a working equivalent in Mozilla.

hth,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

richard.york · April 24th, 2004, 04:43 AM

Here is the Mozilla/Safari, etc equivalent:
document.styleSheets[0].cssRules[0].style.cursor = 'wait';

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

qadeer05 · April 26th, 2004, 10:18 AM

Thank you rich..

Qadeer

sankalp1 · October 13th, 2008, 07:43 AM

Hi All,
Anybody tell me that hour glass is appearing in firefox but not in IE7 on our server but on client server it is not running. Is it the case that on our OS it is supported but not in their server.?

Please help me.........

Thanks
-Sankalp

August 7th, 2009, 10:36 PM

Many thanks to ur post. I love it.

demande simulation pret personnel en ligne - Pret personnel en ligne et de comparer les meilleurs taux afin de... La demande de prÃªt personnelen lignedemande simulation pret personnel en ligne