Thursday, February 3, 2011

Cursor not changing issue


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. = 'default'; = '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");


Shivanand PB said...

Welcome to blogging world :)

David said...

I've tested your solution and it does work for Safari, but not in Chrome 9... Not for me anyway. Further investigation reveals that the trick to this working on safari is making the document scroll bars appear. Smaller than the window doesn't work, bigger than the window does. Setting overflow hidden doesn't work either. The (not nice) side effect of this is you get a brief flicker as the scrollbars appear and disappear. said...

Hi David, I don't see the issue in Chrome9 . Press Ctrl+Shift+I on this window and click the icon with greater than arrow and triple equal to and go to the javascript console and execute the following. After executing this script move the cursor (before 3 seconds) to an area where the cursor is in "wait" state and don't move the mouse after this. You can see the cursor changing to default without moving the mouse . Are talking about Chrome9 on Mac?"wait"; setTimeout(function(){"default";},3000); said...

see the linked blog also.

Muhammad Lal said...

its really helpful for the readers and very useful technology. i like your post its very informative and very awesome. keep providing such kind of good post. very goods article