32

So what I trying to do is to change the cursor to wait when some page is loading.

I thought this was possible with css, I trying to achieve this when someone click on some link, so what I have is this:

#something a:hover { cursor: hand; }
#something a:active { cursor: wait; }

But this doesn't work, it's a hand when hover links, and when for a second is wait, but I want this wait to continue until the new page appear.

So my question is: Is this wrong? To achieve what I want?
Or do I have to use javascript?

Improve this question
1
  • cursor:pointer; - the old IE "hand" is not X-browser, and is gone in IE9. Commented Sep 17, 2010 at 10:41

3 Answers 3

Reset to default
52

The way to do this is something like this:

On the first page (to show as soon as the link is clicked):

<a href="http://www.example.com/Page2.html" onclick="document.body.style.cursor='wait'; return true;">

On the second page (to show until the new page finishes loading):

<script type="text/javascript">
    // Set the cursor ASAP to "Wait"
    document.body.style.cursor='wait';

    // When the window has finished loading, set it back to default...
    window.onload=function(){document.body.style.cursor='default';}
</script>

Note that the page is loaded sequentially so the closer to the top of your second page the cursor='wait' line is, the less delay there will be in showing the cursor on the new page.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I had also tried something like this, but didn't work. Certainly I've made something wrong, I guess applying it to the element. How do I apply this inside the link, inside html?
Ok, now I understand - you've got a 2-step process - 1) in the links onclick() event, you need to set the cursor to wait for the document body. 2) on the NEW page, you need to set the cursor to wait untilt the page finishes loading (as in my answer above). No matter what you do, there will be a little time between the old page unloading and the new page loading when you have no control over the cursor...
That was my problem! It didn't put anything on the new page, although it make totally sense! Actually I wasn't really understanding but like that make sense. Thanks a lot! :)
Glad I could help. Be aware that in some browsers, JavaScript stops being executed once a new page is being loaded - so make sure you always set the cursor before trying to change the page (as demo'd above) rather than after. Good luck
I would like to change the cursor to some image. Do you known any way how to do this? Or some nice place where I could learn jquery or javascript?
|
4

The meaning of the cursor property in relation to CSS selector is that when the mouse is over an element matching the selector then use the cursor. So to change the cursor for the overall document you need to do something like:

html {
    cursor: wait;
}

Obviously, this will change the cursor forever (or until the user closes the page, whichever comes first). To do this dynamically you need to use javascript:

document.body.style.cursor = 'wait';

Note that cursor:hand is only supported by IE and only needed for IE 5. The correct cursor name is pointer. Of course, if you need to support IE 5 you need to use cursor:hand. Instead of using browser sniffing you can use class name to change cursor:

CSS:

.handCursor {
    cursor: pointer;
    cursor: hand;
}

JS:

document.body.className = 'handCursor';
Improve this answer

1 Comment

I had also tried something like this, but didn't work. Certainly I've made something wrong, I guess applying it to the element.How do I apply this inside the link, inside html?
4

As 'answered' says you can use CSS to attach the cursor to the html element, which should cover the whole page.

But you'll need to add a listener to every single anchor in the page with an onclick, which calls a function that sets the cursor on the HTML or body element. When the page reloads the cursor will go back to default again as the javascript would've refreshed

var anchors = document.getElementsByTagName("a");
for (var i=0,len=anchors.length; i<len; i++) {
  anchors[i].onclick = function() {
    document.body.style.cursor = "wait";
  };
}
Improve this answer

3 Comments

well I'm not sure why but I'm not able to make any of these examples work
Do you have an example page we could look at?
Well I tried your example. Then in the html template, I've a table, inside <td> I've got the link: <td><a href="#">lala</a></td> and your example. In the css when a:hover, cursor is pointer. and for the rest is used your example..Perhabs is something silly, Javascript is still weird for me :P

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.