9

I have the following code to change the cursor when a hyperlink is clicked

        $('a').click(function () {
            $('*').css("cursor", "progress");
        });

When a link is clicked, the cursor changes to "progress" (i.e. wait cursor) exactly as expected. However, the problem is that the cursor remains "progress" after a new page is loaded. It changes to default only after the mouse moves. This is related to another question. Others expressed the same problem.

As described by the title, I hope to change the cursor to default when a page is loaded.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Hong
  • 17,643
  • 21
  • 81
  • 142
  • 1
    can you be more precise about what happens when you click on that link ? anyway, the way you modify your cursor should be: $('body').css("cursor","progress") – BiAiB Apr 19 '11 at 14:24
  • Sorry for that. I have just added the following sentence"When a link is clicked, the cursor changes to "progress" (i.e. wait cursor) exactly as expected". I did try $('body').css("cursor","progress") before posting the question. I also tried $(this).css("cursor","progress") before posting the question. All of them behave the same - the cursor remains "progress" until the mouse moves. – Hong Apr 19 '11 at 15:30
  • That's not what I meant. What we need to know is when do you want your cursor so stop the progress animation. – BiAiB Apr 19 '11 at 16:29
  • Sorry again. I have just added the following sentence: "As described by the title, I hope to change the cursor to default when a page is loaded." Thanks a lot for looking into this. – Hong Apr 19 '11 at 16:42
  • i'll assume you have a link that load an url to a special target window. So you just have to follow my example but bind to the onload event of that window. – BiAiB Apr 19 '11 at 16:45

1 Answers1

8

You didn't clearly specify how it's meant to be used but here's an example of how to perform the behaviour you describe with an ajax call:

$('a').click(function () {
    $('body').css('cursor', 'progress');
    $.ajax({
      url: "test.html",
      context: document.body,
      complete: function(){
       $('body').css('cursor', 'default');
      }
    });
} );
Asaph
  • 159,146
  • 25
  • 197
  • 199
BiAiB
  • 12,932
  • 10
  • 43
  • 63
  • Thanks again for looking into this. I meant reversing the cursor to default when a new page is loaded after clicking a link. A link could be something like the following Foo – Hong Apr 19 '11 at 16:46
  • if a new page is loaded into your window, the cursor will be brought back to its default at unload, again I think you meant with a specific target like: Foo. Then you have to access the document object of that window and listen to its on ready like this: $( popupWindow ) .ready( unsetcursorfunction ) – BiAiB Apr 19 '11 at 16:51
  • but I suggest you abandon that idea, I think the browsers nowadays are cleary explicit enough to notify the user that a page is being loaded :) – BiAiB Apr 19 '11 at 16:52
  • The cursor remaining "progress" is true for every page of one of my web applications. Whenever a link is clicked, the cursor changes to "progress" and it remains progress after the target page is loaded. It changes to the default only after the mouse is moved. I have had this problem for a while and thought its solution had to be something rudimentary. After trying everything I could come up to no avail, I decided to post the question here. – Hong Apr 19 '11 at 17:24
  • Browsers (e.g. FF, IE) show "loading..." on the bottom left and they do only after mouse moves after clicking. I have found it is not adequate for some visitors who tend to keep clicking a link when they do not see anything loading soon. – Hong Apr 19 '11 at 17:27