Changing mouse into hourglass over all objects including drop downs

I know this works on all objects except drop down boxes.

doc = document.all
for (i=0;i<doc.length;i++)
{
doc(i).style.cursor = 'wait';
}

Is it possible to make a cursor into an hourglass over a drop down?

mcraven.2@wright.edu wrote:

Quote:

I know this works on all objects except drop down boxes.
>
doc = document.all

document.all is a proprietary MS feature that has been copied to some
extent by other browsers, but can be considered deprecated (since IE 5)
in favour of appropriate W3C standards - in this case,
document.getElementsByTagName should do the trick but may not be necessary.

Using script to do style stuff is clumsy and should really only be done
where there is no other way.

Quote:

for (i=0;i<doc.length;i++)
{
doc(i).style.cursor = 'wait';
}
>
Is it possible to make a cursor into an hourglass over a drop down?

If by 'drop down' you mean an HTML select element, yes. You can use a
'wait' cursor over all select elements using CSS:

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

You can use selectors to change the cursor based on the element's id or
class attributes. You can also use in-line styles:

<select style="cursor: wait;" ... >

Do you still want to use script?

--
Rob

On Sun, 23 Jul 2006 13:24:06 +1000, RobG <rgqld@iinet.net.auwrote:

Quote:

>mcraven.2@wright.edu wrote:

Quote:

>for (i=0;i<doc.length;i++)
>{
> doc(i).style.cursor = 'wait';
>}
>>
>Is it possible to make a cursor into an hourglass over a drop down?

>
>If by 'drop down' you mean an HTML select element, yes. You can use a
>'wait' cursor over all select elements using CSS:
>
><style type="text/css">
select {cursor: wait;}
></style>
>
>You can use selectors to change the cursor based on the element's id or
>class attributes. You can also use in-line styles:
>
<select style="cursor: wait;" ... >
>
>
>Do you still want to use script?

The script above is equivalent to using the above.

OP - the better approach to this is not to change every cursor -
that's really, really slow - just add a mousemove handler to the page
and change the cursor of the element under the cursor, much more
efficient.

Jim.

Jim Ley wrote:

Quote:

On Sun, 23 Jul 2006 13:24:06 +1000, RobG <rgqld@iinet.net.auwrote:
>

Quote:

>mcraven.2@wright.edu wrote:

[...]

Quote:

>>Is it possible to make a cursor into an hourglass over a drop down?

>If by 'drop down' you mean an HTML select element, yes. You can use a
>'wait' cursor over all select elements using CSS:
>>
><style type="text/css">
> select {cursor: wait;}
></style>
>>
>You can use selectors to change the cursor based on the element's id or
>class attributes. You can also use in-line styles:
>>
> <select style="cursor: wait;" ... >

[...]

Quote:

>
The script above is equivalent to using the above.
>
OP - the better approach to this is not to change every cursor -
that's really, really slow - just add a mousemove handler to the page
and change the cursor of the element under the cursor, much more
efficient.

Do you mean something like:

<script type="text/javascript">

function doWait(e){
var tgt = e.target || e.srcElement;
if (tgt && tgt.tagName && tgt.style){
if ('select' == tgt.tagName.toLowerCase()){
tgt.style.cursor = 'wait';
} else {
tgt.style.cursor = 'normal';
}
}
}

</script>

<body onmouseover="doWait(event);"... </body>

I think CSS provides a much more elegant solution.

--
Rob

RobG wrote:

Quote:

Jim Ley wrote:

Quote:

On Sun, 23 Jul 2006 13:24:06 +1000, RobG <rgqld@iinet.net.auwrote:

Quote:

mcraven.2@wright.edu wrote:

[...]

Quote:

>Is it possible to make a cursor into an hourglass over a drop down?
If by 'drop down' you mean an HTML select element, yes. You can use a
'wait' cursor over all select elements using CSS:
>
<style type="text/css">
select {cursor: wait;}
</style>
>
You can use selectors to change the cursor based on the element's id or
class attributes. You can also use in-line styles:
>
<select style="cursor: wait;" ... >

[...]

Quote:

The script above is equivalent to using the above.

OP - the better approach to this is not to change every cursor -
that's really, really slow - just add a mousemove handler to the page
and change the cursor of the element under the cursor, much more
efficient.

>
Do you mean something like:
>
<script type="text/javascript">
>
function doWait(e){
var tgt = e.target || e.srcElement;
if (tgt && tgt.tagName && tgt.style){
if ('select' == tgt.tagName.toLowerCase()){
tgt.style.cursor = 'wait';
} else {
tgt.style.cursor = 'normal';
}
}
}
>
</script>
>
<body onmouseover="doWait(event);"... </body>
>
>
I think CSS provides a much more elegant solution.
>
>
--
Rob

I found this script which uses the BODY method:

<html>
<head>
<script type="text/javascript">

function Change_Cursor(Param1)
{
document.body.style.cursor = Param1
}

</script>

<body>

<a href="#" onclick="Change_Cursor('wait')">Change Cursor to
Wait</a><br>
<a href="#" onclick="Change_Cursor('pointer')">Change Cursor to
Pointer</a><br>
<a href="#" onclick="Change_Cursor('default')">Change Cursor to
Default</a><br>

<form>
<select>
<option>ABCDFEGHIJKLMNO</opion>
<option>PQRSTUVWXYZ1234</opion>
<option>567890ABCDFEGHI</opion>
</select>
</form>

</body>

</html>

Problem is, when you moueover elements like the LINKS or the SELECT
box, it reverts to the default behavior for those items.

Maybe you should step through every node stemming from the BODY and
change it over? And then to reset re-step and change settings back to
default?

Someone must have code this already, right?

Giggle Girl

mcraven.2@wright.edu wrote:

Quote:

I know this works on all objects except drop down boxes.
>
doc = document.all
for (i=0;i<doc.length;i++)
{
doc(i).style.cursor = 'wait';
}
>
Is it possible to make a cursor into an hourglass over a drop down?

I assume what you want to do is turn the hourglass on and off when
something is happening.

One solution would be to size a floating DIV to cover the whole page
with a z-index high enough to ensure it is in front of all other
elements and set the cursor just for that DIV.

You can then just show/hide the DIV as you see fit. This has the
side-effect of disabling all the elements on the page which may or may
not be what you want.

Changing mouse into hourglass over all objects including drop downs

re: Changing mouse into hourglass over all objects including drop downs

re: Changing mouse into hourglass over all objects including drop downs

re: Changing mouse into hourglass over all objects including drop downs

re: Changing mouse into hourglass over all objects including drop downs

re: Changing mouse into hourglass over all objects including drop downs

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about