Databases
StackOverflow2013
Postsdbo
POWait cursor over entire html page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWait cursor over entire html page
    text
    copied!<p>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:</p> <ol> <li>if an element (#id1) has a cursor style set it will ignore the one set on body (obviously) </li> <li>some elements have a default cursor style (a) and will not show the wait cursor on hover </li> <li>the body element has a certain height depending on the content and if the page is short, the cursor will not show below the footer</li> </ol> <p>The test:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="id1"&gt;cursor: pointer&lt;/div&gt; &lt;div id="id2"&gt;no cursor&lt;/div&gt; &lt;a href="#" onclick="document.body.style.cursor = 'wait'; return false"&gt;Do something&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Later edit...<br> It worked in firefox and IE with: </p> <pre><code>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);} &lt;a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false"&gt; Do something&lt;/a&gt; </code></pre> <p>The problem with (or feature of) this solution is that it will prevent clicks because of the overlapping div (thanks Kibbee)</p> <p>Later later edit...<br> A simpler solution from Dorward:</p> <pre><code>.wait, .wait * { cursor: wait !important; } </code></pre> <p>and then </p> <pre><code>&lt;a href="#" onclick="document.body.className = 'wait'; return false"&gt;Do something&lt;/a&gt; </code></pre> <p>This solution only shows the wait cursor but allows clicks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload