Compléter un code et ajouter une particularité.

**Alex-04** · 02/11/2008, 13h35

Bonjour,
Je viens sur ce forum parce que je suis en train de construire un site.
Et dans l'optique d'améliorer la navigation, je voulais ouvrir et fermer des <div> avec un lien. J'ai trouvé un code intéressant sur le net. Mais je n'arrive pas a ajouter d'autre <div> enfin j'arrive mais cela ne fonctionne pas.

J'aimerai en avoir en tout 8 (soit en rajouter 5). Mais je n'y parviens pas. Pourriez vous m'expliquer ou je bloque. Ou m'aider a résoudre ce problème.

Par ailleurs, je ne sais pas comment intégrer la fonction 'fading' pour que les div s'ouvrent en fondu.

Je remercie d'avance ceux qui répondront.

Si je ne mets pas le code, ça ne le fait pas non plus !

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
<head>
<title></title>
<style type="text/css">
<!--
.java{
 color: #0000FF;
 cursor: pointer;
}
.baliseDiv{
 border: 2px ridge #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function switchDiv(n)
{ 
var id;
  switch(n)
  {
    case 0:
         id = "";
         break;
    case 1:
         id = "signature";
         break;
    case 2:
         id = "envoiMP";
         break;
    case 3:
         id = "voirMP";
         break;
  } 
  document.getElementById('signature').style.display = "none";
  document.getElementById('envoiMP').style.display = "none";
  document.getElementById('voirMP').style.display = "none";
 
  if (id!="")
     document.getElementById(id).style.display = "block";
}
//-->
</script>
 
</head>
 
<body>
 
<span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
<span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
<span class="java" onclick="switchDiv(3)"> voir les MP</span>
 
<br />
Les divs :
<div class="baliseDiv" style="display:none;" id="signature">
signature
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="envoiMP">
envoiMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP">
voirMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
 
</body>
 
</html>

**Jumano** · 02/11/2008, 22h44

Bonsoir,
En faisant des "copier-coller" et en changeant les noms au bon endroit :

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
<head>
<title></title>
<style type="text/css">
<!--
.java{
 color: #0000FF;
 cursor: pointer;
}
.baliseDiv{
 border: 2px ridge #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function switchDiv(n)
{ 
var id;
  switch(n)
  {
    case 0:
         id = "";
         break;
    case 1:
         id = "signature";
         break;
    case 2:
         id = "envoiMP";
         break;
    case 3:
         id = "voirMP";
         break;
	case 4:
    	id = "voirMP1";
    	break;
	case 5:
    	id = "voirMP2";
    	break;
	case 6:
    	id = "voirMP3";
   		break;
	case 7:
    	id = "voirMP4";
    	break;
  } 
  document.getElementById('signature').style.display = "none";
  document.getElementById('envoiMP').style.display = "none";
  document.getElementById('voirMP').style.display = "none";
  document.getElementById('voirMP1').style.display = "none";
  document.getElementById('voirMP2').style.display = "none";
  document.getElementById('voirMP3').style.display = "none";
  document.getElementById('voirMP4').style.display = "none";
 
  if (id!="")
     document.getElementById(id).style.display = "block";
}
//-->
</script>
 
</head>
 
<body>
 
<span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
<span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
<span class="java" onclick="switchDiv(3)"> voir les MP</span>&nbsp;|
<span class="java" onclick="switchDiv(4)"> voir les MP1</span>&nbsp;|
<span class="java" onclick="switchDiv(5)"> voir les MP2</span>&nbsp;|
<span class="java" onclick="switchDiv(6)"> voir les MP3</span>&nbsp;|
<span class="java" onclick="switchDiv(7)"> voir les MP4</span>
 
<br />
Les divs :
<div class="baliseDiv" style="display:none;" id="signature">
signature
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="envoiMP">
envoiMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP">
voirMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP1">
voirMP1
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP2">
voirMP2
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP3">
voirMP3
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP4">
voirMP4
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
 
</body>
 
</html>

Je n'en ai rajouter que 4 je te laisse le soin d'y ajouter le dernier ...

**Alex-04** · 03/11/2008, 17h40

Moi aussi je faisais des copier-coller, mais je dois me tromper à un endroit, mais je ne parviens pas a trouver ou...
Merci en tous cas!

Edit : J'ai réussi a implanter le code dans mon site, merci encore !

Par contre personne ne saurait pour le fading ???

PS: c'est quand même mieux quand on peut éditer son message

**ThomasR** · 04/11/2008, 14h28

Bonjour,

Concernant le Fadein :

Prototype/Scriptaculous effects fait ca très bien mais ca me parait un peu difficile pour un débutant en HTML/JS.
http://scriptaculous.le-developpeur-...ulous.demo.php

**Alex-04** · 04/11/2008, 21h20

J'ai un code de fading que j'ai réussi a mettre en place mais je ne sais pas comment l'ajouter au javascript de mon menu qui ouvre et ferme les divs.
Ce n'est pas grave j'ai déjà l'essentiel. Si j'améliore cela, je reviendrais vers vous.
Merci quand meme !

Compléter un code et ajouter une particularité.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager