Esperar el cursor sobre toda la página html

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

si un elemento (# ID1) ha establecido un estilo del cursor se ignorará la establecida en el cuerpo (obviamente)
algunos elementos tienen un estilo de cursor predeterminado (a) y no mostrarán el cursor de espera al pasar el mouse
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>

Más tarde editar ...
trabajó 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 (o característica de) esta solución es que se evitará clics debido a la superposición div (gracias Kibbee)

tarde después de edición ...
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 sólo se muestra el cursor de espera, pero permite clics.

Fuente

2008-10-10 Aleris

Parece que no puedo cambiar el cursor de los elementos seleccionados. ¿Hay alguna manera de cambiar el cursor del elemento seleccionado también? – Biswanath

Entiendo que es posible que no tenga control sobre esto, pero puede optar por un div "enmascarado" que cubra todo el cuerpo con un índice z superior a 1. La parte central del div podría contener un mensaje de carga Si te gusta.

Luego, puede configurar el cursor para esperar en el div y no tener que preocuparse por los enlaces ya que están "debajo" de su div de enmascaramiento. He aquí algunos ejemplos de CSS para el "div enmascaramiento":

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

Fuente

2008-10-10 20:46:08

Esto a menudo puede causar problemas. En Firefox, colocar un div fijo sobre toda la página hace que toda la página no se pueda cliquear. es decir, no puede hacer clic en los enlaces, porque no está haciendo clic en el enlace en el que está haciendo clic en el div delante del enlace. – Kibbee

Funciona bien en Firefox. Sin suerte en IE :(. En IE se comporta exactamente como si el div no estuviera allí. La única forma de tener el comportamiento deseado es establecer un color en el fondo div. – Aleris

Gracias por la observación de Kibbee, eso es válido point – Aleris

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

Fuente

2008-10-10 20:27:13 unexist

Estoy de acuerdo parcialmente. Al menos en Windows, el cursor que aparece, si el navegador está cargando una página, es 'cursor: progress' not' cursor: wait'. Usar ese cursor sería mucho más coherente con la experiencia del usuario del navegador. Pero realmente me gusta la idea de cambiar el cursor para indicar que el navegador funciona igual que funciona cuando carga una página. – flu

Esto parece funcionar en Firefox

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

El * parte asegura que el cursor no cambia cuando se pasa sobre un enlace. Aunque aún se podrá hacer clic en los enlaces.

Fuente

2008-10-10 21:02:38 Kibbee

* {cursor: wait! Important; } sería más simple y más probable que funcione en IE (que tiene muchos errores con la palabra clave inherit) – Quentin

¿Puede * {cursor: wait} aplicarse desde javascript?- excepto al iterar todos los elementos en todo el DOM :) – Aleris

tal vez podrías agregar un elemento de estilo y establecer el innerHTML. No sería muy elegante, pero podría funcionar. – Kibbee

Prueba el css:

html.waiting { 
cursor: wait; 
}

Parece que si la propiedad body se utiliza como adosados a html que no muestra el cursor de espera durante toda la página. Además, si usas una clase css, puedes controlar fácilmente cuándo realmente la muestra.

Fuente

2008-10-14 20:28:40 GameFreak

¿Qué es esa clase de espera? ¿Es algo personalizado? – Sebas

102

Si se utiliza esta versión ligeramente modificada de la CSS informados de Dorward,

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

a continuación, puede añadir un poco muy simple jQuery a trabajar para todas las llamadas ajax:

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

o, para versiones de jQuery (antes 1,9):

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

Fuente

2012-05-29 15:11:16 Dani

Realmente quiero usar esta respuesta ... ¿por qué no es la aceptada? –

@ melanomy.penguin Esta pregunta estuvo activa más de 3 años antes de mi respuesta, pero me topé con ella en mi propia búsqueda de una solución, y decidí compartir la solución que terminé usando: una mezcla de la respuesta de Dorward, jQuery y el buen sentido de Kyle Es un poco diferente de lo que el OP estaba buscando, pero si funciona para usted, ¡entonces úselo! :) – Dani

Esta debería ser la respuesta aceptada, funciona como un encanto. – magritte

La manera más fácil que sé es USI ng JQuery como este:

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

Fuente

2012-07-25 07:08:08

que podría tomar "para siempre" si tiene muchos elementos, especialmente en una computadora lenta – redbmk

tiene razón, esto es solo para páginas simples. –

He estado luchando con este problema durante horas hoy. Básicamente todo estaba funcionando bien en Firefox pero (por supuesto) no en IE. En IE, el cursor de espera se muestra DESPUÉS de que se ejecutó la función que consume 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 por lo tanto el presente y MiClase (MyClass es un producto único).

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

Gracias un trillón a glenngv el autor de la publicación. ¡Realmente has hecho mi día!

Fuente

2012-07-30 16:05:51 pasx

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

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

Fuente

2012-10-19 01:26:19 redbmk

Corto y efectivo. – flu

BlockUI es la respuesta para todo. Darle una oportunidad.

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

Fuente

2013-09-10 17:11:19 kulNinja

Aquí es 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 se puede 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

Fuente

2015-07-16 05:22:20 kofifus

He utilizado una adaptación de Eric Wendelin 's solución.Se mostrará una, animados y superpuestos de espera div transparente en todo el cuerpo, el clic será bloqueada por la espera-div mientras visibles:

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

Fuente

2017-10-17 16:00:11 ungalcrys

mis dos peniques:

Paso 1: Declara una matriz. Esto se utiliza para almacenar los cursores originales que fueron asignados:

var vArrOriginalCursors = new Array(2);

Paso 2: Implementar el cursorModifyEntirePage función

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

Lo que hace: Obtiene todos los elementos de la página. Tiendas de los cursores originales asignados a ellos en el array declarado en el paso 1. modifica los cursores a la cursor deseado como pasado por el parámetro CursorType

Paso 3: de restauración de 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]; 
    } 
}

tengo ejecutar esto en una aplicación y funciona bien. La única advertencia es que no lo he probado cuando agregas dinámicamente los elementos.

Fuente

2018-02-22 15:32:12 indiaaditya

Esperar el cursor sobre toda la página html

Respuesta

Cuestiones relacionadas