HTMLページ全体の上にカーソルを置く

89

カーソルをHTMLページ全体で簡単に「待機」するように設定することはできますか？アイデアは、ajax呼び出しが完了している間に何かが起こっていることをユーザーに示すことです。以下のコードは、私が試したものの簡単なバージョンを示しており、私が遭遇した問題も示しています：

  1. 要素（＃id1）にカーソルスタイルが設定されている場合、ボディに設定されているものは無視されます（明らかに）
  2. 一部の要素にはデフォルトのカーソルスタイル（a）があり、ホバー時に待機カーソルが表示されません
  3. body要素はコンテンツに応じて特定の高さを持ち、ページが短い場合、カーソルはフッターの下に表示されません

テスト：

<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>

後で編集...
それはFirefoxとIEで動作しました： 

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>

このソリューション（または機能）の問題は、divが重複しているためクリックが防止されることです（Kibbeeに感謝）

後で編集...
ドーワードのより簡単な解決策：

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

その後 

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

このソリューションでは、待機カーソルのみが表示され、クリックは許可されます。

javascript  html  css  dynamic-css 
— アレリス
ソース
選択要素のカーソルを変更できないようです。選択要素のカーソルも変更する方法はありますか？
— ビスワナート

回答:

33

あなたはこれを制御できないかもしれませんが、代わりに1より大きいz-indexで体全体をカバーする「マスキング」divに行くかもしれません。divの中央部分には、必要に応じて読み込みメッセージを含めることができます。

次に、divで待機するようにカーソルを設定し、マスキングdivの「下」にあるリンクについて心配する必要はありません。「マスキングdiv」のCSSの例を以下に示します。

本文{高さ：100％; }
div＃mask {cursor：wait; z-index：999; 高さ：100％; 幅：100％; }
— エリック・ウェンデリン
ソース
3
これはしばしば問題を引き起こす可能性があります。Firefoxでは、ページ全体に固定divを配置すると、ページ全体がクリックできなくなります。つまり、リンクをクリックすることはできません。リンクの前にあるdivをクリックしているからです。
— Kibbee 08年
1
Firefoxで問題なく動作します。IEでは運が悪い:(。IEでは、divがそこにないかのように動作します。目的の動作を行う唯一の方法は、divの背景に色を設定することです
— 。–
2
もう少し遊んだ後でOKです。最終的には次のように動作しました。カーソル：待機。z-index：9999; 位置：絶対; 上：0; 左：0; 高さ：100％; 幅：100％; background-color：#fff; 不透明度：0; filter：alpha（opacity = 0）;}
— Aleris
同意しました、Kibbee、それは本当にあなたが望む行動に依存します。Alerisは、AJAXがコールバックするまで、ユーザーに何も（つまり、待機カーソルを）させたくないようです。
— エリックウェンデリン
3
私はposition：fixedを使用して常に画面上に表示し、position：absoluteを使用すると、ページの下部に表示されませんでした。
— Jj。
111

Dorwardから投稿したCSSのこのわずかに変更されたバージョンを使用する場合、

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

次に、いくつかの本当に単純なjQueryを追加して、すべてのajax呼び出しで機能するようにします。

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

または、古いjQueryバージョン（1.9より前）の場合：

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
— ダニ
ソース
4
私は本当にこの答えを使いたいのですが...なぜそれが受け入れられないのですか？
— gloomy.penguin 2013
1
@ gloomy.penguinこの質問は私の回答の3年以上前に活発でしたが、私は自分の解決策の検索で偶然見つけ、私が使用することになった解決策を共有することにしました。Dorwardの回答、jQuery、そしてカイルの良識。それはOPが探していたものとは少し異なりますが、それがあなたのために機能する場合は、それを使用してください！:)
— ダニ
同意する。うまくいき、私見はそれが受け入れられた答えであるべきです。
— savehansson 2014年
1
これが機能しない場合は、ここをチェックしてください：JQuery.com 「JQuery 1.9以降、グローバルAjaxイベントはドキュメント要素でのみトリガーされます。」例：$(document).ajaxStart(function () { $("html").addClass("wait"); });
— デビーA
1
待機クラスを削除する前に$.active、複数の要求が行われ、それらがすべてまだ完了していない場合は、0 かどうかを確認する必要があります。
— Shane Reustle
12

これはFirefoxで動作するようです

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

*部分は、リンクの上にカーソルを置いたときにカーソルが変化しないことを保証します。リンクはまだクリック可能ですが。

— キビー
ソース
* {カーソル：待つ！重要; }の方がシンプルでIEで動作する可能性が高くなります（inheritキーワードに多くのバグがあります）
— Quentin
1
* {cursor：wait}をJavaScriptから適用できますか？-DOM全体のすべての要素を繰り返すことを除いて:)
— -DOM Aleris
おそらく、style要素を追加してinnerHTMLを設定できます。あまりエレガントではありませんが、うまくいくかもしれません。
— Kibbee 08年
3
.wait、.wait * {cusor：wait！important; 次に、document.body.className = 'wait';を設定します。JavaScriptを使って
— Quentin
1
コピー/ペーストする場合に備えて、上記のコメントには「カーソル」のタイプミスがあることに注意してください。
— devios1 2013年
7

今日、私はこの問題に何時間も取り組んでいます。基本的に、FireFoxではすべてが正常に機能していましたが、IEでは（もちろん）機能していませんでした。IEでは、時間のかかる関数が実行された後、待機カーソルが表示されていました。

私は最終的にこのサイトでトリックを見つけました：http : //www.codingforums.com/archive/index.php/t-37185.html

コード：

//...
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) {...}

私のコードはJavaScriptクラスで実行されるため、thisとMyClass（MyClassはシングルトンです）で実行されます。

このページで説明されているように、divを表示しようとしたときに同じ問題が発生しました。IEでは、関数が実行された後に表示されていました。したがって、このトリックでその問題も解決できると思います。

投稿者のglenngvに膨大な時間をありがとう。あなたは本当に私の日を作りました!!!

— パスク
ソース
4

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

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

— redbmk
ソース
2

これらのファンシーロードグラフィック（例：http : //ajaxload.info/）の1つだけを使用しないのはなぜですか。待機カーソルはブラウザ自体のためのものです。つまり、表示されるときは常に、ページではなくブラウザに関係しています。

— 存在しない
ソース
部分的に同意します 少なくともウィンドウでは、ブラウザ自体がページをロードしている場合に表示されるカーソルはcursor: progressそうではありませんcursor: wait。このカーソルを使用すると、ブラウザのユーザーエクスペリエンスとの一貫性が大幅に向上します。しかし、カーソルを変更して、ブラウザがページをロードしたときと同じように動作していることを示すというアイデアが本当に気に入っています。
— インフルエンザ
2

私が知っている最も簡単な方法は、次のようにJQueryを使用することです。

$('*').css('cursor','wait');
— jere_hr
ソース
多くの要素がある場合、特に低速のコンピューターでは、「永久に」かかる可能性があります
— redbmk '19年
1

CSSを試してください：

html.waiting {
cursor: wait;
}

プロパティbodyを適切に使用するhtmlと、ページ全体に待機カーソルが表示されないようです。さらに、CSSクラスを使用すると、実際に表示するタイミングを簡単に制御できます。

— GameFreak
ソース
その待機クラスは何ですか？それは何かカスタムですか？
— セバス
1

外部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);
}

これであなたはできる：

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

私はエリック・ウェンデリンの解決策を採用しました。透明なアニメーション化されたオーバーレイの待機divが全身に表示され、クリックは表示されている間待機divによってブロックされます。

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 ...
— Ungalcrys
ソース
1

私の2ペンス：

手順1：配列を宣言します。これは、割り当てられた元のカーソルを格納するために使用されます。

var vArrOriginalCursors = new Array(2);

ステップ2：関数cursorModifyEntirePageを実装する

 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

内容：ページ上のすべての要素を取得します。それらに割り当てられた元のカーソルを、手順1で宣言した配列に格納します。カーソルを、パラメーターCursorTypeによって渡された目的のカーソルに変更します。

手順3：ページ上のカーソルを復元する

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

これをアプリケーションで実行したところ、問題なく動作しました。唯一の注意点は、要素を動的に追加しているときにテストしていないことです。

— インドアディティア
ソース
1

JavaScriptからウィンドウ全体にカーソルを設定するには、以下を使用します。

document.documentElement.style.cursor = 'wait';

CSSから：

html { cursor: wait; }

必要に応じて、さらにロジックを追加します。

— ピーターJ.デブルイン
ソース
このjavascriptソリューションは最高で、HTMLの手荷物に触れることなく作業を行います。これは、DOMに多くのノードがある場合に非常に遅い要素のクラスを切り替えるよりもはるかに優れています。
— Rajshekar Reddy
0

この純粋なJavaScriptはかなりうまくいくようです... FireFox、Chrome、およびEdgeブラウザーでテストされています。

ページの要素が多すぎてコンピューターが遅い場合のパフォーマンスはわかりません...試してみてください。

待機するすべての要素にカーソルを設定します。

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

すべての要素のカーソルをデフォルトに戻します。

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

別の（そしておそらくもう少し読みやすい）バージョンは、次のようにsetCursor関数を作成することです。

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

そして次に電話する

setCursor("wait");

そして

setCursor("default");

待機カーソルとデフォルトカーソルをそれぞれ設定します。

— やり投げ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.