CODEWITHSUNDEEP
javascript
cssyphus
cssyphus

Reputation: 40038

Mouse cursor only changed when over specific element

In this code, taken from Cocco's answer/jsFiddle in this question, the mouse cursor is only changed to "wait" style when the mouse is hovering over the progress div.

Why is that, and how to make it so that the cursor is the wait style all over that page, until the operation is completed?

HTML:

<button type="button" id="gogogo">Go!</button>
<div id="progress">0</div>

Javascript:

(function (W) {
    W.onload = function () {
        var D = W.document,
            a = 0,
            c = D.getElementById('progress');

        function b() {
            c.innerText = a + 1;
            a++;
            if (a < 3000) {
                requestAnimationFrame(b);
            } else {
                D.body.style.cursor = 'default';
            }
        }

        function start() {
            D.body.style.cursor = 'wait';
            b()
        }
        D.getElementById('gogogo').onclick = start;
    }
})(window)

Upvotes: 1

Views: 76

Answers (1)

j08691
j08691

Reputation: 207891

Well, that's because your body is only about 40px tall. Add:

body, html {
    height:100%;
    padding:0;
    margin:0;
}

to take up the height of the browser.

jsFiddle example

Upvotes: 2

Related Questions