Un onclick/unclick ?

Version imprimable

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:

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:

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:

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

31/03/2014, 20h06
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...
31/03/2014, 20h08
pito2901

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

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

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 ...

31/03/2014, 21h06
pito2901

Merci, mais votre code ne fonctionne pas...

Citation:

Envoyé par booMan

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 ?

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:

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.

01/04/2014, 08h38
SpaceFrog

Ne serait il pas plus simple d'avoir un flag boolean et une seule fonction ?
http://jsfiddle.net/hRjvT/
01/04/2014, 18h36
pito2901

Ça marche super ! Merci. (Je passerai à la compatibilité des navigateurs plus tard...)

Dernière question, due à un problème d'affichage, j'ai modifié le code, mais à présent, j'ouvre le menu tout va bien, je le referme tout va bien mais lorsque je le re-ouvre, la transition se fait mal... :(

Je vous laisse regarder ici.

et le code en question:

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
32
33
34
35
36
37
38
39
40
41
.menuhoz{
background-color:#171717;
color:#ff9900;
height:50px;
width:50px;
line-height:17px;
text-align:center;
transition:all 0.5s;
border-radius:10px;
}
.menuhoz:hover{
color:#171717;
background-color:#ff9900;
cursor:pointer;
}
.menuhoz #imgmenuhoz{
position:relative;
float:left;
margin-left:4px;
margin-top:3px;
width:0px;
height:0px;
opacity:0;
visibility:hidden;
cursor:pointer;
}
#menuhozint{
opacity:0;
visibility:hidden;
margin-top:10px;
}
#menuhozint a{
margin-left:50px;
margin-right:50px;
text-decoration:none;
color:#171717;
}
#menuhozint img{
height:80px;
width:80px;
}

Code:

1
2
3
4
5
6
7
8
9
<div id="menuhoz" class="menuhoz">
<img id="imgmenuhoz" src="http://www.zupmage.eu/i/0ZF13hbRGS.png"></img><br />
<span>MENU</span>
<div id="menuhozint">
<a href="http://tutosaf.blogspot.fr/p/page-en-onstruction.html"><img src="http://www.zupmage.eu/i/EgEhCBE9xF.ico" title="Tutoriels"></img></a>
<a href="http://tutosaf.blogspot.fr/p/page-en-onstruction.html"><img src="http://www.zupmage.eu/i/9g1Lpw8MI2.ico" title="Plug-ins"></img></a>
<a href="http://tutosaf.blogspot.fr/p/page-en-onstruction.html"><img src="http://www.zupmage.eu/i/iixOrxrQo2.ico" title="Templates"></a>
</div>
</div>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var MENUHOZ = document.getElementById("menuhoz")
var IMG = document.getElementById("imgmenuhoz")
var INT = document.getElementById("menuhozint")
 
    MENUHOZ.style.cssText = 'transition:all 1s;';
    IMG.style.cssText = 'transition:opacity 1s;';
	INT.style.cssText = 'transition:all .5s .5s;';
 
	IMG.style.visibility = 'hidden';
	INT.style.visibility = 'hidden';
 
    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:#ff9900;cursor:default';
            MENUHOZ.style.width = '100%';
            MENUHOZ.style.height = '150px';
 
			IMG.style.height = '15px';
			IMG.style.width = '15px';
            IMG.style.visibility = 'visible';
			IMG.style.opacity = '1';
 
			INT.style.visibility = 'visible';
			INT.style.opacity = '1';
        }
 
    });
 
    IMG.addEventListener('click', function(){
 
        MENUHOZ.style.cssText = 'background-color:#171717;;color:#ff9900';
        MENUHOZ.style.width = '50px';
        MENUHOZ.style.height = '50px';
 
		IMG.style.cssText = 'transition:opacity 0s;';
		IMG.style.height = '0px';
		IMG.style.width = '0px';
        IMG.style.visibility = 'hidden';
 
		INT.style.cssText = 'transition:all 0s .1s;';
		INT.style.visibility = 'hidden';
		INT.style.opacity = '0';
 
    });

Merci pour votre aide.