faire un contenu avec intercalaire

**artotal** · 22/08/2007, 21h32

Bonjour,
je voudrai avoir le contenu qui s'affiche au clic , puis que le reste des bloc ouvert se ferme.

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
<?php
function debut($id, $title)
{
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="30" valign="top">
<a href="javascript:ouvrir('<?php echo $id;?>');">
<img src="./img/up.png" border="0" id="img_<?php echo $id;?>" /></a>
</td>
<td width="90%">
<h1><?php echo $title;?></h1>
<div style="display:none;" id="<?php echo $id;?>" class="spin-content">
<?php }
function fin_section() {
?>
</div>
</td>
</tr>
</table>
<?php }
function intercalaire() { ?>
<script>
function ouvrir(element) {
    imgobj= document.getElementById("img_"+element);
    divgobj= document.getElementById(element);
    if(imgobj.src.match("./img/up.png"))
    {
        imgobj.src = "./img/down.png";
        divobj.style.display="block";
    } else {
        imgobj.src = "./img/up.png";
        divobj.style.display="none";
    }
}
</script>
<?php }?>
 
 
<html>
<head><?php intercalaire();?></head>
<body>
<?php debut('un', 'première partie'); ?>
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
<?php fin_section();?>
 
<?php debut('deux', 'deuxième partie'); ?>
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
<?php fin_section();?>
 
<?php debut('trois', 'troisième partie'); ?>
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
bla blabla blabla blabla blabla blabla blabla blabla bla<br />
<?php fin_section();?>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
   imgobj= document.getElementById("img_"+element);
   divgobj= document.getElementById(element);
   if(imgobj.src.match("./img/up.png"))

je crois que le test ne fonctionne pas mais comment tester une chaine de caractère en js

**jypees** · 22/08/2007, 21h49

J'ai regardé un peu ton code, que veux-tu faire exactemen??? car si j'ai bien compris ce que tu veux faire c'est pas une tres bonne methode ton code

Tu peux m'expliquer?

**artotal** · 23/08/2007, 00h32

je veux afficher masquer des menu qui se trouvent l'un en dessous de l'autre. J'arrive à le faire de cette façon

En fait ce que je n'arrive pas c'est faire plusieurs block si un est affiché les autres doivent être masquer.

**jypees** · 23/08/2007, 22h07

suivant ce que tu m'as demandé je t'ai codé un petit truc ^^ tu veras c'est simple a comprendre !!!

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
 
<html>
	<head>
		<title>Voila ton code</title>
		<script language="javascript">
		function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('div');
			for (i = 0; i < content.length; i++)
			{
				(i == pos) ? (content[i].style.visibility = 'hidden') : (content[i].style.visibility = 'visible');
			}
		}
		</script>
	</head>
	<body>
		<div onclick="change(0);">show</div>
		<div onclick="change(1);">show</div>
		<div onclick="change(2);">show</div>
		<div onclick="change(3);">show</div>
		<div id="menu">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

Dis moi ce que tu en penses ^^ Mais c'etait ca ton idée ^^ L'interet d'un code comme celui la c'est que tu peux l'utiliser pour plein de truc (changer couleur taille etc) voila

**artotal** · 26/08/2007, 23h43

Ton code donne un résultat mais je ne comprend pas bien sont fonctionnement ?
Comment se fait-il que cette ligne se transforme en tableau indexé ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

content = tabLib.getElementsByTagName('div');

Le reste je pense comprendre.
Merci
PS: très jolis ton code

edit ->
je viens du php et tu ma appris énormément de chose !!!
T'es un

j'ai donc fait à ma convenance !

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
<html>
	<head>
		<title>Voila ton code</title>
		<script language="javascript">
		function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('ul');
			for (i = 0; i < content.length; i++)
			{
				(i == pos) ? (content[i].style.display="block") : (content[i].style.display="none");
			}
		}
		</script>
	</head>
	<body>
	<div id="menu">
		<h5 onclick="change(0);">show</h5>
		<ul>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
		</ul>
		<h5 onclick="change(1);">show</h5>	
		<ul>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
		</ul>
		<h5 onclick="change(2);">show</h5>
		<ul>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
		</ul>
		<h5 onclick="change(3);">show</h5>
		<ul>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
		</ul>
	</div>		
	</body>
</html>

**jypees** · 27/08/2007, 00h26

getElementsByTagName('div') recupere sous forme de tableau tout les elements indexé a un niveau. Ici ca sera tout les div referencé au niveau du menu

Apres tu peux passer autre chose que ca

Et merci pour les compliments ^^

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
 
<html>
	<head>
		<title>Voila ton code</title>
		<script language="javascript">
		function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('ul');
			for (i = 0; i < content.length; i++)
			{
				(i == pos) ? (content[i].style.display="block") : (content[i].style.display="none");
			}
		}
		</script>
	</head>
	<body>
	<div id="menu">
		<h5 onclick="change(0);">show</h5>
		<ul>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
			<li>menu0</li>
		</ul>
		<h5 onclick="change(1);">show</h5>	
		<ul>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
			<li>menu1</li>
		</ul>
		<h5 onclick="change(2);">show</h5>
		<ul>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
			<li>menu2</li>
		</ul>
		<h5 onclick="change(3);">show</h5>
		<ul>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
			<li>menu3</li>
		</ul>
	</div>		
	</body>
</html>
<script>
change(0);
</script>

J'ai ajouté change(0); en fin ca permet de tout caché ^^ histoire de design

**artotal** · 27/08/2007, 03h14

Eb faite la métode renvoie un tableau, c'est judicieux
J'ai ajouter un effet simple à l'aide de scripta.cu.lous

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
	function change(pos)
		{	
			tabLib = document.getElementById('menu');
			content = tabLib.getElementsByTagName('ul'); // getElementsByTagName renvoie un tableau
			for (i = 0; i < content.length; i++)
			{
				if(i == pos)
				{
				Effect.SlideDown(content[i], {delay: .1, duration: 1});
				//content[i].style.display="block";
				}
				else 
				{
				Effect.SlideUp(content[i], {delay: .1, duration: 1});
				//content[i].style.display="none";
				}
			}
		}

par contre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

content.length

récupère bien le nombre d'une chaine de caractère ?
parce qu'il n'y a qu'un chiffre de 0 à 3 ?
Merci
edit ->
l'jout de change(0); doit être obligatoirement à la fin, surement parce qu'il faut charger la page avant, ces pas très clair pour moi ?
Sa en fait des questions...

**jypees** · 27/08/2007, 10h35

exactement. Il faut le placer en fin afin de laisser la page se charger d'elle même. Si tu places le code en haut le js risque de ne pas saisir car il ne trouvera surement pas le html qui cherche à gérer

(enfin parfois si mais bon c'est bien le soucis avec le js : c'est que parfois oui parfois non).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script>
alert(document.getElementById('chaine').innerHTML);
</script>
<div id="chaine">lol</div>

ce code ne marchera pas par exemple car tu n'accedes pas au div. Par contre ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="chaine">lol</div>
<script>
alert(document.getElementById('chaine').innerHTML);
</script>

Lui fonctionnera car le div existe.
Un autre exemple s'impose donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script>
window.onload = function() {
alert(document.getElementById('chaine').innerHTML);
}
</script>
<div id="chaine">lool</div>

Pourquoi ce code fonctionne alors que le code est au-dessus? Simplement a cause du onload

qui attends que le chargement de la page soit finit. Enfin il existe plein de truc sous javascript qu'il faut connaitre afin de ne plus se faire avoir

Et pour le coup du length il retourne bien la taille de la chaine :
[CODE]
<script language="javascript">
window.onload = function() {
var val = '123456789';
contenu = document.getElementById('chaine');
for (i = 0; i < val.length; i++)
{
contenu.innerHTML += val[i] + '<br />';
}
}
</script>
<body>
<div id="chaine"></div>
<body>
[CODE]
C'est un petit exemple

Si tu as d'autre question hésite po

**artotal** · 30/08/2007, 13h22

oui mais dans ton code pourquoi il calcul la chaine, je ne comprend pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
manu (pos) {
tabLib = document.getElementById('menu');
content = tabLib.getElementsByTagName('ul');
for (i = 0; i < content.length; i++)
{
    if (i == pos)
		content[i].style.display="block";
}
}

pour savoir ce que compte content.length; le tableau content[i]; représente des menu <ul> donc sa compte le nombre d'ul, mais on a vu que sa compte le nombre de caractère dans une chaine, je n'arive pas à comprendre qu'elle chaine ou tableau sa compte et comment sa fonctionne dans notre cas ?
D'après ton code la boucle compte 0, 1, 2 ...
Mais il n'ya pas 1 ou 2 caractère ?
j'en déduit qu'il compte les int, qu'il reconnait tout seul et se met à les comptés 0, 1, 2, 3... ?

faire un contenu avec intercalaire

JavaScript

Discussions similaires

Partager

Partager