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 :

emplacement des sous menu par rapport aux menus principaux


Sujet :

JavaScript

  1. #1
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut emplacement des sous menu par rapport aux menus principaux
    Bonjour,
    j'ai trouvé un menu en javascript, http://demo.raibledesigns.com/struts...mlDropdown.jsp, dans mon site je met un tableau au centre Dans le quel je met toute mes page, lorsque j'ai inséré le menu, il s"insère trés bien dan la position ou je veux sauf lorsque je clique sur l'une des rubriques, il m'affiche les sous menu dans leur emplacement initial cad celui que j'ai montré plus haut, voilà le code :

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    /*
     
    var currentMenu = null;
    var currentSub = null;
     
    if (!document.getElementById) {
        document.getElementById = function() { return null; }
    }
     
    function initializeMenu(menuId, actuatorId) {
        var menu = document.getElementById(menuId);
        var actuator = document.getElementById(actuatorId);
     
        if (menu == null || actuator == null) return;
            
        if (menu.className == "submenu") {
            initializeSubMenu(menuId, actuatorId);
            return;
        }
        
        actuator.onmouseover = function() {
            if (currentMenu) {
                currentMenu.style.visibility = "hidden";
                this.showMenu();
                
          	    if (currentSub != null) {
                    currentSub.style.visibility = "hidden";
          	    }
    	      }
        }
      
        actuator.onclick = function() {
            if (currentMenu == null) {
                this.showMenu();
            }
            else {
                currentMenu.style.visibility = "hidden";
                currentMenu = null;
            }
     
            return false;
        }
     
        actuator.showMenu = function() {
            menu.style.left = this.offsetLeft + "px";
            menu.style.top = this.offsetTop + this.offsetHeight + "px";
            currentMenu = menu;
            menu.style.visibility = "visible";
     
        }
    }
     
    function initializeSubMenu(menuId, actuatorId) {
        var menu = document.getElementById(menuId);
        var actuator = document.getElementById(actuatorId);
        if (menu == null || actuator == null) return;
        
        actuator.className += " subactuator";
        
        actuator.onmouseover = function() {
            if (currentSub) {
                currentSub.style.visibility = "hidden";
                this.showMenu();
            }
        }
        
        actuator.onclick = function() {
            if (currentSub == null) {
                this.showMenu();
            } else {
                currentSub.style.visibility = "hidden";
                currentSub = null;
            }
    	      return false;
        }
        
        actuator.showMenu = function() {
            menu.style.left = 140 + "px";
            menu.style.top = this.offsetTop - 1 + "px";
            menu.style.visibility = "visible";
            currentSub = menu;
        }
    }
     
    function expandMenus() {
        // empty method - this is here b/c the ListDisplayer
        // calls this method for expanding menus and the list
        // type is determined by JavaScript, rather than Java
    }
     
    // This function loops through all the <ul>'s in the document and
    // initializes the menus for them if they have menu classes
    function initializeMenus() {
        var uls = document.getElementsByTagName("ul");
        for (i = 0; i < uls.length; i++) {
            if (uls[i].className == "menuList") {
                decorateMenu(uls[i]);
            }
        }
    }
     
    function decorateMenu(menu) {
        var links = menu.getElementsByTagName("a");
        var lists = document.getElementsByTagName("ul");
     
        var actuators = new Array();
        var nonActuators = new Array();
        // build an array of actuators
        for (i=0; i < links.length; i++) {
            if (links[i].className == "actuator") {
                actuators[actuators.length] = links[i];
            } else {
                nonActuators[nonActuators.length] = links[i];
            }
        }
     
        var menus = new Array();
        // build an array of menus
        for (i=0; i < lists.length; i++) {
            if (lists[i].className == "menu" || lists[i].className == "submenu") {
                menus[menus.length] = lists[i];
            }
        }
     
        // initialize actuators and menus (number should be the same)
        for (i=0; i < actuators.length; i++) {
            initializeMenu(menus[i].id, actuators[i].id);
        }
        
        // Begin custom code to remember last item clicked (with cookies)
        // add an onclick event to set a cookie on the non-actuators
        for (i=0; i < nonActuators.length; i++) {
            nonActuators[i].onclick=function() {
                setCookie(itemCookie,this.href);
            }
        }
    }
     
    /* You can call initializeMenus() manually from your JSP if this doesn't work.
     * Just put the following code after the last menu tag.
     * <script type="text/javascript">
     *     initializeMenus();
     * </script>
     */
    window.onload = initializeMenus;

    Merci pour votre aide !

  2. #2
    Membre averti Avatar de htr999
    Profil pro
    Étudiant
    Inscrit en
    Février 2008
    Messages
    331
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2008
    Messages : 331
    Points : 394
    Points
    394
    Par défaut
    salut
    on arrive à retrouver le code source JS du site ici,
    mais sans le code de ta page ça va être dur !.!

  3. #3
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    bonjour,


    le problème doit venir de cette fonction :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
        actuator.showMenu = function() {
            menu.style.left = this.offsetLeft + "px";
            menu.style.top = this.offsetTop + this.offsetHeight + "px";
            currentMenu = menu;
            menu.style.visibility = "visible";
     
        }
    les positions du menu (left et top) ne tiennent pas compte des coordonnées du nœud parent (dans ton cas la balise TD où se trouve le menu).

  4. #4
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut
    Merci pour ton aide,Comment puis je le faire alors ?

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    euh...

    En fait c'est vraiment galère

    Il faut remonter jusqu'au nœud parent le plus haut (BODY).
    Comme ton menu est dans un TD :
    1- tu dois prendre les coordonnées du TD
    2- puis les ajouter aux coordonnées du TR (parent du TD)
    3- puis les ajouter aux coordonnées de TABLE (parent du TR)
    4- puis tant que le nœud parent n'est pas BODY faire une boucle, qui prend et ajoute les coordonnées du parent, du parent, etc....

    et encore là c'est le plus simple : il faut que tu ajoutes à ça les padding et margin ainsi que l'épaisseur des bordures des différents composants.

    Et pour corser le tout : les valeurs retournées dépendent des navigateurs et du DOCTYPE utilisés



    Tu ne peux pas sortir ce menu du tableau ?

  6. #6
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut
    malheureusement non, et vu que je suis null en javascript la solution la plus optimale c'est de changé le menu

  7. #7
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    malheureusement non, et vu que je suis null en javascript la solution la plus optimale c'est de changé le menu
    pas forcément....
    Je vais voir si je ne peux pas y faire quelque chose. Mais il te faudra être patient, j'ai pas mal de choses à faire cette semaine.


    Je dois bien avoir un menu dans mes archives

  8. #8
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut
    merci,

  9. #9
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    J'ai fait plusieurs scripts... aucun n'a donné satisfaction. Désolé.
    Tu ne peux vraiment pas sortir ce menu du tableau ?

  10. #10
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    j'ai essayé ceci :

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans titre</title>
    <script type="text/javascript">
    function findPos(obj) {
    	//position x / y de l'objet
        var x = obj.offsetLeft || 0;
        var y = obj.offsetTop || 0;
    	//tant qu'il y a un parent, on ajoute la position de son parent
        while (obj = obj.offsetParent) {
            x += obj.offsetLeft
            y += obj.offsetTop
        }
    	//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
        return x;
    }
    </script>
    </head>
     
    <body style="height:100%;">
    <table width="100%" border="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td onclick="alert(findPos(this))">click ici </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td onclick="alert(findPos(this))">et ici </td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <div id="titi" style="background-color:#CCCCCC;position:absolute;left:500px;top:400px;" onclick="alert(findPos(this))">
    	cettte div est positionné en absolute a 500px de gauche et 400px par raport au bord supérieur <br />
    	click moi dessus pour vérifier;
    </div>
     
    <div id="titi" style="background-color:#CCCCCC;position:absolute;left:500px;top:500px;width:200px;" >
    	<div style="background-color:#666666;position:absolute;left:150px;top:100px;" onclick="alert(findPos(this))">
    	cettte div est positionné en absolute à l'intérieur d'une autre a 150 de gauche et 100en y<br />
    	click moi dessus pour vérifier;
    	</div>
    </div>
    </body>
    </html>
    ça a l'air de marcher
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  11. #11
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    j'ai essayé ceci : (...)


    ça a l'air de marcher
    Tu n'as pas de problème si tu modifies les valeurs de padding ou margin de tes div (c'est ce qui pose le plus de problème généralement) ? Ou si tu modifies les valeurs par défaut de cellspacing ou cellpadding ?

  12. #12
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    je test ^^
    c'est ok :
    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans titre</title>
    <script type="text/javascript">
    function findPos(obj) {
    	//position x / y de l'objet
        var x = obj.offsetLeft || 0;
        var y = obj.offsetTop || 0;
    	//tant qu'il y a un parent, on ajoute la position de son parent
        while (obj = obj.offsetParent) {
            x += obj.offsetLeft
            y += obj.offsetTop
        }
    	//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
        return x;
    }
    </script>
    </head>
     
    <body style="height:100%;">
    <table width="100%" border="1" cellpadding="10px" cellspacing="10px">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td onclick="alert(findPos(this))">click ici avec un cellpadding de 10px</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td onclick="alert(findPos(this))">et ici </td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <div id="titi" style="background-color:#CCCCCC;position:absolute;left:500px;top:400px;" onclick="alert(findPos(this))">
    	cettte div est positionné en absolute a 500px de gauche et 400px par raport au bord supérieur <br />
    	click moi dessus pour vérifier;
    </div>
     
    <div id="titi" style="background-color:#CCCCCC;position:absolute;left:500px;top:500px;width:200px;" >
    	<div style="background-color:#666666;position:absolute;left:150px;top:100px;" onclick="alert(findPos(this))">
    	cettte div est positionné en absolute à l'intérieur d'une autre a 150 de gauche et 100en y<br />
    	click moi dessus pour vérifier;
    	</div>
    </div>
    <div style="padding:10px; margin:18px;" onclick="alert(findPos(this))">div normal avec un padding de 10px et un margin de 18px et <div onclick="alert(findPos(this))">une div a l'intérieur</div></div>
    </body>
    </html>
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  13. #13
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    à 1 ou 2 pixels près j'ai les même valeurs sous IE 7 et FF....


    J'ai le souvenir de m'être souvent cassé la tête avec les calculs de coordonnées sous IE et FF

  14. #14
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    la différence , se fait en fait sur les bordures, qui sont à l'intérieur pour ff et a l'extérieur pour ie ( ou l'inverse )

    et moi aussi j'avais pas mal galèré avec le positionnement ^^
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  15. #15
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    la différence , se fait en fait sur les bordures, qui sont à l'intérieur pour ff et a l'extérieur pour ie ( ou l'inverse )

    et moi aussi j'avais pas mal galèré avec le positionnement ^^
    Visiblement avec les dernières versions tout le monde est d'accord

    Reste à voir avec IE6, Opéra, Konqueror, Safari... (désolé)

  16. #16
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    :'( pourquoi tant de haine !
    j'ai un pti logiciel tournant uniquement sous xp permettant de tester les site sous ie 6/5.5/5/4 ( si si 4 )

    mais pas safari ni opéra sous la main
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  17. #17
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 648
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 648
    Points : 11 137
    Points
    11 137
    Par défaut
    bon si ça marche avec IE 7-6-5.5-5 et 4 ( même moi je ne l'ai pas) c'est déjà pas mal

    Pour Safari et Opera, ce n'est pas grave si tu ne peux pas tester

Discussions similaires

  1. ordonner les parents par rapport aux dates des children
    Par fphenix dans le forum Requêtes
    Réponses: 4
    Dernier message: 11/03/2011, 13h29
  2. Placer des table les unes par rapport aux autres.
    Par IyF33 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 13
    Dernier message: 03/07/2008, 09h29
  3. Avantage des EJB par rapport aux POJO
    Par Baptiste Wicht dans le forum JPA
    Réponses: 6
    Dernier message: 13/03/2008, 10h58
  4. Gestion des pages par rapport aux menus
    Par darontankian dans le forum Langage
    Réponses: 3
    Dernier message: 31/01/2008, 21h59
  5. Sous-titres en retrait par rapport aux titres ?
    Par ElGreco2055 dans le forum Mise en forme
    Réponses: 0
    Dernier message: 27/08/2007, 20h57

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