Est-il possible de mettre le curseur en attente sur toute la page html de manière simple ? L'idée est de montrer à l'utilisateur que quelque chose se passe pendant qu'un appel ajax est en cours. Le code ci-dessous montre une version simplifiée de ce que j'ai essayé et démontre également les problèmes que je rencontre :
- Si un élément (#id1) a un style de curseur défini, il ignorera celui défini sur le corps (évidemment).
- certains éléments ont un style de curseur par défaut (a) et n'afficheront pas le curseur d'attente au survol de l'élément.
- l'élément body a une certaine hauteur qui dépend du contenu et si la page est courte, le curseur ne s'affichera pas sous le pied de page
Le 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>Montage ultérieur...
Il a fonctionné dans firefox et IE avec :
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>Le problème avec (ou la caractéristique de) cette solution est qu'elle empêchera les clics à cause de la div qui se chevauche (merci Kibbee).
Plus tard, le montage...
Une solution plus simple de la part de Dorward :
.wait, .wait * { cursor: wait !important; }et ensuite
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>Cette solution ne montre que le curseur d'attente mais permet les clics.
0 votes
Il semble que je ne sois pas en mesure de changer le curseur pour les éléments de sélection. Existe-t-il un moyen de changer le curseur pour l'élément de sélection également ?