CODEWITHSUNDEEP
jqueryhtmlcss
Takkun
Takkun

Reputation: 6361

How to change cursor to wait when using jQuery .load()

While waiting for a response from a .load(), is there any way to change the cursor to the busy/wait cursor?

Upvotes: 39

Views: 62942

Answers (8)

pmrotule
pmrotule

Reputation: 9692

I don't like the solution that simply add the css property to the body tag: it's not gonna work if you already have a cursor assigned to your element. Like me, I use cursor: pointer; on all my anchor tag. So, I came up with this solution:

Create a CSS class to avoid overwriting the current cursor (to be able to go back to normal afterwards)

.cursor-wait {
    cursor: wait !important;
}

Create the functions to add and remove the cursor

cursor_wait = function()
{
    // switch to cursor wait for the current element over
    var elements = $(':hover');
    if (elements.length)
    {
        // get the last element which is the one on top
        elements.last().addClass('cursor-wait');
    }
    // use .off() and a unique event name to avoid duplicates
    $('html').
    off('mouseover.cursorwait').
    on('mouseover.cursorwait', function(e)
    {
        // switch to cursor wait for all elements you'll be over
        $(e.target).addClass('cursor-wait');
    });
}

remove_cursor_wait = function()
{
    $('html').off('mouseover.cursorwait'); // remove event handler
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default
}

Then create your ajax function (I don't use events like ajaxStart or ajaxStop because I don't want to use cursor wait with all my ajax call)

get_results = function(){

    cursor_wait();

    $.ajax({
        type: "POST",
        url: "myfile.php",

        data: { var : something },

        success: function(data)
        {
            remove_cursor_wait();
        }
    });
}

I'm not very familiar with jQuery load(), but I guess it will be something like this:

$('button').click(function()
{
    cursor_wait();

    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr)
    {
        if (statusTxt == "success")
        { remove_cursor_wait(); }
    });
});

DEMO

Hope it helps!

Upvotes: 8

iambriansreed
iambriansreed

Reputation: 22241

Try:

Updated to work with jQuery 1.8 +

$(document).ajaxStart(function() {
    $(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
    $(document.body).css({'cursor' : 'default'});
});

Cursor changes on any ajax start and end. That includes .load().

Try out the different cursor styles here:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Upvotes: 74

MConrad
MConrad

Reputation: 11

Try:

$(document).ajaxStart(function () {
    $('body').css('cursor', 'wait');
}).ajaxStop(function () {
    $('body').css('cursor', 'auto');
});

As of jQuery 1.8, the .ajaxStop() and the .ajaxComplete() methods should only be attached to document.

Interchanging .ajaxStop() with .ajaxComplete() both gave me satisfactory results.

Upvotes: 1

RitchieD
RitchieD

Reputation: 1861

I had to tweak the eloquent answer above to work with jQuery > 1.8.

$(document).ajaxStart(function () {
    $(document.body).css({ 'cursor': 'wait' })
});
$(document).ajaxComplete(function () {
    $(document.body).css({ 'cursor': 'default' })
});

Upvotes: 11

eselk
eselk

Reputation: 6884

I tried the various methods I found here and other places and decided there are too many bugs in various browsers (or even setups, like RDP/VNC/Terminal users) with changing the mouse cursor. So instead I ended up with this:

Inside my app init code that fires after document ready:

    // Make working follow the mouse
    var working = $('#Working');
    $(document).mousemove(function(e) {
        working.css({
            left: e.pageX + 20,
            top: e.pageY
        });
    });

    // Show working while AJAX requests are in progress
    $(document).ajaxStart(function() {
        working.show();
    }).ajaxStop(function() {
        working.hide();
    });

And towards the end of my HTML, just inside the body I have:

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div>

It works a lot like the "app loading" mouse cursor in Windows, where you still get your normal cursor, but you can also tell that something is happening. This is ideal in my case because I want the user to feel they can still do other stuff while waiting, since my app handles that pretty well so far (early stages of testing).

My loading.gif file is just a typical spinning wheel, about 16x16 pixels, so not too annoying, but obvious.

Upvotes: 1

mprabhat
mprabhat

Reputation: 20323

You can use this:

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

before you start loading and once complete change the cursor to auto

Upvotes: 5

Iori Yagami
Iori Yagami

Reputation: 134

I hope this helps

$("body").css('cursor','wait');
   //or
   $("body").css('cursor','progress');

greetings

Upvotes: 2

Brad
Brad

Reputation: 163234

Change the body's CSS to cursor: progress.

To do this, just make a "waiting" class with this CSS, and then add/remove the class from the body.

CSS:

.waiting {
    cursor: progress;
}

Then in your JS:

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

You can remove it later with .removeClass.

Upvotes: 0

Related Questions