Desactivation de la fonction HOVER lors de l'utilisation de mon code javascript

**Opal_m** · 05/09/2018, 18h08

Bonjour � tous !
Je vous explique mon probl�me aujourd'hui, j'ai cr�e une bande verticale qui s'�largit lors du passage de la souris sur l��l�ment.
J'ai voulu augmenter la taille de ce menu en la figeant lors d'un clic sur ce menu et lui faire reprendre sa taille initiale lorsque l'on clique sur un autre �l�ment.
Tout marche bien, cependant le hover ne s'active plus une fois que le menu � repris sa taille initiale...

J'esp�re m'�tre exprim� dans des termes compr�hensibles, je suis tr�s largement d�butant en language web

Voici mes codes :

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
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
<!DOCTYPE HTML>
<html>
 
<head>
<meta charset="UFT-8">
<title>Liste d'accès aux différentes leçons !</title>
 
<link rel="stylesheet" href="css/styles.css" />
 
</head>
 
<body>
 
<div id="contMenu">
	<div id="menu">
	</div>
</div>
 
<div id="calque">
 
</div>
 
<div id="conteneur">
 
	<div class="ligne Intro" >
		<div class="bloc Intro">
		</div>
		<div class="slider Intro">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="slider">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
</div>
</body>
 
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
 
</html>

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
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
div, #menu, #contMenu{
	box-sizing: border-box; /* AJOUT pour prise en compte bordure dans width et height */
}
body{
	margin : 0px;
	display: flex;
}
 
#contMenu{
	min-height: 100vh;
	position : fixed;
	width:6%;
	/* background-color: hsla(214, 27%, 65%); */
	background-color: black;
	border: 1px solid blue;
	transition : 2s;
	z-index:50;
}
 
#menu{
	min-height: 100vh;
	width: 100%;
	position: relative;
	background-color : blue;
	transition : 2s;
}
 
 
#calque{
	position: fixed;
	min-height: 100vh;
	margin-left: 6%;
	width: 94%;
	background-color: hsla(0, 100%, 100%,0);
	z-index : 5;
	transition : 2s;
}
 
#contMenu:hover {width:12%;}
#contMenu:hover > #menu{background-color: red;}
#contMenu:hover ~ #calque{background-color: hsla(0, 100%, 100%,0.6);}
 
#conteneur{
position: absolute;
width: 94%;
border: 1px solid red;
margin-left: 6%;
/* background-color: hsla(0, 100%, 50%,0.2); */
box-sizing: border-box; 
}
 
.ligne{
	position : relative;
	width:100%;
	display: flex;
	background-color : blue;
}
 
.bloc{
	width: 25%;
	border : 1px solid blue;
	/* background-color: hsla(35,13%,82%,1); */
	background-color : green;
	position : relative;
}
 
.slider{
	width:75%;
	border: 1px solid blue;
	/* background-color: hsla(250, 100%, 50%,0.2); */
	background-color : green;
	position : relative;
}

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
 
window.onload = function() {
	resize_blocs();
};
 
window.onresize =function()  {
	resize_blocs();
};
 
// déjà donné gracieusement par le forum 
 
function resize_blocs(){
	var blocs = document.querySelectorAll('.bloc');
	blocs.forEach( function(bloc){
		var style = window.getComputedStyle(bloc);
		bloc.style.height = style.width;
		console.log( bloc.style.height )
	});
 
}
 
	var compteur = 0 ;
	console.log(compteur);
 
	document.querySelector('#contMenu').onclick = function() {
		if(compteur === 0) {
			contMenu = document.getElementById('contMenu');
			contMenu.style.width = '18%';				
			compteur = 1;
		}
	}
 
	document.querySelector('#calque').onclick = function (){
		if(compteur === 1) {
			contMenu = document.getElementById('contMenu');
			contMenu.style.width = '6%';
			console.log(contMenu.style.width);
			compteur = 0;
		}
	}

Je reste ouvert � toute critique constructive concernant l'ensemble de mon code ci-pr�sent.

Je vous remercie d'avance pour vos conseils et je les attends impatiemment !

**psychadelic** · 05/09/2018, 22h25

Desactivation de la fonction HOVER lors de l'utilisation de mon code java

1 - heu, tu confonds Java et JavaScript, tu cherches � te faire lyncher ?

2 - tu as un message d'erreur FATALE quand on regarde dans le debogeur =>
An unsupported character encoding was declared for the HTML document using a meta tag. The declaration was ignored.
IL FAUT REGARDER CE QUE FAIT SONT CODE EN UTILISANT LE DEBOGUER

dans ton cas tu confonds l'encodage UFT-8 et UTF-8 ( mettre les lettres dans le bon ordre!)

3 - pourquoi mettre la libraire jQuery ????

Pour ton probl�me il faut utiliser diff�rentes classes avec chacune un des tailles du width � utiliser avec mettre les :hover qui leur correspondent
et en javacript assigner les clases � utiliser et non y changer les valeur css du width.

**Opal_m** · 06/09/2018, 10h27

Salut, merci pour ta r�ponse.

Je fais souvent l'erreur navr� faut que j'arr�te pour java ou javascript haha
Je pense que la libr�rie Jquery sera utile plus tard pour l'instant je ne sais pas l'utiliser mais cela ne me g�ne pas dans l'�tat

Sinon pour ta r�ponse j'ai malheureusement pas su comment l'utiliser qu'en faire, je vais tenter de m'expliquer plus clairement j'ai encore beaucoup de mal..
0) La bande � une taille assez fine disons "x"
1) Si le curseur passe sur la bande � gauche elle s'elargit (hover)
2) Si l'utilisateur clique sur la banque � gauche elle s'�largit d'avantage et garde sa forme (javascript)
3) Si l'utilisateur clique ailleurs que sur la bande (sur le calque, il y a un calque qui devient opaque lorsque l'on clique sur la bande) la bande retrouve sa taille "x" initiale, mon probl�me ici �tant que : LA FONCTION HOVER NE MARCHE PLUS

J'esp�re n'avoir offens� personne en confondant java et javascript

En attendant votre r�ponse,

Cordialement,

**psychadelic** · 06/09/2018, 15h50

Envoy� par Opal_m

0) La bande � une taille assez fine disons "x"
1) Si le curseur passe sur la bande � gauche elle s'elargit (hover)
2) Si l'utilisateur clique sur la banque � gauche elle s'�largit d'avantage et garde sa forme (javascript)
3) Si l'utilisateur clique ailleurs que sur la bande (sur le calque, il y a un calque qui devient opaque lorsque l'on clique sur la bande) la bande retrouve sa taille "x" initiale, mon probl�me ici �tant que : LA FONCTION HOVER NE MARCHE PLUS

heu, pourquoi ignores tu ce que j'avais �crit ????

Envoy� par psychadelic

Pour ton probl�me il faut utiliser diff�rentes classes....

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>utilise les classes</title>
  <style>
    body {
      margin: 0px;
      display: flex;
      align-items: center;
    }
    body > div {
      display: block;
      height: 100vh;  
      transition: 2s;    
    }
    #menu {  background-color: lightblue; }
    #calque { background-color: lightcoral; }
 
    #menu.PosZero { width: 10%; }
    #calque.PosZero { width: 90%; }
 
    #menu.PosHoverMenu { width: 20%; }
    #calque.PosHoverMenu { width: 80%; }
 
    #menu.Click_Menu { width: 40%; }
    #calque.Click_Menu { width: 60%; }
</style>
</head>
<body>
  <div id="menu" class="PosZero">
      menu
  </div>
  <div id="calque" class="PosZero">
      calque
  </div>
<script>
  var
    elm_menu        = document.getElementById("menu"),
    elm_calque      = document.getElementById("calque")
  ;
  elm_menu.onclick = function() {
    elm_menu.className = elm_calque.className = 'Click_Menu';
  };
  elm_menu.onmouseover = function() {
    if (elm_menu.className == 'PosZero') 
      elm_menu.className = elm_calque.className = 'PosHoverMenu';
  };
  elm_menu.onmouseout = function() {
    
    if (elm_menu.className == 'PosHoverMenu')
      elm_menu.className =  elm_calque.className = 'PosZero';
  };
  elm_calque.onclick = function() {
      elm_menu.className = elm_calque.className = 'PosZero';
  };
</script>
</body>
</html>

Invit� · 06/09/2018, 16h14

Bonjour,

1- dans le code fourni dans ton 1er message, remplace :

Code JavaScript :

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

			contMenu.style.width = '6%';

par

Code JavaScript :

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

			contMenu.style.width = '';

C'est tout.

2- Sinon, pour illustrer ce que ~~crie le psychotique~~ dit psychadelic, UNE SEULE classe suffit :
ajoute au CSS :

Code css :

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

#contMenu.expanded { width:18%; }

et remplace :

Code JavaScript :

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

			contMenu.style.width = '18%';

par

Code JavaScript :

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

			contMenu.classList.add('expanded');

et

Code JavaScript :

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

			contMenu.style.width = '6%';

par

Code JavaScript :

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

			contMenu.classList.remove('expanded');

C'est re-tout.

**Opal_m** · 07/09/2018, 10h20

Quelle efficacit� je n'aurais jamais pens� � trouver une m�thode comme celle-ci, je test �a super vite mais �a me semble top !

Merci beaucoup !!!

Bonne journ�e � vous tous

Desactivation de la fonction HOVER lors de l'utilisation de mon code javascript

JavaScript

Discussions similaires

Partager

Partager