Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

change mouse icon to mimic behavior of desktop apps 1

Status
Not open for further replies.

49er

Programmer
Aug 24, 2000
38
0
0
US
Hi all,
It seems that I have not learned from the saying "curiosity killed the cat" so here goes...

I have two functions that send(sendURL) and receive(parseString) information from the server.

I have implemented changing the cursor on certain objects say for instance, changing the cursor to a hand over a bit of text. But would it be possible to set a div id for an entire frameset document so that anytime something was getting sent or retrieved from the server the cursor could change to indicate that something was happening (just like in windows when there is processing going on) no matter where the cursor was located on the screen? Anyone who tackles this one gets an XTRA big cookie!!
 
< indicate that something was happening

In particular, what type of process?

Marc
 
Say, for instance, when you load up Word (or any program) the cursor turns to an hourglass until the program has finished loading to indicate to the user that something is going on. What we were wanting to do is come up with an effective way to give some feedback to the user so that they don't repeatedly hit the submit button, tool button, etc.
 
Hi Guys

Did anyone manage to answer this question? I'm trying to set a 'wait' cursor whilst a v.long function executes but the cursor doesn't actually change until the func returns, (and then swaps back as planned).

Any ideas?
 
This is an IE5/IE5.5 only solution but hey you might need it....
This is the complete code...

Code:
<html>
<head>
<title></title>
<script language=&quot;JavaScript&quot;>
function changeCursor()
{
Code:
document.body.style.cursor = &quot;wait&quot;;
Code:
}
</script>
</head>
<body>
<A HREF=&quot;javascript:changeCursor();&quot;>change Cursor</A>

</body>
</html>
The main javascript here is the line in red document.body.style.cursor = &quot;wait&quot;; with this code if you go over any Hyperlinks the cursor will change to a hand, so if you wanted an hour glass whilst over a hyperlink as well you would have to use the code...
Code:
<html>
<head>
<title></title>
<script language=&quot;JavaScript&quot;>
function changeCursor()
{[code][/color][COLOR=green][code]
document.body.style.cursor = &quot;wait&quot;;
Code:
for (i=0;i < document.anchors.length;i++)
{
	document.anchors(i).style.cursor = &quot;wait&quot;;
}
Code:
}
</script>
</head>
<body>
<A
Code:
id=&quot;alink&quot;
Code:
 HREF=&quot;javascript:changeCursor();&quot;>change Cursor</A>

</body>
</html>
This code has the for loop which loops through all the anchor tags with an ID and sets the mouse cursor.
The code in bold red is important for the for loop to work as mentioned above.

If you want to set the cursor back again use .cursor = &quot;auto&quot;; in a similar way. The function changeCursor could the look like this...
Code:
function changeCursor(cursorType)
{
document.body.style.cursor = cursorType;
for (i=0;i < document.anchors.length;i++)
{
	document.anchors(i).style.cursor = cursorType;
}
}
then you would call the function like this...
Code:
changeCursor('wait')
and to make it normal..
Code:
changeCursor('auto')
Hope this helps. Come back here if you have any more queries..

I must stress again that this will only work with IE5/5.5. Maybe IE4 and maybe NS6 I don't know. Klae

You're only as good as your last answer!
 
Thanks Klae

My problem is actually a little more specific than that so my first post was perhaps a little too succinct ;->

Basically the flow goes like so:

function sortHugeTableOfData(sortSource){

//sort source being the col to sort on

document.all['surroundingDiv'].style.cursor='wait';
..do massive sort and re-write table
document.all['surroundingDiv'].style.cursor='auto';

}

and operates on a page like this:

<html><body><div id=surroundingDiv><div id=innerDiv><table>loads of data</table></div></div></body></html>

The instruction to change the cursor to 'wait' does take affect on screen but not until AFTER the sort has completed. I've added all manner of debug to establish this and am now stumped as to whether or not this is actually a 'feature' of IE, (yes this solution need only work in IE 5.5+).

I think I may need to look at using a setTimeout to encourage the browser to repaint the cursor.

Any ideas?

Thanks in advance...
 
Hi Guys

The resolution is associated with setTimeout, (as suspected).

You need to give the script-engine a chance to repaint by yielding control, (obvious really).

document.all['surroundingDiv'].style.cursor='wait';
setTimeout(&quot;..do massive sort and re-write table&quot;, 5);
document.all['surroundingDiv'].style.cursor='auto';

It can be a little sluggish but it's very close to the behaviour of a desktop app.

Cheers,
 
Guys,

In relation to this post, I was wondering if there was somwhere that I could get a list of all the different cursor types that can be used in the manner outlined by Klae:

i.e. document.anchors(i).style.cursor = &quot;wait&quot;;
Mise Le Meas,

Mighty :)
 
Hi Guys

For IE 5: auto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help

Not sure how many, if any, will work on the various versions of NS, (never been asked to write an app making use of this outside of an intranet).

There's also a way of extending this list with your own icons, (again MS specific). Head over to the MSDN pages for info.

Hope this helps

J
 
guys, correct me if i'm wrong: i can't set cursor type in nn6, right? (can't get it to work, a bit stuck; looks like i would have to do that thru links.. woo..) Victor
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top