Tunggu kursor di atas seluruh halaman html

89

Apakah mungkin menyetel kursor untuk 'menunggu' di seluruh halaman html dengan cara yang sederhana? Idenya adalah untuk menunjukkan kepada pengguna bahwa ada sesuatu yang terjadi saat panggilan ajax diselesaikan. Kode di bawah ini menunjukkan versi sederhana dari apa yang saya coba dan juga menunjukkan masalah yang saya hadapi:

  1. jika sebuah elemen (# id1) memiliki set gaya kursor, ia akan mengabaikan set pada body (jelas)
  2. beberapa elemen memiliki gaya kursor default (a) dan tidak akan menampilkan kursor tunggu saat mengarahkan kursor
  3. elemen tubuh memiliki ketinggian tertentu tergantung pada konten dan jika halaman pendek, kursor tidak akan ditampilkan di bawah footer

Ujian:

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

Kemudian edit ...
Ini bekerja di firefox dan IE dengan: 

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>

Masalah dengan (atau fitur) solusi ini adalah ia akan mencegah klik karena div yang tumpang tindih (terima kasih Kibbee)

Nanti kemudian edit ...
Solusi yang lebih sederhana dari Dorward:

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

lalu 

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

Solusi ini hanya menampilkan kursor tunggu tetapi memungkinkan klik.

javascript html css dynamic-css Aleris
sumber
Sepertinya saya tidak dapat mengubah kursor untuk elemen terpilih. Apakah ada cara untuk mengubah kursor untuk elemen pilih juga?
Biswanath

Jawaban:

34

Saya mengerti Anda mungkin tidak memiliki kendali atas hal ini, tetapi Anda bisa menggunakan div "masking" yang menutupi seluruh tubuh dengan indeks-z lebih tinggi dari 1. Bagian tengah div dapat berisi pesan pemuatan jika Anda mau.

Kemudian, Anda dapat menyetel kursor untuk menunggu di div dan tidak perlu mengkhawatirkan link karena link tersebut "di bawah" div masking Anda. Berikut beberapa contoh CSS untuk "masking div":

tubuh {tinggi: 100%; }
div # mask {cursor: tunggu; z-indeks: 999; tinggi: 100%; lebar: 100%; }
Eric Wendelin
sumber
3
Ini seringkali dapat menimbulkan masalah. Di Firefox, menempatkan div tetap di seluruh halaman menyebabkan seluruh halaman menjadi tidak dapat diklik. yaitu, Anda tidak dapat mengklik link, karena Anda tidak mengklik link, Anda mengklik div di depan link.
Kibbee
1
Bekerja dengan baik di firefox. Tidak beruntung di IE :(. Di IE, ia berperilaku persis seolah-olah div tidak ada. Satu-satunya cara untuk mendapatkan perilaku yang diinginkan adalah dengan menyetel warna pada latar belakang div.
Aleris
2
Ok setelah sedikit lebih bermain akhirnya bekerja dengan: div # mask {display: none; kursor: tunggu; z-indeks: 9999; posisi: mutlak; atas: 0; kiri: 0; tinggi: 100%; lebar: 100%; background-color: #fff; opasitas: 0; filter: alpha (opacity = 0);}
Aleris
Setuju, Kibbee, itu sangat tergantung pada perilaku yang Anda inginkan. Kedengarannya seperti Aleris tidak ingin pengguna melakukan apapun (karena itu tunggu kursor) sampai AJAX memanggil kembali.
Eric Wendelin
3
Saya menggunakan posisi: tetap sehingga selalu di layar, dengan posisi: mutlak tidak akan muncul ketika saya berada di bagian bawah halaman.
Jj.
111

Jika Anda menggunakan versi CSS yang sedikit dimodifikasi yang Anda posting dari Dorward,

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

Anda kemudian dapat menambahkan beberapa jQuery yang sangat sederhana untuk bekerja untuk semua panggilan ajax:

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

atau, untuk versi jQuery yang lebih lama (sebelum 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
Dani
sumber
4
Saya benar-benar ingin menggunakan jawaban ini ... mengapa tidak diterima?
gloomy.penguin
1
@ gloomy.penguin Pertanyaan ini aktif lebih dari 3 tahun sebelum jawaban saya, tetapi saya menemukannya dalam pencarian saya sendiri untuk mendapatkan solusi, dan memutuskan untuk membagikan solusi yang akhirnya saya gunakan: campuran jawaban Dorward, jQuery, dan akal sehat Kyle. Ini sedikit berbeda dari apa yang dicari OP, tetapi jika itu berhasil untuk Anda, maka gunakanlah! :)
Dani
Saya setuju. Bekerja dengan baik dan IMHO itu harus menjadi jawaban yang diterima.
savehansson
1
Jika ini tidak berhasil untuk Anda, periksa di sini: JQuery.com "Pada JQuery 1.9, peristiwa Ajax global hanya dipicu pada elemen dokumen." Contoh:$(document).ajaxStart(function () { $("html").addClass("wait"); });
Debbie A
1
Sebelum menghapus kelas tunggu, Anda mungkin ingin memeriksa apakah $.activeadalah 0, jika ada beberapa permintaan yang dibuat dan semuanya belum selesai.
Shane Reustle
12

Ini sepertinya berfungsi di firefox

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

Bagian * memastikan bahwa kursor tidak berubah saat Anda mengarahkan kursor ke atas tautan. Meskipun tautan masih dapat diklik.

Kibbee
sumber
* {kursor: tunggu! penting; } akan lebih sederhana dan lebih mungkin bekerja di IE (yang memiliki banyak bug dengan kata kunci inherit)
Quentin
1
Bisakah * {cursor: wait} diterapkan dari javascript? - kecuali dengan mengulang semua elemen di seluruh DOM :)
Aleris
mungkin Anda bisa menambahkan elemen gaya dan mengatur innerHTML. Tidak akan terlalu elegan, tapi mungkin berhasil.
Kibbee
3
.wait, .wait * {cusor: wait! important; } dan kemudian setel document.body.className = 'wait'; dengan JavaScript
Quentin
1
Perhatikan bahwa ada kesalahan ketik "kursor" di komentar di atas, jika Anda menyalin / menempelkannya.
devios1
7

Saya telah bergumul dengan masalah ini selama berjam-jam hari ini. Pada dasarnya semuanya bekerja dengan baik di FireFox tetapi (tentu saja) tidak di IE. Di IE kursor tunggu muncul SETELAH fungsi yang memakan waktu dijalankan.

Saya akhirnya menemukan trik di situs ini: http://www.codingforums.com/archive/index.php/t-37185.html

Kode:

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

Kode saya berjalan di kelas JavaScript maka ini dan MyClass (MyClass is a singleton).

Saya mengalami masalah yang sama saat mencoba menampilkan div seperti yang dijelaskan di halaman ini. Di IE ini ditampilkan setelah fungsi dijalankan. Jadi saya kira trik ini akan menyelesaikan masalah itu juga.

Terima kasih banyak sekali waktu untuk glenngv penulis pos. Anda benar-benar membuat hari saya menyenangkan !!!

pasx
sumber
4

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

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

redbmk
sumber
2

Mengapa Anda tidak hanya menggunakan salah satu dari grafik pemuatan yang mewah (misalnya: http://ajaxload.info/ )? Kursor menunggu adalah untuk browser itu sendiri - jadi setiap kali kursor muncul itu ada hubungannya dengan browser dan bukan dengan halaman.

tidak ada
sumber
Saya setuju sebagian. Setidaknya di jendela kursor yang muncul, jika browser itu sendiri sedang memuat halaman, cursor: progresstidak cursor: wait. Menggunakan kursor itu akan jauh lebih koheren dengan pengalaman pengguna browser. Tetapi saya sangat menyukai gagasan untuk mengubah kursor untuk menunjukkan bahwa browser berfungsi seperti halnya saat memuat halaman.
flu
2

Cara termudah yang saya tahu adalah menggunakan JQuery seperti ini:

$('*').css('cursor','wait');
jere_hr
sumber
yang bisa memakan waktu "selamanya" jika Anda memiliki banyak elemen, terutama pada komputer yang lambat
redbmk
1

Coba css:

html.waiting {
cursor: wait;
}

Tampaknya jika properti bodydigunakan sebagai apposed ke htmlitu tidak menampilkan kursor tunggu di seluruh halaman. Selain itu, jika Anda menggunakan kelas css, Anda dapat dengan mudah mengontrol kapan kelas itu benar-benar menampilkannya.

GameFreak
sumber
Kelas menunggu apa itu? Apakah itu kebiasaan?
Sebas
1

Berikut adalah solusi yang lebih rumit yang tidak memerlukan CSS eksternal:

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

dengan ini, Anda dapat melakukan:

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
kofifus.dll
sumber
1

Saya menggunakan adaptasi dari Eric Wendelin solusi . Ini akan menampilkan div tunggu hamparan beranimasi transparan di seluruh tubuh, klik akan diblokir oleh div tunggu saat terlihat:

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

Dua pence saya:

Langkah 1: Deklarasikan sebuah array. Ini akan digunakan untuk menyimpan kursor asli yang ditetapkan:

var vArrOriginalCursors = new Array(2);

Langkah 2: Implementasikan fungsi 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;
    }
}

Kegunaan: Mendapatkan semua elemen di halaman. Menyimpan kursor asli yang ditetapkan padanya dalam larik yang dideklarasikan di langkah 1. Memodifikasi kursor ke kursor yang diinginkan seperti yang dilewatkan oleh parameter CursorType

Langkah 3: Pulihkan kursor di halaman

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

Saya telah menjalankan ini dalam aplikasi dan berfungsi dengan baik. Satu-satunya peringatan adalah saya belum mengujinya saat Anda menambahkan elemen secara dinamis.

indiaaditya
sumber
1

Untuk mengatur kursor dari JavaScript untuk seluruh jendela, gunakan:

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

Dari CSS:

html { cursor: wait; }

Tambahkan logika lebih lanjut sesuai kebutuhan.

Peter J. de Bruin
sumber
Solusi javascript ini adalah yang terbaik, melakukan pekerjaan tanpa menyentuh bagasi HTML. Ini jauh lebih baik daripada mengganti kelas pada elemen yang sangat lambat jika Anda memiliki banyak node di DOM Anda.
Rajshekar Reddy
0

JavaScript murni ini tampaknya bekerja dengan cukup baik ... diuji di browser FireFox, Chrome, dan Edge.

Saya tidak yakin dengan kinerja ini jika Anda memiliki elemen yang melimpah di halaman Anda dan komputer lambat ... coba dan lihat.

Setel kursor untuk semua elemen menunggu:

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

Setel kursor untuk semua elemen kembali ke default:

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

Versi alternatif (dan mungkin sedikit lebih mudah dibaca) adalah membuat fungsi setCursor sebagai berikut:

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

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

dan kemudian menelepon

setCursor("wait");

dan

setCursor("default");

untuk mengatur kursor tunggu dan kursor default.

kecepatan
sumber