Espere el cursor sobre toda la página html

https://stackoverflow.com/questions/192900

08-07-2019
|

Pregunta

¿Es posible configurar el cursor para 'esperar' en toda la página html de una manera simple? La idea es mostrarle al usuario que algo está sucediendo mientras se completa una llamada ajax. El siguiente código muestra una versión simplificada de lo que probé y también demuestra los problemas con los que me encuentro:

si un elemento (# id1) tiene un estilo de cursor establecido, ignorará el conjunto del cuerpo (obviamente)
algunos elementos tienen un estilo de cursor predeterminado (a) y no mostrarán el cursor de espera al pasar el cursor
el elemento del cuerpo tiene una cierta altura dependiendo del contenido y si la página es corta, el cursor no se mostrará debajo del pie de página

La prueba:

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

Edición posterior ...
Funcionó en Firefox e IE con:

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>

El problema con (o característica de) esta solución es que evitará clics debido a la superposición de div (gracias Kibbee)

Más tarde más tarde editar ...
Una solución más simple de Dorward:

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

y luego

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

Esta solución solo muestra el cursor de espera pero permite clics.

Solución

Entiendo que es posible que no tenga control sobre esto, pero en su lugar podría optar por un "enmascaramiento" div que cubre todo el cuerpo con un índice z superior a 1. La parte central del div podría contener un mensaje de carga si lo desea.

Luego, puede configurar el cursor para que espere en el div y no tenga que preocuparse por los enlaces, ya que están " debajo de " tu div enmascarante. Aquí hay un ejemplo de CSS para el " enmascaramiento div " ;:

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }

Otros consejos

Si usa esta versión ligeramente modificada del CSS que publicó desde Dorward,

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

puede agregar algunos jQuery realmente simples para que funcionen en todas las llamadas ajax:

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

o, para versiones anteriores de jQuery (anteriores a 1.9):

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

Esto parece funcionar en Firefox

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

La parte * asegura que el cursor no cambie cuando pasa el mouse sobre un enlace. Aunque los enlaces seguirán siendo clicables.

He estado luchando con este problema durante horas hoy. Básicamente todo funcionaba bien en Firefox pero (por supuesto) no en IE. En IE, el cursor de espera se mostraba DESPUÉS de que se ejecutó la función que consume mucho tiempo.

Finalmente encontré el truco en este sitio: http://www.codingforums.com/archive/index.php/t -37185.html

Código:

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

Mi código se ejecuta en una clase de JavaScript, de ahí el this y MyClass (MyClass es un singleton).

Tuve los mismos problemas al intentar mostrar un div como se describe en esta página. En IE se mostraba después de que la función se había ejecutado. Así que supongo que este truco también resolvería ese problema.

Agradece muchísimo tiempo por conocer al autor de la publicación. ¡Realmente me alegraste el día!

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

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

¿Por qué no utiliza uno de esos gráficos de carga sofisticados (por ejemplo: http://ajaxload.info/)? El cursor de espera es para el navegador en sí mismo, por lo que cada vez que aparece tiene algo que ver con el navegador y no con la página.

La forma más fácil que sé es usar JQuery de esta manera:

$('*').css('cursor','wait');

Pruebe el CSS:

html.waiting {
cursor: wait;
}

Parece que si la propiedad body se usa como se adjunta a html , no muestra el cursor de espera en toda la página. Además, si usa una clase css, puede controlar fácilmente cuándo realmente la muestra.

Aquí hay una solución más elaborada que no requiere CSS externo:

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

con esto puedes hacer:

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

BlockUI es la respuesta para todo. Pruébalo.

http://www.malsup.com/jquery/block/

Utilicé una adaptación de la solución de Eric Wendelin . Mostrará una capa de espera transparente y animada sobre todo el cuerpo, el clic será bloqueado por la división de espera mientras esté visible:

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

Mis dos peniques:

Paso 1: Declarar una matriz. Esto se usará para almacenar los cursores originales que se asignaron:

var vArrOriginalCursors = new Array(2);

Paso 2: Implemente la función 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;
    }
}

Qué hace: Obtiene todos los elementos de la página. Almacena los cursores originales asignados a ellos en la matriz declarada en el paso 1. Modifica los cursores para el cursor deseado según lo pasó el parámetro CursorType

Paso 3: Restaurar los cursores en la página

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

He ejecutado esto en una aplicación y funciona bien. La única advertencia es que no lo he probado cuando está agregando dinámicamente los elementos.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow