Bonjour à toutes et tous!

Voilà donc mon premier post sur le forum developpez.com et comme pas mal de personnes, je viens ici pour un soucis d'ordre technique.
Tout d'abord je tiens à préciser que je suis débutant, et je compte bien apprendre encore et encore!

Rentrons dans le vif du sujet.

Le site que je suis en train de faire va être à usage unique. J'entends par la qu'une amie en master a besoin d'un site comme support pour une expérience. Le côté navigation est mis en avant.
Concernant le contenu, il s'agit d'un copié collé d'un article wiki, découpé en parties. Une page : une partie d'article.

Mes codes js sont sans doute un peu "bordeliques" et je m'en excuse d'avance.

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
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
body{
	background:url('http://www.lesite.com/Templates/images/designs/1/bg.png') repeat-x;
	background-color: #FDD796;
	color : #894715;
	margin: auto;
	text-align: center;
	width: 1197px;
	font-family: georgia;
	font-size: 13px;
}
 
div{
	background-color: #F4F9FD;
	border: 1px solid rgb(234,244,251);
	padding: 10px;
	padding-bottom:10px;
	overflow:hidden;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 30px;
	margin-top: 30px;
	border: 1px solid #848686;
	text-align: left;
}
 
p{
	margin-right: 70px;
	margin-left: 70px;
}
 
#apbc{
	margin-right: 7em;
	margin-left: 7em;
}
 
#ploclo{
	margin-right: 0;
	margin-left: 7em;
	margin-bottom: 0;
	margin-top: 0;
}
 
#zokoo{
	margin-right: 7em;
	margin-left: 2em;
	margin-bottom: 1em;
	margin-top: 1em;
}
 
.centre{
	text-align: center;
}
 
/* Menu */
 
#menu, #menu ul /* Liste */	
{
	padding:0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défault de la liste */
	line-height : 25px; /* on défini une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
	font-weight : bold; /* on met le texte en gras */
	font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
	font-size : 12px; /* hauteur du texte : 12 pixels */
}
 
#menu a /* Contenu des listes */
{
	display	: block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding	: 0px; /* aucune marge intérieure */
	background : #894715; /* couleur de fond */	
	color : #FFFFFF; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défault des liens (la pluspart du temps = souligné) */
	width : 232px; /* largeur */
}
 
#menu li /* Elements des listes */	
{ 
	float : left; 
	/* pour ie qui ne reconnait pas "transparent" */
	border-right : 1px solid #FDD796; /* on met une bordure blanche à gauche de chaque élément */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
	border-right: 1px solid #FDD796 ; /* on met une bordure transparante à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolu */
	width: 232px; /* Largeur des sous-listes */
	left: -999em; /* Hop, on envoi loin du champ de vision */
}
 
 
#menu li ul li /* Eléments de sous-listes */
{
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-top : 1px solid #FDD796; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li		
{
	border-top : 1px solid #FDD796; /* on met une bordure transparante en haut de chaque élément */
}
 
#menu li ul ul 
{
	margin		: -25px 0 0 -233px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */	
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-right	: 1px solid #FDD796 ; /* Petite bordure à gauche pour ne pas coller ... */	
}
 
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul		
{
	border-right	: 1px solid #FDD796 ; /* on met une bordure transparante sur la gauche de chaque élément */
}
 
#menu a:hover, #menu li ul a:hover /* Lorsque la souris passe sur un des liens */	
{
	color: #894715; /* On passe le texte en noir ... */
	background: #FDD796; /* ... et au contraire, le fond en blanc */
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug */
}
 
 
a
{
	text-decoration: none;
	color: #ae0000;
}
 
a:hover
{
	font-weight: bold;
}
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
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#contenu").empty(); // on vide le div
	$("#contenu").append(donnees); // on met dans le div le r?ltat de la requete ajax
}
 
$(document).ready(function(){ 	// le document est chargé
	$("a").click(function(){ 	// on selectionne tous les liens et on d?nit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page ?harger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
 
});
 
 sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+="sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp("sfhover\\b"), "");
		}
	}
}
//if (window.attachEvent) window.attachEvent("onload", sfHover)
//#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un ?ment de liste */
//{
//   left: -999em; /* On exp?e les sous-sous-listes hors du champ de vision */
//}
//#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un ?ment de liste ET sous-sous-lites lorsque la souris passe sur un ?ment de sous-liste */
//{
   //     left: auto; /* Repositionnement normal */
    //    min-height: 0; /* Corrige un bug sous IE */
//}
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/scripts.js"></script>
 
<title>Le Chocolat</title>
 
<link rel="stylesheet" media="screen" type="text/css" href="menu.css" />
</head>
 
<BODY>
	<div style="text-align : center;">
		<h1 class="centre">Le chocolat</h1> <br />
 
 
		<p style="text-indent:30px">
			<ul id="menu">
				<li><a class="historique" href="Maya.php">Histoire et Origine</a>
					<ul>
						<li><a class="historique" href="Maya.php">Epoque Maya</a></li>
						<li><a class="historique" href="Azteque.php">Epoque Aztèque</a></li>
						<li><a class="historique" href="1494.php">1494 - 1662</a></li>
						<li><a class="historique" href="1700.php">1700 - 1950</a></li>
					</ul>
				</li>
				<li><a class="historique" href="Fabrication.php">Techniques de Fabrication</a>
					<ul><a class="historique" href="Fabrication.php">Fabrication</a>
						<li><a class="historique" href="Ecabossage.php">Les étapes</a>
							<ul><li><a class="historique" href="Ecabossage.php">Ecabossage, fermentation et séchage</a></li>
								<li><a class="historique" href="Torrefaction.php">Torréfaction, concassage et broyage</a></li>
								<li><a class="historique" href="Ajout.php">Ajout d'ingrédients et conchage</a></li>
								<li><a class="historique" href="Moulage.php">Tempérage et Moulage</a></li>
							</ul>
						</li>
						<li><a class="historique" href="Blanchiment.php">Blanchiment du chocolat</a></li>
					</ul>
				</li>
 
				<li><a class="historique" href="Type.php">Formes et Types de Chocolat</a>
					<ul><li><a class="historique" href="Type.php">Types de chocolat</a></li>
						<li><a class="historique" href="Appelation.php">Appélations spécifiques</a></li>
						<li><a class="historique" href="Crus.php">Principaux crus de cacao</a></li>
						<li><a class="historique" href="Formes.php">Différentes formes</a></li>
					</ul>
				</li>
				<li><a class="historique" href="Degustation.php">Consommation</a>
					<ul><li><a class="historique" href="Degustation.php">Dégustation</a></li>
						<li><a class="historique" href="Consommation.php">Consommation mondiale</a></li>
					</ul>
				</li>
				<li><a class="historique" href="Effets.php">Santé</a>
					<ul><li><a class="historique" href="Effets.php">Préambule</a></li>
						<li><a class="historique" href="Circulatoire.php">Effets prouvés</a>
							<ul><li><a class="historique" href="Circulatoire.php">Système circulatoire</a></li>
								<li><a class="historique" href="Metaux.php">Métaux lourds</a></li>
								<li><a class="historique" href="Obesite.php">Risques d'obésité</a></li>
								<li><a class="historique" href="Psycho.php">Psychostimulation</a></li>
								<li><a class="historique" href="Benefices.php">Autres bénéfices</a></li>
							</ul>
						</li>
						<li><a class="historique" href="Aphrodisiaque.php">Effets non prouvés</a>
							<ul><li><a class="historique" href="Aphrodisiaque.php">Aphrodisiaque</a></li>
								<li><a class="historique" href="Acne.php">Acné</a></li>
								<li><a class="historique" href="Addiction.php">Addictions</a></li>
							</ul>
						</li>
 
						<li><a class="historique" href="Animaux.php">Chez les animaux</a></li>
					</ul>
				</li>
			</ul><br /><br />
		</p>
	</div>
 
 
	<div id="contenu" style="text-align : justify;">
	</div>
 
 
	<div id="resultatt">
	</div>
 
 
</body>
</html>

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<b>
<p style="text-indent:3em"> Les Mayas cultivent des cacaoyers et utilisaient les fèves de cacao pour fabriquer une boisson chaude, mousseuse et amère, souvent aromatisée avec de la vanille, du piment et du roucou nommée xocoatl. </p>
 
<p style="text-indent:3em"> Dans la légende, la tête du héros Hun Hunaphu, décapité par les seigneurs de Xibalba, est pendue à un arbre mort qui donna miraculeusement des fruits en forme de calebasse appelés cabosses de cacao. La tête crache dans la main d'une jeune fille de Xibalba, l'inframonde maya, assurant ainsi sa fécondation magique. C'est pourquoi le peuple maya se sert du chocolat comme préliminaires au mariage. Le cacao permet aussi de purifier les jeunes enfants mayas lors d'une cérémonie. De même, le défunt est accompagné de cacao pour son voyage vers l'au-delà.</p>
 
<p style="text-indent:3em"> Une tombe maya du début de la période classique (460-480 av. J.-C.), retrouvée sur le site de Rio Azul (au Guatemala), contenait des récipients sur lesquels est représenté le caractère maya symbolisant le cacao et comportant des restes de boisson chocolatée. Une poterie contenant des traces de cacao fut découverte au Belize, ce qui confirme l'existence d'une consommation de chocolat au VIe siècle. Des documents rédigés en caractères Maya attestent que le chocolat est utilisé aussi bien pour des cérémonies que pour la vie quotidienne. Les mayas associaient également le chocolat à leur dieu de la fertilité. Le livre de la Genèse Maya, le Popol Vuh, attribue la découverte du chocolat aux dieux.</p>
</b>

Voilà pour tout ça. Maintenant le vif du sujet...

  • Ce que j'ai déjà fait
    • Le menu :
      • Listes mise en forme avec CSS, et ajout de fonctions jquery au passage de la souris.
    • La navigation
      • Tous les liens envoient une requête ajax pour les afficher dans la div id=contenu
  • Ce que je dois faire :
    • Implémenter un historique de navigation
    • Implémenter un système de "panier" sur le même principe que l'historique de navigation



Concernant l'historique de navigation :

Ce que j'entends par là, c'est que j'aimerais que lors d'un clic sur une url, Cette url soit copiée, et placée dans un tableau scrollable avec une entrée par ligne. (scroll similaire à celui des balises |code| de ce forum)
Grâce à Whopping sur le chat du site on a pu tester quelques bricoles, notamment ceci :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
$(".historique").click(function(e){
   e.preventDefault();
	$("#resultatt").append($(this).clone())
   })
Implémenté de la sorte dans le script ajax (je dirais bidouillage ^^):
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
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#contenu").empty(); // on vide le div
	$("#contenu").append(donnees); // on met dans le div le r?ltat de la requete ajax
}
 
$(document).ready(function(){ 	// le document est chargé
	$("a").click(function(){ 	// on selectionne tous les liens et on d?nit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page ?harger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
   $(".historique").click(function(e){
   e.preventDefault();
	$("#resultatt").append($(this).clone())
   })
});
Les soucis rencontrés :
Au niveau du rendu, super. Ça copie le lien, ça l'affiche, le lien est fonctionnel. Seul soucis, pas de requête ajax sur le lien. Il renvoie directement vers la page au lieu d'afficher le contenu dans la div.
Ne s'affiche pas sous forme de tableaux.

Ce soir, j'ai pu discuter avec Teriel qui a aussi fait un énorme boulot (et je le remercie) et qui m'a proposé une gestion de la sorte :
http://jsfiddle.net/PuKHC/2/

Et je n'arrive pas du tout à l'adapter à mon site. :s

Voilà donc la situation.
j'aurais donc besoin d'aide pour soit :
  • faire en sorte que $("#resultatt").append($(this).clone()) donne un nouveau lien dont le contenu s'afficherais dans ma div "#resultatt" -----> check!
  • Afficher les résultats dans un tableau scrollable

soit pour



Merci à tous pour la lecture fastidieuse de ma requête, et j'espère merci pour votre aide :)

Lucas