Discussion :

[pito2901]

bonjour, je me trouve avec un probl�me tr�s basique mais tr�s aga�ant... Je souhaite, lorsque je clique sur ma div, qu'elle grandisse, que la couleur change, etc. mais je souhaite �galement la refermer lorsque je clique sur la "fl�che retour" or �a ne marche pas.

Voici le code en question:

Code css :

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
#crosscol{
margin:0;
}
.menuhoz{
background-color:#171717;
color:#ff9900;
height:50px;
width:50px;
line-height:50px;
text-align:center;
transition:all 0.5s;
}
.menuhoz:hover{
color:#171717;
background-color:#ff9900;
cursor:pointer;
}
.menuhoz #imgmenuhoz{
width:0px;
height:0px;
margin-top:2px;
margin-left:2px;
cursor:pointer;
float:left;
}

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<div id="menuhoz" class="menuhoz">
<img id="imgmenuhoz" src="http://www.zupmage.eu/i/BdD50UvFdR.png"></img><span>MENU</span>
</div>

Code JS :

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
var MENUHOZ = document.getElementById("menuhoz")
var IMG = document.getElementById("imgmenuhoz")
 
MENUHOZ.style.cssText = 'transition:all 1s;';
IMG.style.cssText = 'transition:all 1s 1s;';
 
MENUHOZ.onclick = function(){
  MENUHOZ.style.cssText = 'background-color:#ff9900;color:#171717;cursor:default';
  MENUHOZ.style.width = '100%';
  MENUHOZ.style.height = '100px';
 
  IMG.style.width = '15px';
  IMG.style.height = '15px';
}
IMG.onclick = function(){
  MENUHOZ.style.cssText = 'background-color:#171717;;color:#ff9900';
  MENUHOZ.style.width = '50px';
  MENUHOZ.style.height = '50px';
 
  IMG.style.width = '0px';
  IMG.style.height = '0px';
};

Et la d�mo correspondante... Merci de noter les modifications sur votre post.

Merci pour votre aide, pito2901

[Crackerz]

Bonjour,

Le soucis viens du fait qu'en utilisant le DOM-0 vous ne pouvez d�finir deux fois le m�me �v�nements (onclick dans votre cas)
La solution consiste � utiliser la m�thode addEventListener() qui vous permettra de cr�er plusieurs �v�nements click.
De plus, les �l�ments enfants de votre div h�rite de l'�v�nement or votre fl�che � son propre �v�nement...

[pito2901]

Ouaou ! Je m'attendais � un truc plus simple, du coup �a donnerait quoi si on adaptait votre astuce � mon code ?

[Crackerz]

Entre temps j'ai �diter mon message ( voir la derni�re ligne ), pour l'utilisation de la m�thode pr�c�dente :

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
    MENUHOZ.addEventListener('click',function(){
        MENUHOZ.style.cssText = 'background-color:#ff9900;color:#171717;cursor:default';
        MENUHOZ.style.width = '100%';
        MENUHOZ.style.height = '100px';
 
        IMG.style.width = '15px';
        IMG.style.height = '15px';
 
    });
 
    IMG.addEventListener('click', function(){
        MENUHOZ.style.cssText = 'background-color:#171717;color:#ff9900';
        MENUHOZ.style.width = '50px';
        MENUHOZ.style.height = '50px';
 
        IMG.style.width = '0px';
        IMG.style.height = '0px';
 
    });

Cependant lorsque vous cliquez sur la fl�che vous cliquez sur le div donc � la fin vous ne voyez pas le changement mais il est pr�sent, il faut g�rer l'h�ritage de l'�v�nement ou sortir la fl�che du div � vous de voir ...

[pito2901]

Merci, mais votre code ne fonctionne pas...

Cependant lorsque vous cliquez sur la fl�che vous cliquez sur le div donc � la fin vous ne voyez pas le changement mais il est pr�sent, il faut g�rer l'h�ritage de l'�v�nement ou sortir la fl�che du div � vous de voir ...

Que faut-il changer dans l'h�ritage ?

[Crackerz]

C'est normal que cela ne fonctionne pas puisque l��v�nement se propage � l'enfant Img. Une solution en partant de votre code pourrait �tre :

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
 var MENUHOZ = document.getElementById("menuhoz")
    var IMG = document.getElementById("imgmenuhoz")
 
    MENUHOZ.style.cssText = 'transition:all 1s;';
    IMG.style.cssText = 'transition:all 1s 1s;';
 
    MENUHOZ.addEventListener('click',function(e){
 
        var relatedTarget = e.target;
 
        if(relatedTarget.nodeName != 'IMG') //A remplacer par == DIV si vous compté mettre d'autre événement dans ce div
        {
            MENUHOZ.style.cssText = 'background-color:#ff9900;color:#171717;cursor:default';
            MENUHOZ.style.width = '100%';
            MENUHOZ.style.height = '100px';
 
            IMG.style.width = '15px';
            IMG.style.height = '15px';
        }
 
    });
 
    IMG.addEventListener('click', function(){
 
        MENUHOZ.style.cssText = 'background-color:#171717;;color:#ff9900';
        MENUHOZ.style.width = '50px';
        MENUHOZ.style.height = '50px';
 
        IMG.style.width = '0px';
        IMG.style.height = '0px';
 
    });

A noter que des adaptations de ce code sont � pr�voir selon les diff�rents navigateur notamment IE qui ne supporte pas addEventListener() et target mais respectivement attachEvent() et srcElement.