All,
This is about the cursor not changing issue problem on Safari on Mac platform .
The problem is that the cursor once changed to a custom cursor(eg:wait) will never come back to the previous state eventhough you changed it back to its original value thru javascript. The assumption here is that you are not moving the mouse at all. The mouse will come back to its previous state if you move the mouse a bit.
I have found a solution for this . The solution as you have already read is to move the mouse a little bit.
Moving a mouse over a javascript is not a feasible thing since javascript does not allow you to do that. If it allows you can think of the most simple virus program that any kid can write in this world. The solution still is to move the mouse. But How? When I was thinking it this way and trying to express the problem to my ProjectManager, I started up a small test page where I played around the problem. I was messing with the css a lot to make sure the manager sees a nice UI. To may surprise it occurred to me that the cursor is indeed moving if you wrap the part of the div which has the cursor.
I ended up in researching more and found out the x and y of the cursor and putting a small div around the cursor to do this . But when I digged deep I understood that the entire window content width needs to be increased for the mouse to get a shake.
And here is the gimmick I did. I added a div on top of the entire screen and made it fully transparent. I then incremented the width of the div and decremented it a little bit from the total width of the content which I found thru prototype api. I was tired of implementing this as I have come to a confirmed solution and I felt free to look into some other stuff. (I am normally like that once I get an initial confirmed solution) . I was looking at the effects demo of scriptaculous for so many days and it suddenly occurred to me that what I am doing must be same as scriptaculous shake effect. I added that to my code and here is the code which can still change the wait cursor back to its original value.
document.body.style.cursor = 'default';
top.document.body.style.cursor = 'default';
var leftX = 0;
var leftY = 0;
var width = 100;
var height = 100;
var cssText = "position:absolute;font-size:12px;background-color:transparent;color:white;left:"+leftX+"px;top:"+leftY+"px;width:"+width+"%;height:"+height+"%;";
var divElement=document.createElement("div");
Element.extend(divElement);
document.body.appendChild(divElement);
divElement.writeAttribute("style",cssText);
divElement.id="xProgressId";
Effect.Shake("xProgressId");
setTimeout(function(){document.body.removeChild($("xProgressId"));},500);
