Un CSS Switching fonctionnel sur toutes les pages de mon site

Version imprimable

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:

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:

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

23/08/2010, 15h38
gael

Il faut un script serveur qui enregistre le changement de css
23/08/2010, 15h53
Nicopilami

Citation:

Envoyé par gael

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:

window.onload=getStylesheetFromCookie

bye
Nicolas
23/08/2010, 16h46
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
23/08/2010, 16h57
Nicopilami

Hello

Citation:

Envoyé par SpaceFrog

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

Citation:

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

bye
Nico
23/08/2010, 16h58
Adel1982

Citation:

Envoyé par Nicopilami

essaie d'ajouter ça à ton code

Code:

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
23/08/2010, 17h04
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

Voila ce que j'ai écris

Code:

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.

23/08/2010, 17h21
Nicopilami

Citation:

Envoyé par Adel1982

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 ?
23/08/2010, 17h22
Adel1982

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

Salut,

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

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:

window.onload=getStylesheetFromCookie

par celle-ci

Code:

addLoadListener(getStylesheetFromCookie);

pour voir...

23/08/2010, 17h47
Adel1982

Aucun changement :oops:
23/08/2010, 17h54
Nicopilami

Citation:

Envoyé par Adel1982

Aucun changement :oops:

argh, je pense que c'est dû à

Citation:

document.cookie

car cette variable est définie au début de la fonction que tu n'appelle pas au chargement de la page;
23/08/2010, 17h55
Adel1982

euh... c'est à dire ?
23/08/2010, 17h59
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

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

Code:

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;
		}
	}
}

23/08/2010, 18h14
Adel1982

Rien ne change :oops:
23/08/2010, 22h51
blade159

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