IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut
    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

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    sur ta page html met une balise style

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <style type="text/css">
    body {cursor: wait !important;}
    </style>
    et un jquery:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(function(){
    document.getElementsByTagName('body')[0].style.cursor = 'default';
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut
    Encore une fois merci de la rapidité

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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?

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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
    Comment installer la bibliothèque jQuery ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut
    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

    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.

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ceci dit, si c'est juste pour modifier le style du curseur, ça me parait un peu excessif d'utiliser jQuery...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <script type="text/javascript">
    window.onload = function(){
        document.body.style.cursor = 'auto';
    }
    </script>
    avec
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <body style="cursor:wait">
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut
    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

  10. #10
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  11. #11
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut
    Citation Envoyé par Bovino Voir le message
    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
    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?

  12. #12
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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
    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

    Au pire, regarde du côté de addEventListener et attachEvent.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    238
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Avril 2009
    Messages : 238
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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!!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 18/04/2015, 16h36
  2. comment afficher le sablier lors d'une exécution?
    Par alassanediakite dans le forum VBScript
    Réponses: 7
    Dernier message: 09/10/2007, 00h39
  3. Réponses: 10
    Dernier message: 28/07/2006, 15h18
  4. Afficher le curseur de la souris
    Par bassim dans le forum C
    Réponses: 3
    Dernier message: 02/12/2005, 17h12
  5. Afficher le sablier sur le desktop
    Par barthelv dans le forum MFC
    Réponses: 2
    Dernier message: 02/09/2005, 11h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo