How to Change a Mouse Cursor With JQuery

Written by steve mcdonnell Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Change a Mouse Cursor With JQuery
You can change the cursor using jQuery. (Comstock/Comstock/Getty Images)

If you are performing a task in jQuery that will require the user to wait for a second or more, you might want to change the cursor to let the user know he should wait until the system finishes processing the information. You can change the cursor with jQuery by changing the CSS cursor property for the body of the document. Don't forget to change the cursor back when the task completes.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Create a new HTML file using an editor or the Notepad. Insert an empty HTML skeleton and include the jQuery library in the document. For example, type:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Change Cursor</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    </head>

    <body>

    </body>

    </html>

  2. 2

    Create a jQuery function for which you might want to change the mouse cursor, such as when loading data from an external page on the Web server. For example, type:

    $(document).ready(function() {

    $.get("external.php", function(data) {

  3. 3

    Change the mouse cursor by modifying the CSS property for the body of the document. Complete the function by processing or manipulating the data. For example, type:

    $("body").css("cursor", "progress");

    doSomethingWithThe(data);

    });

  4. 4

    Set the mouse cursor back to automatic control. For example, type:

    $("body").css("cursor", "auto");

    });

    </script>

    </head>

    <body>

    </body>

    </html>

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.