Warten Sie mit dem Mauszeiger über die gesamte HTML-Seite

89

Ist es möglich, den Cursor auf einfache Weise auf der gesamten HTML-Seite auf "Warten" zu setzen? Die Idee ist, dem Benutzer zu zeigen, dass etwas los ist, während ein Ajax-Anruf abgeschlossen wird. Der folgende Code zeigt eine vereinfachte Version von dem, was ich versucht habe, und zeigt auch die Probleme, auf die ich stoße:

  1. Wenn für ein Element (# id1) ein Cursorstil festgelegt ist, wird der am Körper festgelegte ignoriert (offensichtlich).
  2. Einige Elemente haben einen Standardcursorstil (a) und zeigen den Wartecursor beim Hover nicht an
  3. Das Body-Element hat je nach Inhalt eine bestimmte Höhe. Wenn die Seite kurz ist, wird der Cursor nicht unter der Fußzeile angezeigt

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

Später bearbeiten ...
Es funktionierte in Firefox und IE mit: 

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>

Das Problem (oder die Funktion) dieser Lösung ist, dass sie Klicks aufgrund des überlappenden Div verhindert (danke Kibbee).

Später später bearbeiten ...
Eine einfachere Lösung von Dorward:

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

und dann 

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

Diese Lösung zeigt nur den Wartecursor an, erlaubt jedoch Klicks.

javascript html css dynamic-css Aleris
quelle
Wie es scheint, kann ich den Cursor für die ausgewählten Elemente nicht ändern. Gibt es eine Möglichkeit, den Cursor auch für das Auswahlelement zu ändern?
Biswanath

Antworten:

33

Ich verstehe, dass Sie möglicherweise keine Kontrolle darüber haben, aber Sie könnten sich stattdessen für ein "Maskierungs" -Div entscheiden, das den gesamten Körper mit einem Z-Index über 1 abdeckt. Der mittlere Teil des Div kann eine Lademeldung enthalten, wenn Sie möchten.

Dann können Sie den Cursor so einstellen, dass er auf das Div wartet und sich keine Gedanken über Links machen muss, da diese sich "unter" Ihrem Maskierungs-Div befinden. Hier ist ein Beispiel für CSS für das "Masking Div":

Körpergröße: 100%; }}
div # mask {cursor: wait; Z-Index: 999; Höhe: 100%; Breite: 100%; }}
Eric Wendelin
quelle
3
Dies kann häufig zu Problemen führen. Wenn Sie in Firefox ein festes Div über die gesamte Seite setzen, kann die gesamte Seite nicht mehr angeklickt werden. Das heißt, Sie können nicht auf Links klicken, weil Sie nicht auf den Link klicken, sondern auf das Div vor dem Link.
Kibbee
1
Funktioniert in Firefox einwandfrei. Kein Glück im IE :(. Im IE verhält es sich genau so, als ob das Div nicht da wäre. Die einzige Möglichkeit, das gewünschte Verhalten zu erzielen, besteht darin, eine Farbe auf dem Div-Hintergrund festzulegen.
Aleris
2
Ok, nach ein bisschen mehr Spiel hat es endlich geklappt mit: div # mask {display: none; Cursor: warten; Z-Index: 9999; Position: absolut; oben: 0; links: 0; Höhe: 100%; Breite: 100%; Hintergrundfarbe: #fff; Deckkraft: 0; Filter: Alpha (Deckkraft = 0);}
Aleris
Einverstanden, Kibbee, es hängt wirklich von Ihrem gewünschten Verhalten ab. Es hört sich so an, als ob Aleris nicht möchte, dass der Benutzer etwas tut (daher der Wartecursor), bis AJAX zurückruft.
Eric Wendelin
3
Ich habe Position: fest verwendet, damit es immer auf dem Bildschirm angezeigt wird. Position: Absolut wurde nicht angezeigt, wenn ich mich am Ende der Seite befand.
Jj.
111

Wenn Sie diese leicht modifizierte Version des CSS verwenden, das Sie von Dorward gepostet haben,

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

Sie können dann einige wirklich einfache jQuery hinzufügen , die für alle Ajax-Aufrufe funktionieren:

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

oder für ältere jQuery-Versionen (vor 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
Dani
quelle
4
Ich möchte diese Antwort wirklich verwenden ... warum ist sie nicht die akzeptierte?
gloomy.penguin
1
@ gloomy.penguin Diese Frage war mehr als 3 Jahre vor meiner Antwort aktiv, aber ich bin auf meiner eigenen Suche nach einer Lösung darauf gestoßen und habe beschlossen, die Lösung zu teilen, die ich letztendlich verwendet habe: eine Mischung aus Dorwards Antwort, jQuery, und Kyles Verstand. Es ist ein bisschen anders als das, wonach das OP gesucht hat, aber wenn es für Sie funktioniert, dann verwenden Sie es! :)
Dani
Genau. Funktioniert super und meiner Meinung nach sollte es die akzeptierte Antwort sein.
Savehansson
1
Wenn dies bei Ihnen nicht funktioniert, überprüfen Sie dies hier: JQuery.com "Ab JQuery 1.9 werden die globalen Ajax-Ereignisse nur für das Dokumentelement ausgelöst." Beispiel:$(document).ajaxStart(function () { $("html").addClass("wait"); });
Debbie A
1
Bevor Sie die $.activeWarteklasse entfernen, möchten Sie wahrscheinlich überprüfen, ob 0 ist, falls mehrere Anforderungen gestellt wurden und alle noch nicht abgeschlossen sind.
Shane Reustle
12

Dies scheint in Firefox zu funktionieren

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

Der * -Teil stellt sicher, dass sich der Cursor nicht ändert, wenn Sie mit der Maus über einen Link fahren. Obwohl Links weiterhin anklickbar sind.

Kibbee
quelle
* {Cursor: warte! wichtig; } wäre einfacher und würde eher im IE funktionieren (der viele Fehler mit dem geerbten Schlüsselwort aufweist)
Quentin
1
Kann * {cursor: wait} aus Javascript angewendet werden? - außer durch Iteration aller Elemente im gesamten DOM :)
Aleris
Vielleicht könnten Sie ein Stilelement hinzufügen und das innerHTML festlegen. Wäre nicht sehr elegant, aber es könnte funktionieren.
Kibbee
3
.wait, .wait * {cusor: warte! wichtig; } und setze dann document.body.className = 'wait'; mit JavaScript
Quentin
1
Beachten Sie, dass der obige Kommentar einen Tippfehler von "Cursor" enthält, falls Sie ihn kopieren / einfügen.
Devios1
7

Ich habe heute stundenlang mit diesem Problem zu kämpfen. Grundsätzlich funktionierte in FireFox alles einwandfrei, aber (natürlich) nicht im IE. Im IE wurde der Wartecursor angezeigt, nachdem die zeitaufwändige Funktion ausgeführt wurde.

Ich habe endlich den Trick auf dieser Seite gefunden: http://www.codingforums.com/archive/index.php/t-37185.html

Code:

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

Mein Code wird in einer JavaScript-Klasse ausgeführt, daher this und MyClass (MyClass ist ein Singleton).

Ich hatte die gleichen Probleme beim Versuch, ein Div anzuzeigen, wie auf dieser Seite beschrieben. Im IE wurde es angezeigt, nachdem die Funktion ausgeführt wurde. Ich denke, dieser Trick würde auch dieses Problem lösen.

Vielen Dank, dass Sie dem Autor des Beitrags zig Mal Zeit gegeben haben. Du hast wirklich meinen Tag gemacht !!!

pasx
quelle
4

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

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

redbmk
quelle
2

Warum verwenden Sie nicht einfach eine dieser ausgefallenen Ladegrafiken (z. B. http://ajaxload.info/ )? Der wartende Cursor ist für den Browser selbst bestimmt. Wenn er angezeigt wird, hat er etwas mit dem Browser und nicht mit der Seite zu tun.

nicht vorhanden
quelle
Ich stimme teilweise zu. Zumindest unter Windows ist der Cursor, der angezeigt wird, wenn der Browser selbst eine Seite lädt, cursor: progressnicht cursor: wait. Die Verwendung dieses Cursors wäre viel kohärenter mit der Benutzererfahrung des Browsers. Aber ich mag die Idee wirklich, den Cursor zu ändern, um anzuzeigen, dass der Browser genauso funktioniert wie beim Laden einer Seite.
Grippe
2

Der einfachste Weg, den ich kenne, ist die Verwendung von JQuery wie folgt:

$('*').css('cursor','wait');
jere_hr
quelle
Das könnte "ewig" dauern, wenn Sie viele Elemente haben, insbesondere auf einem langsamen Computer
redbmk
1

Versuchen Sie das CSS:

html.waiting {
cursor: wait;
}

Es scheint, dass, wenn die Eigenschaft bodywie angegeben verwendet wird, der Wartecursor htmlnicht über die gesamte Seite angezeigt wird . Wenn Sie eine CSS-Klasse verwenden, können Sie außerdem leicht steuern, wann sie tatsächlich angezeigt wird.

Spielsüchtiger
quelle
Was ist das für eine Warteklasse? Ist es etwas Brauches?
Sebas
1

Hier ist eine ausgefeiltere Lösung, für die kein externes CSS erforderlich ist:

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

Damit können Sie tun:

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

Ich habe eine Adaption von Eric Wendelins Lösung verwendet. Es wird ein transparentes, animiertes Overlay-Wait-Div über den gesamten Körper angezeigt. Der Klick wird durch das Wait-Div blockiert, solange es sichtbar ist:

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

Meine zwei Pence:

Schritt 1: Deklarieren Sie ein Array. Dies wird verwendet, um die ursprünglichen Cursor zu speichern, die zugewiesen wurden:

var vArrOriginalCursors = new Array(2);

Schritt 2: Implementieren Sie die Funktion 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;
    }
}

Was es tut: Ruft alle Elemente auf der Seite ab. Speichert die ihnen zugewiesenen ursprünglichen Cursor in dem in Schritt 1 deklarierten Array. Ändert die Cursor auf den gewünschten Cursor, der vom Parameter CursorType übergeben wird

Schritt 3: Stellen Sie die Cursor auf der Seite wieder her

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

Ich habe dies in einer Anwendung ausgeführt und es funktioniert gut. Die einzige Einschränkung ist, dass ich es nicht getestet habe, wenn Sie die Elemente dynamisch hinzufügen.

Indienaditya
quelle
1

Verwenden Sie Folgendes, um den Cursor von JavaScript für das gesamte Fenster zu setzen:

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

Aus CSS:

html { cursor: wait; }

Fügen Sie nach Bedarf weitere Logik hinzu.

Peter J. de Bruin
quelle
Diese Javascript-Lösung ist die beste, erledigt die Arbeit, ohne das HTML-Gepäck zu berühren. Dies ist weitaus besser als das Umschalten von Klassen für Elemente, was sehr langsam ist, wenn Sie viele Knoten in Ihrem DOM haben.
Rajshekar Reddy
0

Dieses reine JavaScript scheint ziemlich gut zu funktionieren ... getestet in FireFox-, Chrome- und Edge-Browsern.

Ich bin mir über die Leistung nicht sicher, wenn Sie eine Überfülle an Elementen auf Ihrer Seite und einen langsamen Computer hatten ... probieren Sie es aus und sehen Sie.

Setzen Sie den Cursor für alle zu wartenden Elemente:

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

Setzen Sie den Cursor für alle Elemente auf den Standardwert zurück:

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

Eine alternative (und vielleicht etwas besser lesbare) Version wäre, eine setCursor-Funktion wie folgt zu erstellen:

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

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

und dann anrufen

setCursor("wait");

und

setCursor("default");

um den Wartecursor bzw. den Standardcursor zu setzen.

Javocity
quelle