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 :

Action sur "click out"


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut Action sur "click out"
    Bonjour à tous. Voici mon problème :
    Ma bannière possède une zone cliquable ayant pour action de faire apparaître une div en position absolute et display none d'origine.

    Voici le code de ma div :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="fonctions" onmouseover="this.style.display= 'block'" onmouseout="this.style.display= 'none'">
    Et celui de ma bannnière :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="enTeteGauche" onclick="if(document.getElementById(\'fonctions\').style.display== \'block\'){document.getElementById(\'fonctions\').style.display= \'none\'}else{document.getElementById(\'fonctions\').style.display= \'block\'}" onmouseout="(document.getElementById(\'fonctions\').style.display= \'none\'">
    Le problème est que lorsque je passe de la div de ma bannière à celle étant apparue, celle-ci disparaît. Pourtant, les div se chevauchent bien donc je passe sur la div "absolute" avant de sortir de la div de ma bannière, mais elle se ferme quand même... Donc je ne comprends pas..

    Si quelqu'un a la solution, merci d'avance ^^

  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
    stopPropagation ? cancelBubble ?
    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é
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Ces deux propriétés servent à annuler les actions de l'élément parent c'est bien ça ?

  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
    oui ...
    de plus là il y a un ( en trop

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onmouseout="(document.getElementById(\'fonctions\').style.display= \'none\'">
    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é
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Je n'arrive décidément pas à utiliser ces deux propriétés.. Si je comprends bien, elles serviraient à annuler le "onmouseout" de la div de ma bannière au suvol de la "bulle" ?

  6. #6
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Désolé du double post mais je suis complètement perdu...
    Je n'arrête pas de lire des posts ayant rencontré ce problème me je n'y comprend jamais grand chose.. Tous mes tests ont été des échecs..

    Faut-il utiliser ces deux fonctions dans la div enfant ou parent ? Et COMMENT faut-il les utiliser svp ?

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    Le problème est que lorsque je passe de la div de ma bannière à celle étant apparue, celle-ci disparaît. Pourtant, les div se chevauchent bien donc je passe sur la div "absolute" avant de sortir de la div de ma bannière, mais elle se ferme quand même... Donc je ne comprends pas..
    comme tu quittes la DIV du dessous cela déclenche le mouseout de la DIV du dessous pour déclencher le mouseover de la DIV du dessus.

    Essaies de ne pas mettre d'événement onmouseout sur la DIV du dessous et de laisser la DIV du dessus s'autofermer.

    Suivant ce que tu veux réellement réalisé il existe aussi le CSS, mais par pour onclick malheureusement.

    au passage
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="fonctions" onmouseover="this.style.display= 'block'" onmouseout="this.style.display= 'none'">
    l'événement onmouseover ne sera JAMAIS déclenché la DIV n'ayant pas de consistance à l'écran.

  8. #8
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Merci beaucoup de ta réponse.
    Je l'ai mis car je pensais que lorsque je passerais sur celle-ci, son mouseover primerait sur le mouseout de celle du dessous..

    Si j'enlève le mouseout de celle du dessous, ma div ne se fermera jamais si l'utilisateur ne va pas dessus.. Or, c'est un menu, ce qui est donc embêtant..

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    dans ce cas diffère la fermeture via un setTimeout que tu clearTimeouteras lors du onmouseover sur la DIV du dessus, dans le cas contraire la DIV du dessus se fermera automatiquement si elle n'est pas survolée.

  10. #10
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Si je comprends bien, lorsque l'utilisateur cliqueras sur la div parent, la div enfant s'affichera et le timer se déclenchera. Et lors du passage su la div enfant (du dessus), le timer sera annulé.

    Cependant, si l'utilisateur clique sur la div parent, mais qu'il décide d'aller sur la div enfant APRES que le timer se soit exécuté, l'effet sera le même non..?

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    en règle générale si je clique sur un lien ou autre c'est pour voir ce qu'il y a après.

    Si une zone apparaît et comporte d'autres liens je les parcours, sinon non et dans ce cas la fenêtre effectivement se referme sans que j'ai eu le temps de lire, je lis doucement. Dans ce cas je dirais que ton approche n'est pas la bonne.

    Si tu veux que l'on soit "obligé" de survoler cette zone alors positionne la exactement sur celle venant d'être cliquée.

  12. #12
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Tu as raison en effet. Je vais donc adopter la méthode visant à initialiser un timer. Voici comment je m'y suis pris d'après tes explications :

    Div parent :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="enTeteGauche" onclick="if(document.getElementById(\'fonctions\').style.display== \'block\'){document.getElementById(\'fonctions\').style.display= \'none\'}else{document.getElementById(\'fonctions\').style.display= \'block\'}" onmouseout="compt=(setTimeout("document.getElementById(\'fonctions\').style.display= \'none\'", 1000));">
    Div enfant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="fonctions" onmouseover="this.style.display= 'block'; clearTimeout(compt);" onmouseout="this.style.display= 'none'">
    Cependant, ça ne fonctionne pas

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    je constate quelques "erreurs" dans ce que tu as codé
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="enTeteGauche" onclick="if(document.getElementById(\'fonctions\').style.display== \'block\'){document.getElementById(\'fonctions\').style.display= \'none\'}else{document.getElementById(\'fonctions\').style.display= \'block\'}" onmouseout="compt=(setTimeout("document.getElementById(\'fonctions\').style.display= \'none\'", 1000));">
    - mauvaise alternance des quottes et double quottes, dans la partie onmouseout entrainant la plante du script
    - quand il commence a y avoir pas mal de code autant passer par l'appel d'une fonction.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="enTeteGauche"
      onclick = "if(document.getElementById('fonctions').style.display == 'block'){
        document.getElementById('fonctions').style.display = 'none';
      }
      else{
        document.getElementById('fonctions').style.display= 'block';
      };"
      onmouseout = "compt=(setTimeout('document.getElementById(\'fonctions\').style.display= \'none\';', 1000));">
    concernant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div id="fonctions" onmouseover="this.style.display= 'block'; clearTimeout(compt);" onmouseout="this.style.display= 'none'">
    il est inutile de mettre this.style.display= 'block' dans le mouseover
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="fonctions"
      onmouseover = "clearTimeout(compt);" 
      onmouseout  = "this.style.display = 'none';">

  14. #14
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Voilà où j'en suis :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <script type="text/javascript">
    function timer(){
    	var compt=(setTimeout("document.getElementById('fonctions').style.display= 'none';", 1000));
    };
    </script>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div ... onmouseout="timer();">
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="fonctions" 
         onmouseover="clearTimeout(compt); this.style.display= 'block';"
         onmouseout="this.style.display= 'none'">
    Le timer fonctionne parfaitement, cependant, le clearTimeout ne fonctionne lui pas. En effet, lorsque je survole ma div du dessus, celle-ci disparaît à la fin du timer.

    De plus, mon
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.style.display= 'block';
    est nécessaire car si je passe d'un lien à l'autre dans ma div, celle-ci active son onmouseout. Je suis donc obligé de le mettre pour qu'elle ne disparaisse pas..


    Merci encore de toute ton aide

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    la variable compt est déclarée en local dans ta fonction timer donc non accessible dans le reste de ta page.
    Il te faut faire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
    var compt;  // variable globale
    function timer(){
      compt=(setTimeout("document.getElementById('fonctions').style.display= 'none';", 1000));
    };
    </script>

  16. #16
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    Ca ne marche toujours pas.. Cette fois-ci le timer se déclenche bien mais le clearTimeout n'a apparemment pas d'effet puisque même si je vais sur la div enfant, celle-ci disparait à la fin du timer..

    De plus, si je mets un alert lors de mon onmouseout, celui-ci se déclenche si je passe sur un paragraphe de ma div. EN gros, j'ai l'impression que dès que je passe sur un élément de ma div, le onmouseout de celle-ci se déclenche. (C'est aussi pour cela que je dois mettre le onmouseover sur ma div enfant, car dès que je passe sur un lien de cette div, son onmouseout est exécuté...

  17. #17
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    voila un code qui fonctionne suivant ce que l'on vient de dire
    Code html : 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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE Html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>[...]</title>
    <style type="text/css">
    #enTeteGauche {
      height :50px;
      background-color : #e0e0e0;
      border : 1px solid #888;
    }
    #fonctions {
      height :150px;
      width :150px;
      background-color : #e0e0f0;
      border : 1px solid #88f;
      display : none;
    }
    </style>
    <script type="text/javascript">
    var compt;  // variable globale
    function timer(){
      compt=(setTimeout("document.getElementById('fonctions').style.display= 'none';", 1000));
    };
    </script></head>
    <body>
    <div id="enTeteGauche"
      onclick = "if(document.getElementById('fonctions').style.display == 'block'){
        document.getElementById('fonctions').style.display = 'none';
      }
      else{
        document.getElementById('fonctions').style.display= 'block';
      };"
      onmouseout = "timer();">
    </div>
    <div id="fonctions"
      onmouseover = "clearTimeout(compt);"
      onmouseout  = "this.style.display = 'none';">
    </div>
    </body>
    </html>
    Or, c'est un menu, ce qui est donc embêtant..
    maintenant si c'est un menu il existe des approches purement CSS.

    Il serait peut être souhaitable que tu nous montre ton code, au moins la partie concerné.

  18. #18
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2011
    Messages : 146
    Par défaut
    J'ai repensé tout mon système. Et j'ai réussi à obtenir un comportement qui me convient, voilà comment j'ai fait :

    Lorsque je clique sur la div parent, la div enfant s'ouvre. Sauf que je l'ai redimensionnée, de sorte à recouvrir entièrement la div parent (l'agrandissement de celle-ci ne se voit pas à l'oeil nu, c'est invisible). Ainsi, je suis toujours sur ma div enfant. Et si je clique à nouveau sur la partie de ma div enfant recouvrant seulement la div parent, je ferme la div enfant.

    De plus, lors du click sur la div parent, j'affiche une div ayant pour dimensions toute la page (récupérer les valeurs au click), ayant un z-index inférieur à celui de ma div enfant. Et je lui ai ajouté un évènement "onmouseover" qui ferme la div enfant ainsi qu'elle-même (la div recouvrant toute la page).

    Ce procédé me permet de gérer aussi mon menu sur un appareil comme l'ipad où le fait, une fois la div enfant ouverte, d'appuyer n'importe ou ailleurs dans l'écran permette de fermer celle-ci. Ce qui est indispensable sur ce type d'appareil.

    Donc voilà, j'espère avoir été clair, en tout cas cette solution marche parfaitement et me semble être la plus propre.

    Merci encore beaucoup à vous tous et à bientôt !

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

Discussions similaires

  1. [2.3] Action sur double-click sur une série
    Par Robiwan59 dans le forum BIRT
    Réponses: 1
    Dernier message: 19/08/2008, 11h43
  2. Réponses: 2
    Dernier message: 18/01/2007, 17h14
  3. Problème sur Request.ServerVariables("QUERY_STRING"
    Par PrinceMaster77 dans le forum ASP
    Réponses: 3
    Dernier message: 25/03/2005, 11h47

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