faire un contenu avec intercalaire

Version imprimable

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

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

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

22/08/2007, 21h49
jypees

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 :oops:
Tu peux m'expliquer?
23/08/2007, 00h32
artotal

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

Citation:

<script type="text/javascript">
function display(calque)
{
// on définit la variable style qui prend la valeur du style actuel du calque.
var style=document.getElementById(calque).style.display;
// on évalue la valeur de style
if (style == "none")
{
// si le calque est masqué on l'affiche
document.getElementById(calque).style.display="block";
}
else
{
document.getElementById(calque).style.display="none";
}
}
</script>
</head>
<body onload="display('toto'); display('titi');">
<a href="#" onclick="display('toto');">
Travail en solo ;-))
</a><br />
<div id="toto" style="display:block">
Lorem ipsum sit amet, consecdrgdggdf Lorem ipsum sit amet, consecdrgdggdf Lorem ipsum sit amet, conecdrgdggdf Lorem ipsum sit amet, consecdrgdggdf
</div>

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

suivant ce que tu m'as demandé je t'ai codé un petit truc ^^ tu veras c'est simple a comprendre !!!
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 <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 :roll::king:

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:

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 :king:

j'ai donc fait à ma convenance !
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 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>

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 :king:
Et merci pour les compliments ^^ :king::yaisse2:

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
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 :king:

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

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:

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

27/08/2007, 10h35
jypees
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 :roll: (enfin parfois si mais bon c'est bien le soucis avec le js : c'est que parfois oui parfois non).
Code:

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:

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:

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 :roll:

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 :) :king:

Si tu as d'autre question hésite po :king:

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

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