Création d'un historique de navigation

**razzmatazz** · 12/02/2014, 05h19

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

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

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

adapter le code de Teriel (http://jsfiddle.net/PuKHC/2/)
Afficher les résultats dans un tableau scrollable

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

Lucas

**Darkaurora** · 12/02/2014, 10h21

Déjà bravo, belle présentation, détaillé et agréable à lire.

Je n'ai pas encore saisie l'ensemble du travail fait et à faire mais je pense pouvoir t'aider déjà pour ce problème:

Envoyé par razzmatazz

Il renvoie directement vers la page au lieu d'afficher le contenu dans la div

$("a").click(function(e){ e.preventDefault().... }); cette ligne te permettras de bloquer le fonctionnement normale d'un lien. Tu pourras donc exécuter ton code normalement et après si tu le souhaite rediriger vers la page souhaité.

**razzmatazz** · 12/02/2014, 14h09

Merci Darkaurora

A priori j'ai réglé le soucis de cette manière là :

Code :

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

1
2
   $("a").click(function(){
	$("#resultatt").append($(this).clone(true))

Avec ça, l'élément cloné affiche bien tout dans la div d'affichage de mon index.php.

Maintenant, l'idéal serait de mettre tout ça en forme, de telle manière à ce qu'à chaque nouvelle utilisation de la fonction, le résultat (clone) soit affiché sur une ligne d'un tableau scrollable (comme ci-dessous).

Nom : tableau.png
Affichages : 544
Taille : 3,0 Ko

Nom : tableau.png
Affichages : 544
Taille : 3,0 Ko

L'idéal serait de créer une ligne qui se positionnerais en première position à chaque fois, pour que les liens les plus récents se retrouvent en haut de ce menu scrollable.

Des idées?

**Darkaurora** · 12/02/2014, 14h40

Un conteneur avec une hauteur fixe et overflow: auto, un tableau (ou une liste pour ma part), et l'utilisation de la méthode prepend de jquery

En mélangeant bien je pense que tu peux y arriver rapidement

**razzmatazz** · 12/02/2014, 16h55

Merci encore Darkaurora

je rencontre néant moins un soucis.

J'ai ajouter mes divs comme ceci afin d'avoir 3 div cotes à cotes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="global">
	<div id="navigation">
	</div>
	<div id="resultatt">
	</div>
	<div id="panier">
	</div>
 </div>
 
</body>
</html>

avec comme css :

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
#navigation{
	overflow:auto;
	margin-right: 60px;
	margin-left: 40px;
	margin-bottom: 5px;
	margin-top: 5px;
	border: 1px solid #848686;
	text-align: left;
	width: 400px;
	height : 250px;
	float:left;
}
 
#resultatt{
	overflow:auto;
	margin-right: 60px;
	margin-left: 60px;
	margin-bottom: 5px;
	margin-top: 5px;
	border: 1px solid #848686;
	text-align: left;
	width: 200px;
	height : 250px;
	float:left;
}
 
#panier{
	overflow:auto;
	margin-right: 40px;
	margin-left: 60px;
	margin-bottom: 5px;
	margin-top: 5px;
	border: 1px solid #848686;
	text-align: left;
	width: 200px;
	height : 250px;
	float:left;
}

Jusque là pas de problèmes. Le scroll apparait quand ça dépasse la délimitation de mes divs, donc c'est parfait.

Le soucis que je rencontre c'est vis à vis du tableau
L'idéal serait quelque chose de dynamique, et donc de créer une ligne à chaque clone.

Pour ce faire je suis parti la dessus :

Code :

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

1
2
3
4
5
6
7
8
	<div id="resultatt">
		<table id="tablo">
			<tr class="lignee">
				<td class="histo">
				</td>
			</tr>
		</table>
	</div>

Et pour le script :

Code :

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

1
2
3
4
5
6
7
8
9
10
function ajouteLigne(tableID) {
  // Récupération d'une reference à la table
  var tableRef = document.getElementById(tableID);
 
  // Ajoute une ligne dans la table à la position 0
  var nouvelleLigne   = tableRef.insertRow(0);
 
  // Ajoute une cellule dans la ligne à la position 0
  var nouvelleCellule  = nouvelleLigne.insertCell(0);
}

utilisé de la sorte :

Code :

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

1
2
3
   $(".historique").click(function(){
   ajouteLigne('tablo');
	$(".histo").prepend($(this).clone(true))

Le soucis rencontré est que la ligne est bien créée, mais n'ayant pas de classe attribuée, la fonction prepend() mettra continuellement mon histo dans la même cellule.

Je pars dans le bon sens ou je fais fausse route? (dans tous les cas j'arrive pas à attribuer une classe aux cellules crées

donc si y a une idée

Merci encore!

**Darkaurora** · 12/02/2014, 20h58

Pour ma part le plus simple:

Code html :

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

1
2
3
4
5
<div id="resultatt">
	<table id="tablo">
		<tr class="none"> <td> Aucun historique pour le moment. </td> </tr>
	</table>
</div>

Avec

Code :

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

1
2
3
4
5
6
 
$(".historique").click(function(){
  if( $('.tablo').find( 'tr' ).length == 1 && $( 'tablo' ).find( '.none' ).length == 1 )
    $( '.none' ).remove( );
  $(".tablo").prepend( '<tr> <td> ' + $(this).clone(true) + '</td> </tr>' );
});

devrait normalement fonctionner

Création d'un historique de navigation

jQuery

Vue hybride

Discussions similaires

Partager

Partager