Aide à la conception d'un menu avec cookie

**Sekisushai** · 09/02/2008, 18h37

Bonjour, j'ai récupéré un petit bout de script qui peut par exemple gerer un menu expansif avec cookie. Le code est le suivant :

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
 
<html>
<head>
 
<script type="text/javascript" language="JavaScript">
 
var date_exp = new Date();
date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
 
//ci-après la fonction qui permet de changer de classe un objet par son id
function toggleMiniframe(boxid,folded,expanded) {
 
  var pos = document.getElementById('box-'+boxid);
  if (pos.className == 'unfolded') {
 
    document.getElementById('box-'+boxid).className = 'folded';
    document.getElementById('icon-'+boxid).src = folded;
    document.cookie = "box-"+boxid+"="+folded+";expires="+date_exp+";path=/"
 
  } else {
 
    document.getElementById('box-'+boxid).className = 'unfolded';
    document.getElementById('icon-'+boxid).src = expanded;
    document.cookie = "box-"+boxid+"="+unfolded+";expires="+date_exp+";path=/"
 
  }
 
}
</script>
<style type="text/css">
 
.folded{
display:block;}
 
.unfolded{
display:none;}
 
</style>
 
</head>
<body>
 
<table border="1">
<tr>
<td  onclick="toggleMiniframe('TEST')">TEST</td>
</tr>
</table>
 
<table border="1">
<tr>
<td>
 
<div id="box-TEST" class="folded">
Test !
</div>
 
</td>
</tr>
</table>
 
</body>
</html>

Le principe est simple, à chaque clique, je change l'attribut class d'un objet, et je sauvegarde l'état de l'objet lorsque je clique dessus. Mon problème est que je n'arrive pas à créer le cookie pour sauvegarder l'état de la boite... Comment faire ?

**Sekisushai** · 16/02/2008, 19h57

...?? Personne ?

**Sekisushai** · 24/02/2008, 22h34

**Sekisushai** · 10/03/2008, 16h01

Personne n'a d'idée sur ce qui ne va pas...

**Matthieu2000** · 10/03/2008, 17h15

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
var date_exp = new Date();
date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
 
//ci-après la fonction qui permet de changer de classe un objet par son id
function toggleMiniframe(boxid,folded,expanded) {
 
  var pos = document.getElementById('box-'+boxid);
  folded="folded";
  unfolded="unfolded";
  expanded="expanded";
  if (pos.className == 'unfolded') {
 
    document.getElementById('box-'+boxid).className = 'folded';
	if(document.getElementById('icon-'+boxid)){
		document.getElementById('icon-'+boxid).src = folded;
	}
    document.cookie = "box-"+boxid+"="+folded+";expires="+date_exp+";path=/"
 
  } else {
 
    document.getElementById('box-'+boxid).className = 'unfolded';
	if(document.getElementById('icon-'+boxid)){
		document.getElementById('icon-'+boxid).src = expanded;
	}
    document.cookie = "box-"+boxid+"="+unfolded+";expires="+date_exp.toGMTString()+";path=/";
 
  }
 
}

il te manque 2 paramètres...

**Auteur** · 11/03/2008, 23h44

bonjour,

il faut utiliser la fonction escape avant d'écrire dans le cookie (et unescape au moment de la lecture) : il s'agit de remplacer les caractères spéciaux par leur code ASCII.

Exemple d'utilisation d'un cookie (historique.js) :
http://www.developpez.net/forums/sho...20#post2062020

**Sekisushai** · 15/03/2008, 13h18

La correction de Matthieu2000 marche très bien, les cookies d'état de la boîte son créés !
Je désirerais à présent, qu'au chargement de la page, la valeur du cookie soit récupérée est mise comme attribut class dans la boîte, de manière à sauvegarder en fait l'état du menu et à restituer l'état du menu au chargement de la page. Mon code est le suivant :

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
 
function getCookieVal(offset)
{
var endstr=document.cookie.indexOf (";", offset);
if (endstr==-1) endstr=document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function LireCookie(nom)
{
var arg=nom+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen)
{
var j=i+alen;
if (document.cookie.substring(i, j)==arg) return getCookieVal(j);
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
 
}
return unfolded;
}

Ci-dessus le code pour lire la valeur d'un cookie.

Code :

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

1
2
3
4
5
6
7
8
 
window.onload=restaure;
 
function restaure() {
document.getElementById('box-'+boxid);
var etat=LireCookie('box-'+boxid);
document.getElementById('box-'+boxid).className = 'etat';
}

Ci-dessus le code pour lire la valeur du cookie précédemment sauvegardé et mettre cette valeur comme attribut class de la boîte :

Code :

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

1
2
3
<td  onclick="toggleMiniframe('ACCUEIL')">
....
<div id="box-ACCUEIL" class="ici la valeur contenu dans le cookie précédemment sauvergardé">

Mais encore, une fois, mon code ne marche pas... Pourriez-vous m'aider ?
Sekisushaï

**Matthieu2000** · 17/03/2008, 13h36

Code :

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

document.getElementById('box-'+boxid).className = etat;

PS : tu as des problèmes entre variables et chaine de caractèeres...

**Sekisushai** · 29/03/2008, 14h46

Code :

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

1
2
3
4
5
6
7
8
 
window.onload = restaure;
 
function restaure(boxid) {
document.getElementById('box-'+boxid);
var etat=LireCookie('box-'+boxid);
document.write(etat);
}

Je n'ai pas d'erreur de syntaxe, mais pourtant ça ne fonctionne pas... je n'arrive pas à lire la valeur d'un des cookie de sauvegarde d'état d'une boîte.

Aide à la conception d'un menu avec cookie

JavaScript

Discussions similaires

Partager

Partager