Discussion :

[Adel1982]

Bonjour tout le monde,

Je travail actuellement sur un projet spécifique ou je proposerai à l'Internaute de modifier l'aspect de la page (couleur des liens, du header) à l'aide d'un ou de plusieurs boutons, pour réaliser cela j'ai fouillé dans mes anciens cours de JS ou j'ai retrouvé un "CSS Switching".

Le résultat n'est pas totalement satisfaisant, en effet, lorsque je clique sur un bouton pour changer les couleurs du site, les modifications ne prennent effets que sur une page... et non pas sur toutes les pages du site.

Voici mon code JS:

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
 
function changeStyleSheet(title) {
   var links = document.getElementsByTagName("link");
	for(var i = 0; i < links.length; i++) {
		if(links[i].getAttribute("title")) links[i].disabled = true;
		if(links[i].getAttribute("title") == title) {
			links[i].disabled = false;
			var expires = new Date();
			expires.setTime(expires.getTime() + (30*24*60*60*1000));
			document.cookie = "stylesheet="+title+";expires="+expires.toGMTString()+";path=/";
		}
	}
}
 
function getStylesheetFromCookie() {
	var cookie = document.cookie.split(";");
	for(var i = 0; i < cookie.length; i++) {
		var values = cookie[i].split("=");
		if (values[0] == "stylesheet") changeStyleSheet(values[1]);
	}
}

Voici mon code XHTML

Code :

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

1
2
3
4
5
6
 
<div style="text-align: center; border: 1px solid #333333; background-color: #f2f2f2">
<p>Couleurs proposées</p>
<img style="cursor: pointer;" alt="violet" src="/common/img/monsite/violet.jpg" onclick="changeStyleSheet('violet')" />
<img style="cursor: pointer;" alt="vert" src="/common/img/monsite/vert.jpg" onclick="changeStyleSheet('vert')" />	
</div>

Je vous remercie pour votre aide.

Amicalement,

Adel

[gael]

Il faut un script serveur qui enregistre le changement de css

[Nicopilami]

Il faut un script serveur qui enregistre le changement de css

non, pourquoi passer par le serveur ???
il faut surtout aller lire le cookie au démarrage de la page (window.onload)

essaie d'ajouter ça à ton code

Code :

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

window.onload=getStylesheetFromCookie

bye
Nicolas

[SpaceFrog]

cookie, passage de paramètre en get ou variable de session coté serveur, il faut de toute façon passer les paramètres à la page suivante .
ce serait tout de même plus rapide avec une variable de session

[Nicopilami]

Hello

ce serait tout de même plus rapide avec une variable de session

oui, mais je disais ca car la fonction de récupération du cookie existe déjà ...

function getStylesheetFromCookie() {
var cookie = document.cookie.split(";");

bye
Nico

[Adel1982]

essaie d'ajouter ça à ton code

Code :

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

window.onload=getStylesheetFromCookie

bye
Nicolas

Merci pour vos réponses.
Je suis un néophyte dans ce domaine là, peux-tu me dire où placer exactement le code stp ?

Cordialement,

Adel

[Nicopilami]

place cette ligne juste en dessous de la fin de ta fonction getStylesheetFromCookie
attention par contre, il faut que tu redéfinisse cette fonction dans toutes tes pages ou que tu fasses un fichier js externe que tu inclue dans toutes tes pages.

bnye
Nico

[Adel1982]

Voila ce que j'ai écris

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 changeStyleSheet(title) {
   var links = document.getElementsByTagName("link");
	for(var i = 0; i < links.length; i++) {
		if(links[i].getAttribute("title")) links[i].disabled = true;
		if(links[i].getAttribute("title") == title) {
			links[i].disabled = false;
			var expires = new Date();
			expires.setTime(expires.getTime() + (30*24*60*60*1000));
			document.cookie = "stylesheet="+title+";expires="+expires.toGMTString()+";path=/";
		}
	}
}
 
function getStylesheetFromCookie() {
	var cookie = document.cookie.split(";");
	for(var i = 0; i < cookie.length; i++) {
		var values = cookie[i].split("=");
		if (values[0] == "stylesheet") changeStyleSheet(values[1]);
	}
}
 
window.onload=getStylesheetFromCookie

Je ne pense pas que cela soit bon car ça ne fonctionne pas. J'ai créé un document externe.

[Nicopilami]

Je ne pense pas que cela soit bon car ça ne fonctionne pas. J'ai créé un document externe.

tu as un message d'erreur ?

[Adel1982]

Pas de message d'erreur mais le changement de feuille CSS ne s'opère pas sur toute les pages.

[Eric2a]

Salut,

La fonction onload est peut-être écrasée. Au cas où, ajoute la fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addLoadListener(func){
	if(window.addEventListener)
		window.addEventListener('load',func,false);
	else if(document.addEventListener)
		document.addEventListener('load',func,false);
	else if(window.attachEvent)
		window.attachEvent('onload',func);
	else if(typeof window.onload!='function')
		window.onload=func;
	else{
		var oldonload=window.onload;
		window.onload=function(){oldonload();func();};
	}
}

et remplace la ligne

Code :

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

window.onload=getStylesheetFromCookie

par celle-ci

Code :

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

addLoadListener(getStylesheetFromCookie);

pour voir...

[Adel1982]

Aucun changement

[Nicopilami]

Aucun changement

argh, je pense que c'est dû à

document.cookie

car cette variable est définie au début de la fonction que tu n'appelle pas au chargement de la page;

[Adel1982]

euh... c'est à dire ?

[Nicopilami]

En fait, pour pouvoir retrouver ton cookie de page en page, il faut que tu donnes un nom définitif à ton cookie en créant une variable CookieID (par exemple) au chargement de ta page, pas un nom qui va changer tout le temps; je n'ai pas le temps d'expliquer cela maintenant, je me reconnecte ce soir, si d'autres n'ont pas déjà répondu...


bye
Nico

[Eric2a]

En ajoutant le mot-clé break pour quitter la boucle for ?

Code :

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

1
2
3
4
5
6
7
8
9
10
function getStylesheetFromCookie() {
	var cookie = document.cookie.split(";");
	for(var i = 0; i < cookie.length; i++) {
		var values = cookie[i].split("=");
		if (values[0] == "stylesheet") {
			changeStyleSheet(values[1]);
			break;
		}
	}
}

[Adel1982]

Rien ne change

[blade159]

voici un peu de lecture : http://www.developpez.net/forums/d38...tyle-switcher/