style - javascript css edit
Espera el cursor sobre toda la página html (11)
¿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 siguiente código muestra una versión simplificada de lo que probé y también demuestra los problemas que encuentro:
- si un elemento (# id1) tiene un estilo de cursor configurado, ignorará el establecido en el cuerpo (obviamente)
- algunos elementos tienen un estilo de cursor predeterminado (a) y no mostrarán el cursor de espera en el vuelo estacionario
- 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 edita ...
Funcionó en Firefox y 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 editaré ...
Una solución más simple de Dorward:
.wait, .wait * { cursor: wait !important; }
y entonces
<a href="#" onclick="document.body.className = ''wait''; return false">Do something</a>
Esta solución solo muestra el cursor de espera, pero permite clics.
¿Por qué no utilizas uno de esos gráficos de carga elegantes (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.
Entiendo que es posible que no tenga control sobre esto, pero podría buscar un div "enmascarado" que cubra todo el cuerpo con un índice z mayor que 1. La parte central del div podría contener un mensaje de carga si lo desea.
Luego, puede configurar el cursor para esperar en el div y no tener que preocuparse por los enlaces ya que están "por debajo" de su div de enmascaramiento. Aquí hay un ejemplo de CSS para el "div enmascarador":
body { height: 100%; } div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }
Esto parece funcionar en Firefox
<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>
La parte * asegura que el cursor no cambia cuando pasa el mouse sobre un enlace. Aunque aún se podrá hacer clic en los enlaces.
Prueba el css:
html.waiting {
cursor: wait;
}
Parece que si el body la propiedad se usa como apposed a html , no muestra el cursor de espera sobre toda la página. Además, si usas una clase css, puedes controlar fácilmente cuándo realmente la muestra.
La manera más fácil que conozco es usar JQuery así:
$(''*'').css(''cursor'',''wait'');
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 este y MyClass (MyClass es un singleton).
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 de tiempo para glenngv el autor de la publicación. ¡Realmente has hecho mi día!
css: .waiting * { cursor: ''wait'' }
jQuery: $(''body'').toggleClass(''waiting'');
BlockUI es la respuesta para todo. Darle una oportunidad.
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
Si usa esta versión ligeramente modificada del CSS que publicó de Dorward,
html.wait, html.wait * { cursor: wait !important; }
A continuación, puede agregar algunas jQuery realmente simples para que funcionen para todas las llamadas ajax:
$(document).ready(function () {
$(document).ajaxStart(function () { $("html").addClass("wait"); });
$(document).ajaxStop(function () { $("html").removeClass("wait"); });
});
o, para versiones antiguas de jQuery (anteriores a 1.9):
$(document).ready(function () {
$("html").ajaxStart(function () { $(this).addClass("wait"); });
$("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
Utilicé una adaptación de la solución de Eric Wendelin . Mostrará una superposición de espera de superposición animada y transparente sobre todo el cuerpo; el clic quedará bloqueado por wait-div 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;"> </div>
... rest of html ...