CODEWITHSUNDEEP
javascriptjqueryhtmldom
Bigballs
Bigballs

Reputation: 3809

jquery wait cursor while loading html in div

I want to show to the user a state that the result is loading. How can I change cursor or gif while loading result in div with $MyDiv.load("page.php") ?

Upvotes: 17

Views: 65584

Answers (8)

pmrotule
pmrotule

Reputation: 9692

Have a look at my solution, it covers all elements, not only the body tag: https://stackoverflow.com/a/26183551/1895428

Upvotes: 0

robertovg
robertovg

Reputation: 1037

I really think that it's a better solution to just use a class in the body element

  $('body').addClass('cursorProgress');

And when you want to keep it as it was before just:

  $('body').removeClass('cursorProgress');

and in you css file put something like that:

body.cursorProgress {
  cursor: progress;
}

So with this solution you are not overriding the defaults or changes you make on cursor styles, and the second advantage is that you have the possibility of adding the important in your css.

body.cursorProgress {
  cursor: progress !important;
}

Upvotes: 4

user1489673
user1489673

Reputation:

A cleaner JQuery approach, although not necessarily efficient is to add and remove a busy class to all objects.

Note that, not all browsers (e.g. Firefox) assume a height of 100% for the outermost viewable object, so the busy cursor will only get displayed on the part of the screen

<head runat="server">
    <title></title>
    <style type="text/css">
        .busy
        {
            cursor: wait !important;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[

        $(function () {

            $("#btnToggleWait").click(function (e) {
                if ($(e.target).hasClass("busy")) {
                    $("*").removeClass("busy");
                }
                else {
                    $("*").addClass("busy");
                }

                e.preventDefault();
                e.stopPropagation();
                return false;
            });
        });

        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button id="btnToggleWait">
            Toggle Wait</button>
    </div>
    </form>
</body>

Upvotes: 0

mountain
mountain

Reputation: 137

$("*").css("cursor", "progress") will work no matter where on the page you are currently pointing. This way you do not have to move the cursor to see it activated.

Upvotes: 12

Marmot
Marmot

Reputation: 109

I think the best is to set up in css file

body.wait *, body.wait {
cursor:wait !important;
}

and add/remove class wait in body

this method overrides all cursors in inputs, links etc.

Upvotes: 10

Null Head
Null Head

Reputation: 2941

For example, if you want to show larger image on hovering on a thumbnail 

//Hovered image
    $("a.preview").hover(function(e) {
            var aprev = this;
            //Show progress cursor while loading image
            $(aprev).css("cursor", "progress");
    //#imgpreview is the <div> to be loaded on hover
    $("#imgpreview").load(function() {           
                $(aprev).css("cursor", "default");
            });
    }

Upvotes: 0

Craig Stuntz
Craig Stuntz

Reputation: 126547

  1. Initially style the loading image non-visible.
  2. Change the style to visible when you begin loading.
  3. Change the style to non-visible when loading finished using a callback argument to load().

Example:

 $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });

Upvotes: 7

Magnar
Magnar

Reputation: 28810

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

Just remember to return it afterwards:

$MyDiv.load("page.php", function () {
    // this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
});

Upvotes: 63

Related Questions