Afficher le sablier de la souris lors d'un chargement de page.

Version imprimable

03/05/2011, 16h57
mcfly37

Afficher le sablier de la souris lors d'un chargement de page.
Bonjour,

Je travail actuellement sur une application en jsf 1.1. Et ma problématique actuelle est d'afficher la souris avec le petit sablier (un grand classique de windows qui rame ^^) lors d'un chargement de page.

Après quelques recherches je pense connaitre la syntaxe à utiliser :
Code:

1 2 3 4 5 6 7 window.onload=function(){ document.getElementsByTagName('body')[0].style.cursor = 'wait'; } window.onunload=function(){ document.getElementsByTagName('body')[0].style.cursor = 'default'; }
Mais cela me pause quelques problèmes car autant le curseur s'affiche bien en sablier mais par contre il ne revient pas à la normal ensuite...
Question subsidiaire, avez vous connaissance d'une différence de comportement entre ie6 et ie7 justement à ce niveau la, en effet sous ie6 le sablier s'affichait nativement à coté de la souris, sans intervention de ma part et j'ai du le rajouter manuellement lors de la migration de l'application sous ie7 mais si cela se trouve il y a un autre moyen mieux?

Merci d'avance de vos réponses, a vot' bon cœur m'sieur dames!!

Cordialement

mcfly
03/05/2011, 17h00
SpaceFrog

le onunload c'est pour quand tu quittes la page ...

mets le style wait dans le css
et retablit le style default dans le onload
04/05/2011, 09h58
mcfly37

Bonjour,

merci de ta réponse, alors apparemment pas de changements avec tes conseils... De plus est-il possible de ne pas modifier la css? Car nous utilisons des fichiers css pour plusieurs applications donc si je peut éviter de faire ma petite tambouille dedans ^^

Merci encore de la rapidité de la réponse :ccool:

sur ta page html met une balise style

Code:

1
2
3
<style type="text/css">
body {cursor: wait !important;}
</style>

et un jquery:

Code:

1
2
3
$(function(){
document.getElementsByTagName('body')[0].style.cursor = 'default';
}

Encore une fois merci de la rapidité :ccool:

Par contre toujours le même problème le curseur reste affiché en sablier une fois la page chargée... Cela tien peut être au jquery qui est mal intégré? D'ailleurs pour utiliser du jQuery il faut peut être que j'ajoute les librairies qui vont bien? Oui je suis un débutant complet en javascript ^^ il n'est jamais trop tard pour apprendre!!

intégration de la fonction jQuery dans la page html (enfin jsp dans mon cas):
Code:

1 2 3 4 5 6 <script type="text/javascript"> document.onkeydown = filtrerTouches; $(function(){ document.getElementsByTagName('body')[0].style.cursor = 'default'; } </script>
Est-ce la bonne façons de faire ou est-ce que j'oublie quelque chose?

04/05/2011, 10h42
Bovino

Citation:

D'ailleurs pour utiliser du jQuery il faut peut être que j'ajoute les librairies qui vont bien?

Euh... oui, c'est la moindre des choses lorsque tu utilises des fonctions de les avoir définies au préalable :koi:
:faq: :fleche: Comment installer la bibliothèque jQuery ?
04/05/2011, 13h39
mcfly37

En effet c'est mieux en incluant les librairies (question bête de ma part ^^)

Mais j'ai toujours le même problème... le curseur ne se remet pas en default... Cela doit venir je pense de la ligne $(function(){...} j'ai l'impression qu'il manque quelque chose pour que le navigateur sache quand faire fonctionner cette fonction non? Je suis une bille complète en javascript donc la je pédale dans la semoule, excusez moi si mes questions paraissent débiles :aie:

Autre question j'ai inclu uniquement le fichier jquery.js (le core quoi) pas besoin de jqueryui je ne me trompe pas?

Edit : Après m'être promené dans les tutos le code $(function{}) correspond a windows.onLoad = function{} donc a priori tout va bien...

Par contre j'ai tester un alert(document.getElementsByTagName('body')[0].style.cursor); et cela n'affiche aucune valeur... la question est maintenant si c'est la syntaxe du alert qui est mauvaise ou du document.getElementsBy tagName... qui est mauvaise et du coup ne remet pas le curseur à default... je vais investiguer la dessus.
04/05/2011, 13h48
Bovino
Ceci dit, si c'est juste pour modifier le style du curseur, ça me parait un peu excessif d'utiliser jQuery...
Code:

1 2 3 4 5 <script type="text/javascript"> window.onload = function(){ document.body.style.cursor = 'auto'; } </script>
avec

Code:

<body style="cursor:wait">
04/05/2011, 14h17
mcfly37

En effet l'utilisation de jquery était un peu du tuage de mouche au bazooka ^^

Par contre tuojours le même problème de curseur qui ne revient pas à la normale... Je soupconne fortement le document.body.style.cursor car c'est à peu près la seule partie qui pourrait me sembler susceptible de ne pas marcher... a fortiori comme l'application tourne sous ie7 avec les problèmes d'interprétation de javascript de ces navigateurs...

Par contre testé sous firefox cela ne marche pas non plus alors que logiquement cela devrait marcher... j'ai tester sur un tuto (ici) qui propose un petit exemple de changement de curseur, il fonctionne parfaitement avec mon firefox mais pas sous ie ce qui renforce mon impression du problème de syntaxe...

Merci en tout cas de vous pencher sur mon cas :ccool:
04/05/2011, 14h32
Bovino

Non, ce n'est pas la syntaxe qui fonctionne même avec IE6 mais plus probablement le fait que lorsque tu survoles ta page, ce n'est pas le body mais les balises à l'intérieur du body que tu survoles :aie:
04/05/2011, 14h43
mcfly37

Citation:

Envoyé par Bovino

Non, ce n'est pas la syntaxe qui fonctionne même avec IE6 mais plus probablement le fait que lorsque tu survoles ta page, ce n'est pas le body mais les balises à l'intérieur du body que tu survoles :aie:

Vous parlez du site dont j'ai donné l'adresse ou de mon problème?

Sinon autre piste que je vient de trouver, j'ai dans un autre fichier javascript inclut dans mes pages la ligne suivante :

window.onload=noBack;

noBack étant une fonction nous permettant d’empêcher l'utilisation des boutons précédents et suivant, le fait que j'ai en deux endroits différents l'utilisation de l'événement window.onload pourrait-il poser problème?
04/05/2011, 14h54
Bovino

Citation:

Envoyé par mcfly37

Vous parlez du site dont j'ai donné l'adresse ou de mon problème?

Sur le site, ça ne fonctionne pas parce que les balises option n'ont pas de value (et pour IE6 parce que le prologue XML fait basculer en mode quircks)

Citation:

Envoyé par mcfly37

window.onload=noBack;

noBack étant une fonction nous permettant d’empêcher l'utilisation des boutons précédents et suivant, le fait que j'ai en deux endroits différents l'utilisation de l'événement window.onload pourrait-il poser problème?

Ben oui :aie:
Tu ne peux pas donner deux valeurs différentes à un attribut !
Ceci dit, je ne vois pas trop à quoi peut servir la fonction noBack puisqu'il est impossible d'empêcher l'utilisation des boutons suivant et précédent :koi:

Au pire, regarde du côté de addEventListener et attachEvent.

Me revoila!!

Alors problème "presque" résolu!!! je réussi a afficher le curseur comme je le veut grace au code suivant (qui en plus marche sous tous les navigateurs ^^) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 /** * Permet l'ajout de plusieurs fonction sur un seul evenenement. */ function addEvent(obj, event, fct){ if(obj.attachEvent) //Si on est dans ce cas la c'est que l'on est sous ie. obj.attachEvent("on" + event, fct); else //Autre navigateur. obj.addEventListener(event, fct, true); } /** * Empeche l'utilisation des boutons Précédent et Suivant d'Internet Explorer. */ function noBack(){window.history.forward();} /** * Remet l'icone du curseur dans sa forme par defaut (fleche). */ function mouseDefault(){ document.body.style.cursor = 'default'; } function mouseWait(){ document.body.style.cursor = 'wait' ; } noBack(); addEvent(window, "load", noBack); addEvent(window, "pageshow", function(evt){if(evt.persisted)noBack();}); addEvent(window, "unload", function(){void(0);}); addEvent(window, "load", mouseDefault); addEvent(window, "beforeunload", mouseWait);
Mais il me reste encore un petit problème, apparement l'évenement "load" est appellé au début du chargement de la page... hors je voudrait moi l'événement qui est appelé à la fin du chargement de la page... Une idée de sont petit nom? (j'ai tenté afterload mais pas de changement ^^)

en tout cas merci de votre aide!!!