Best IT Recipes

Wait for the cursor to the entire html page

Is it possible to set the cursor to "wait" on the entire html page in a simple way? The idea is to show the user that something happens when an ajax call is made. The code below presents a simplified version of what I tried, and also demonstrates the problems I am facing:

  • if the element (# id1) has the cursor style set, it ignores the one that is set on the body (obviously)
  • some elements have a default cursor style (a) and will not show a wait cursor when it hangs
  • the body element has a certain height depending on the content, and if the page is short, the cursor will not appear below the footer

Test:

<html> <head> <style type="text/css"> #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } </style> </head> <body> <div id="id1">cursor: pointer</div> <div id="id2">no cursor</div> <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a> </body> </html>

Then edit ... It worked in firefox and IE with:

 div#mask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);} <a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false"> Do something</a>

The problem with (or feature) of this solution is that it will prevent clicks due to the overlapping div (thanks Kibbee)

Later, later edit ...
A simpler solution from Dorward:

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

and then

 <a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

This solution only shows the wait cursor, but allows clicks.

+80
javascript html css dynamic-css
Oct 10 '08 at 20:18
source share
11 answers

I understand that you have no control over this, but instead you can use a “masking” div that spans the entire object with an index z above 1. The center part of the div may contain a loading message if you like.

Then you can set the cursor to wait on the div and not worry about the links as they are under your masking div. Here is a CSS example for a "mask div":

 body {height: 100%;  }
 div # mask {cursor: wait;  z-index: 999;  height: 100%;  width: 100%;  }
+28
Oct 10 '08 at 20:46
source share

If you use this slightly modified version of CSS that you submitted from Dorward,

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

you can add some really simple jQuery to work in all ajax calls:

 $(document).ready(function () { $(document).ajaxStart(function () { $("html").addClass("wait"); }); $(document).ajaxStop(function () { $("html").removeClass("wait"); }); });

or, for older versions of jQuery (before 1.9):

 $(document).ready(function () { $("html").ajaxStart(function () { $(this).addClass("wait"); }); $("html").ajaxStop(function () { $(this).removeClass("wait"); }); });
+99
May 29 '12 at 3:11
source share

It looks like firefox

 <style> *{ cursor: inherit;} body{ cursor: wait;} </style>

The * parameter ensures that the cursor does not change when you hover over the link. Although links will still be available.

+11
Oct 10 '08 at 21:02
source share

Today I am struggling with this problem. Basically, everything worked fine in FireFox, but (of course) not in IE. In IE, the wait indicator was displayed AFTER the time function was executed.

I finally found a trick on this site: http://www.codingforums.com/archive/index.php/t-37185.html

the code:

 //... document.body.style.cursor = 'wait'; setTimeout(this.SomeLongFunction, 1); //setTimeout syntax when calling a function with parameters //setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1); //no () after function name this is a function ref not a function call setTimeout(this.SetDefaultCursor, 1); ... function SetDefaultCursor() {document.body.style.cursor = 'default';} function SomeLongFunction(someParam) {...}

My code works in a JavaScript class, therefore, it is also MyClass (MyClass is single-line).

I had the same problems when trying to display a div as described on this page. In IE, it was shown after the function was executed. Therefore, I think that this trick will also solve this problem.

Thank you a million times to glenngv author of the post. You really made my day!

+7
Jul 30 '12 at 16:05
source share

css: .waiting * { cursor: 'wait' }

jQuery: $('body').toggleClass('waiting');

+4
Oct 19 '12 at 1:26
source share

Why don't you just use one of these fancy download schedules (ex: http://ajaxload.info/ )? The pending cursor is for the browser itself - so whenever it appears, it has something to do with the browser, not the page.

+2
Oct 10 '08 at 20:27
source share

The easiest way I know is to use jQuery as follows:

 $('*').css('cursor','wait');
+2
Jul 25 '12 at 7:08
source share

Try css:

 html.waiting { cursor: wait; }

It seems that if the body property is used as specified in html , it does not display the wait cursor on the entire page. Also, if you use the css class, you can easily control when it really shows it.

+1
Oct. 14 '08 at 20:28
source share

Here is a more complex solution that does not require external CSS:

 function changeCursor(elem, cursor, decendents) { if (!elem) elem=$('body'); // remove all classes starting with changeCursor- elem.removeClass (function (index, css) { return (css.match (/(^|\s)changeCursor-\S+/g) || []).join(' '); }); if (!cursor) return; if (typeof decendents==='undefined' || decendents===null) decendents=true; let cname; if (decendents) { cname='changeCursor-Dec-'+cursor; if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' , .'+cname+' * { cursor: '+cursor+' !important; }').appendTo('head'); } else { cname='changeCursor-'+cursor; if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' { cursor: '+cursor+' !important; }').appendTo('head'); } elem.addClass(cname); }

with this you can:

 changeCursor(, 'wait'); // wait cursor on all decendents of body changeCursor($('#id'), 'wait', false); // wait cursor on elem with id only changeCursor(); // remove changed cursor from body
+1
Jul 16 '15 at 5:22
source share

BlockUI is the answer to everything. Give it a try.

http://www.malsup.com/jquery/block/

0
Sep 10 '13 at 17:11
source share

I used the adaptation of Eric Wendelin . It will show a transparent animated overlay wait-div over the whole body, the click will be blocked by the wait-div command when visible:

CSS

 div#waitMask { z-index: 999; position: absolute; top: 0; right: 0; height: 100%; width: 100%; cursor: wait; background-color: #000; opacity: 0; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; }

JS:

 // to show it $("#waitMask").show(); $("#waitMask").css("opacity"); // must read it first $("#waitMask").css("opacity", "0.8"); ... // to hide it $("#waitMask").css("opacity", "0"); setTimeout(function() { $("#waitMask").hide(); }, 500) // wait for animation to end

HTML:

 <body> <div id="waitMask" style="display:none;">&nbsp;</div> ... rest of html ...
0
Oct 17 '17 at 16:00
source share


More articles:


All Articles