apariencia cursor para todo el documento

Mahalo · #1 (**permalink**) 21/06/2007, 08:19

Hola!

Tengo una función. Lo que quiero es que mientras se ejecuta (tarda unos dos segundillos), el cursor tome apariencia de reloj de arena. Ya sé que el css es cursor:wait, pero no sé cómo aplicarlo desde javascript a todo el documento. Ya he probado document.body.style.cursor='wait'; y document.body.className='cursorWait'; entre otras y nada.

Saludos!

derkenuke · #2 (**permalink**) 21/06/2007, 14:06

Pero tu función, ¿tarda porque tarda tiempo en ejectutarla por ser pesada y colapsar el ordenador/navegador del visitante o tarda porque tiene un setTimeout? ¿Quizás sea AJAX?

Este ejemplo me ha funcionado bien en FF, eso sí, sólo funciona para las partes del documento que están dibubadas / escritas. Si no se completa el documento para toda la pantalla, no se verá diferencia entre el cursor default dentro y fuera de la página:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam luctus posuere ipsum. Aliquam condimentum, nisi ut rhoncus dictum, sapien mauris iaculis pede, sit amet laoreet diam libero sed nisi. Fusce adipiscing quam in purus. Duis sapien sem, mollis vel, condimentum vel, hendrerit at, libero. Integer pretium augue eget orci. In vel odio sit amet massa elementum dapibus. Curabitur iaculis. Nulla posuere varius odio. Praesent quis lorem id eros commodo pulvinar. Pellentesque nulla pede, tincidunt tristique, semper in, cursus id, velit. Aliquam vehicula sapien eget ligula. Sed dolor. Phasellus adipiscing nisi vitae justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In cursus neque non mauris. Sed eu eros. Suspendisse potenti. Sed auctor tempor lorem.
</p>
<p>Integer risus justo, condimentum ac, blandit ut, aliquet ut, elit. Pellentesque enim urna, ultricies eu, porta quis, vulputate at, felis. Nullam euismod. Maecenas ornare, risus vitae bibendum vehicula, lectus nibh fermentum eros, et vulputate lorem erat sit amet eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum et dolor. Aliquam malesuada massa a libero. Aenean iaculis tempus purus. Aliquam eros lectus, ullamcorper non, gravida eget, sollicitudin vitae, lorem. Morbi sed risus non ligula adipiscing facilisis. Donec sed libero. Nunc eu est nec arcu pharetra laoreet. Mauris eu enim in est suscipit consequat. In quis enim. Integer nulla. In hac habitasse platea dictumst. Vestibulum porttitor nisi fringilla metus. Nulla vitae massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Vestibulum volutpat. Etiam elementum elementum massa. Curabitur at eros sed urna pharetra mollis. Donec convallis rhoncus lacus. Integer tortor est, pharetra iaculis, accumsan vel, ultricies quis, lorem. Donec leo. Mauris bibendum faucibus ante. Ut ultrices lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ornare lectus sollicitudin neque.
</p>



<button onclick="document.body.style.cursor='wait'">wait</button> <button onclick="document.body.style.cursor='default';">normal</button>

</body>
</html>

Un saludo.

Mahalo · #3 (**permalink**) 22/06/2007, 01:40

Hola y gracias por responder.

Efectivamente se trata de ajax y eso que me cuentas ya lo había probado (como ya había dicho). Pero tienen prioridad otros elementos de la página, como enlaces u otros estilos de cursor.

En fin, que tendré que prescindir de este detallito.

derkenuke · #4 (**permalink**) 22/06/2007, 19:00

Si tu problema son los enlaces, puedes recorrerlos para aplicarles el cursor uno por uno, no habrá problemas:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
</head>

<body>

<p>Lorem ipsum dolor <a href="enlace.htm">sit</a> amet, consectetuer adipiscing elit. Nam luctus posuere ipsum. Aliquam condimentum, nisi ut rhoncus dictum, sapien mauris iaculis pede, sit amet laoreet diam libero sed nisi. Fusce adipiscing quam in purus. Duis sapien sem, mollis vel, condimentum vel, hendrerit at, libero. Integer pretium augue eget orci. In vel odio sit amet massa elementum dapibus. Curabitur iaculis. Nulla posuere varius odio. Praesent quis lorem id eros commodo pulvinar. Pellentesque nulla pede, tincidunt tristique, semper in, cursus id, velit. Aliquam vehicula sapien eget ligula. Sed dolor. Phasellus adipiscing nisi vitae justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In cursus neque non mauris. Sed eu eros. Suspendisse potenti. Sed auctor tempor lorem.
</p>
<p>Integer risus justo, <a href="link.htm">condimentum</a> ac, blandit ut, aliquet ut, elit. Pellentesque enim urna, ultricies eu, porta quis, vulputate at, felis. Nullam euismod. Maecenas ornare, risus vitae bibendum vehicula, lectus nibh fermentum eros, et vulputate lorem erat sit amet eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum et dolor. Aliquam malesuada massa a libero. Aenean iaculis tempus purus. Aliquam eros lectus, ullamcorper non, gravida eget, sollicitudin vitae, lorem. Morbi sed risus non ligula adipiscing facilisis. Donec sed libero. Nunc eu est nec arcu pharetra laoreet. Mauris eu enim in est suscipit consequat. In quis enim. Integer nulla. In hac habitasse platea dictumst. Vestibulum porttitor nisi fringilla metus. Nulla vitae massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Vestibulum volutpat. Etiam elementum elementum massa. Curabitur at eros sed urna pharetra mollis. Donec convallis rhoncus lacus. Integer tortor est, pharetra iaculis, accumsan vel, ultricies quis, lorem. Donec leo. Mauris bibendum faucibus ante. Ut ultrices lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ornare lectus sollicitudin neque.
</p>

<script type="text/javascript">
function ponCursor(cur) {
    document.body.style.cursor=cur;
    //para todos los enlaces el cursor cur
    var enlaces = document.getElementsByTagName("A");
    for(var i=0; i<enlaces.length; i++)
        enlaces[i].style.cursor=cur;
}
</script>

<button onclick="ponCursor('wait')">wait</button> <button onclick="ponCursor('')">normal</button>

</body>
</html>

Así lo haríamos con todos los elementos que veas que te dan problemas. Incluso puedes desactivarlos mientras AJAX está trabajando (un poco peligroso...).

Un saludo.