Menu
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 is going on while an ajax call is being completed. The code below shows a simplified version of what I tried and also demonstrate the problems I run into:
The 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> Later 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 because of 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.
571
We can set the cursor to wait using object. style. cursor = “wait” in javascript.
Answer: Use the CSS cursor property You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor. First of all create cursor image and save it with the extension .
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
If you use this slightly modified version of the CSS you posted from Dorward,
html.wait, html.wait * { cursor: wait !important; } you can then add some really simple jQuery to work for all ajax calls:
$(document).ready(function () { $(document).ajaxStart(function () { $("html").addClass("wait"); }); $(document).ajaxStop(function () { $("html").removeClass("wait"); }); }); or, for older jQuery versions (before 1.9):
$(document).ready(function () { $("html").ajaxStart(function () { $(this).addClass("wait"); }); $("html").ajaxStop(function () { $(this).removeClass("wait"); }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
