[DOM] Affichage sur une même page

Version imprimable

25/11/2008, 10h12
Herveg

[DOM] Affichage sur une même page

Bonjour,

j'ai une page que j'ai divisé en deux parties avec un menu déroulant sur la première partie. je souhaite que lorsque je clique sur une option du menu que le résultat puisse apparaitre sur la partie d'en bas au lieu d'ouvrir une nouvelle page.

merci
25/11/2008, 10h41
E.Bzz

Bonjour,
il s'agit donc de frames ?

Un bout de code (celui de ton menu) serait le bienvenu ...

A+
25/11/2008, 10h42
GoTrUnKo

Bonjour,

Cela va dépendre du contenu de la page à afficher, si ce n'est que tu xHTML, le mieux est tout simplement de remplir la div avec le innerHTML.
Si c'est du php, passe par AJAX.

GoT

c'est dans le div conteneur que tout doit s'afficher après choix

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
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
<style type="text/css">
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #CC6633 ;
}
 
div#conteneur
{
	width: 774px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #330099 ;
	background: #3B4E77;
}
p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #CC6633 ;
}
 
ul#menu
{
	width: 780px;
            list-style-type: none;
            margin: 0;
            padding: 0;
            border: 0;
            background: url(.jpg) repeat-x 0 -1px ;
            position: absolute;
            top: 250px;
            left: 239px;
 
}
{          width: 150px;
           float: left ;
            margin: 0;
            padding: 0;
            border: 0;
 
}
#menu .sousmenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menu .sousmenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menu li a:link, #menu li a:visited
{
display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menu li:hover > .sousmenu { display: block; }
#menu li a:hover { background-color: #F2462E; }
#menu li a:active { background-color: #5F879D; }
 
#menu .sousmenu li a:link,
#menu .sousmenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: #3B4E77;
}
#menu .sousmenu li a:hover 
{
</style>

25/11/2008, 11h03
GoTrUnKo

Bonjour,

Je ne vois pas l'utilité de ton code css mais en tout cas pour afficher dans une div comme je l'ai dis juste au dessus :

Code:

document.getElementById('conteneur').innerHTML = "Ce qu'il faut ajouter";

GoT

j'ai survolé la discussion, mais je m'arrête là-dessus de suite

Citation:

Envoyé par GoTrUnKo

Bonjour,

Je ne vois pas l'utilité de ton code css mais en tout cas pour afficher dans une div comme je l'ai dis juste au dessus :

Code:

document.getElementById('conteneur').innerHTML = "Ce qu'il faut ajouter";

GoT

il est (fortement) recommandé d'utiliser les fonctions DOM et pas innerHTML (cf. google : bug IE innerHTML) et donc de faire quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 // pour du texte monDiv.appendChild(document.createTextNode("mon texte ici")); // pour des controles, par exemple un span var monSpan = document.createElement("span"); monSpan.className = "spanClass"; monSpan.appendChild(document.createTextNode("mon texte ici")); monDiv.appendChild(monSpan);

25/11/2008, 11h38
E.Bzz

@Herveg > Je te déconseille de baser ton site sur ce principe : tu vas avoir énormément de problèmes de navigation, de référencement, et même de code (pour faire interpréter le code JS de ta "nouvelle page", par exemple) ...

Qu'as tu contre un changement de page ... quand on change de page du site ?

A+
25/11/2008, 12h26
Herveg

enfin j'ai rien contre les changements de page je voulais faire plus conviviale mais je laisse tomber

Merci pour vos conseils E.bzz