[Résolu] Feuilles de style alternatives - lien entre code javascript e

Bonjour à tous,

Ayant quelques bases en HTML/CSS, je me vois contraint d'utiliser un script javascript pour pallier à un besoin.
Le but recherché est de donner la possibilité au visiteur d'un site de personnaliser l'apparence de ce dernier par le biais de feuilles de styles CSS alternatives. Ayant pas mal écumé les blogs et forums, j'ai fini par trouver cette solution décrite par Paul Sowden : https://alistapart.com/article/alternate
Sur son blog, on y trouve :
- Comment utiliser les balises "link" en en-tête de page HTML.
- Un script javascript, prêt à l'emploi, qui permet de conserver le style sélectionné d'une page à l'autre via les cookies.
- Comment faire référence au script en en-tête de page HTML.

Mais il manque néanmoins une chose importante et c'est pourquoi je fais appel à vous :
Il n'indique pas le code HTML correspondant à insérrer dans la page pour faire le sélecteur de style fonctionnant avec le script style-switcher.js.

A ce stade, les en-têtes de mes pages HTML contiennent le code source suivant :

		<link rel="stylesheet" type="text/css" href="css/style-classic.css" />
		<link rel="stylesheet" type="text/css" title="spring" href="css/spring.css" />
		<link rel="alternate stylesheet" type="text/css" title="summer" href="css/summer.css" />
		<link rel="alternate stylesheet" type="text/css" title="autumn" href="css/autumn.css" />
		<link rel="alternate stylesheet" type="text/css" title="winter" href="css/winter.css" />
		<script type="text/javascript" src="js/style-switcher.js"></script>

Firefox me permet de switcher entre les différents styles et ça fonctionne bien. Mais désormais, il me faut intégrer la fonction au sein de la page web ; comment s'y prendre ?...

Vous remerciant par avance pour vos retours
Modifié par Raf-Web (02 Aug 2018 - 14:48)

Salut,

Ah ouais le mec lache ça comme s'il en avait marre de faire un exemple hahaha. J'ai juste retenu :

a écrit :
To allow the visitor to change the active style sheet, you could use javascript onClick events.

Donc j'imagine qu'il faut que tu mette des liens/boutons avec des onclick dessus qui vont appeler le setActiveStyleSheet()....

Bonjour Laurent,

Tout d'abord, merci pour ton retour rapide.
J'ai bien tenté quelques recherches sur cette fonction "onClick" mais ne sais comments l'utiliser. Je bloque sur la fameuse syntaxe Javascript à introduire dans le HTML.

Ah !
Bah si tu a fait un recherche, même toute petite tu as pu voir au moin l'exemple :

<button onclick="myFunction()">Click me</button>

du coup au lieu de "myFunction" il faut appeler "setActiveStyleSheet" avec le bon "title" :

<button onclick="setActiveStyleSheet(summer)">Click me</button>

Tu bloques où ?
Ce n'est que des suppositions hein je ne peux pas tester...
Modifié par _laurent (02 Aug 2018 - 15:24)

<button onclick="setActiveStyleSheet(summer)">Click me</button>

ne fonctionne pas. Cela vient-il du fait que la fonction "setActiveStyleSheet()" n'est pas reconnue et donc qu'il faut déclarer une bibliothèque js dédiée en en-tête HTML ?
Modifié par Raf-Web (02 Aug 2018 - 15:59)

setActiveStyleSheet() est une fonction de style-switcher.js mais y'a une couille pour appeler les fonction directement dans onClick.

Bref on va faire la solution 1 pour appeler une fonction au click. oui le onclick direct dans le html c'est pas joli, c'était la solution 2 (plus rapide mais moins jolie ). Faire un EventListener c'est mieux !

Dans ton style-switcher.js tu peux rajouter :

document.getElementById("switchToSummer").addEventListener("click", function(){ setActiveStyleSheet('summer'); });
....

Et en faire un pour chaque bouton et saison.

Dans ton HTML tu n'aura plus qu'a mettre des id :

<button id="switchToSummer">Click me</button>
<a id="switchToAutumn">Click me</a>
<div id="switchToWinter">Click me</div>

Attention les ID son uniques donc 1 bouton = 1 id = Un eventListner déclaration.

Si tu veux qqchse de plus générique tu peux passer par un getElementByClassName, faire une boucle dessus et passer les title par un data-*.
Modifié par _laurent (02 Aug 2018 - 16:28)

Hélas cette solution 1 ne fonctionne pas davantage.

Tu as quoi comme erreur dans la console ?
Tu as un exemple en ligne ?

- Il n'y a pas d'erreur, mais le bonton n'est pas réactif.
- Le site n'est pas en ligne et ne sera disponible que sur un serveur de fichier pour une utilisation Intranet (et non Internet).

Sinon, le switch de styles fonctionne via le menu du navigateur FireTox.

Code HTML :

<!doctype html>
<html lang="en" dir="ltr">
	<head>
		<title>
			Settings
		</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="Settings." />
		<link rel="stylesheet" type="text/css" href="css/style-classic.css" />
		<link rel="stylesheet" type="text/css" title="spring" href="css/spring.css" />
		<link rel="alternate stylesheet" type="text/css" title="summer" href="css/summer.css" />
		<link rel="alternate stylesheet" type="text/css" title="autumn" href="css/autumn.css" />
		<link rel="alternate stylesheet" type="text/css" title="winter" href="css/winter.css" />
		<script type="text/javascript" src="js/style-switcher.js"></script>
	</head>
	<body id="top">
		<div id="content">
			<nav id="top-menu">
				<a href="home.html">
					A
				</a>
			</nav>
			<h1>
				Settings
			</h1>

<button id="switchToSummer">Click me</button>
<a id="switchToAutumn">Click me</a>
<div id="switchToWinter">Click me</div>

			<nav class="go">
				<a href="#top">
					^
				</a>
			</nav>
		</div>
	</body>
</html>

Code Javascript :

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

document.getElementById("switchToSummer").addEventListener("click", function(){ setActiveStyleSheet('summer'); });

Bonjour _laurent,

En relisant la dernière ligne du *.js ce matin, il me semble qu'il pourrait y avoir un souci avec les parenthèses ; par exemple

function()

ne contient rien...

Salut !

Désolé hier soir impossible de regarder de chez moi.
J'ai fait un test et j'arrive a le faire fonctionner.

Coté HTML j'ai mis :

  <button id="switchToSummer">Summer</button>
  <div id="switchToWinter">Winter</div>

Et coté Js j'ai changé un peu le code :

document.addEventListener("DOMContentLoaded", function() {
     document.getElementById("switchToSummer").addEventListener("click", function() { setActiveStyleSheet('summer'); } );
     document.getElementById("switchToWinter").addEventListener("click", function() { setActiveStyleSheet('winter'); } );
});

Le addEventListener("DOMContentLoaded") c'est pour faire une DOM ready (parceque si le DOM est pas prêt avant que le Js ne s'execute on n'arrive pas a accrocher l'event listner)

Le function(){ } c'est narmol c'est une fonction anonyme qui évite que setActiveStyleSheet() soit éxecuté directement (je ne connait pas vraiment le pourquoi du comment, un jour je creuserai... pour le moment je connait le problème et la solution hahah).

Et bien sur il faut un addEventListener pour chaque bouton comme je t'avais dit.

Ca fonctionne aux petits oignons !

Merci Laurent pour ta disponibilité et ton efficacité
Je vais pouvoir peaufiner la partie CSS afin de faire de jolis boutons.
Modifié par Raf-Web (03 Aug 2018 - 11:15)

Je l'avais déjà fait 1 ou 2 fois mais en posant un id spécifique sur le body pour overider le CSS :

.block {
    background:green;
}
#summer .block {
    background:red;
}

En tout cas ton code marche plutôt bien je suis content d'avoir pu te débloquer et en plus d'avoir découvert le alternate stylesheet ! Merci pour ça

C'est toujours agréable, en tant que visiteur, d'avoir le choix de l'apparence du site. Ca permet également d'implémenter des options d'accessibilité.

En effet, le code est plus propre avec cette dernière solution.

Merci bien !

Tant que j'y pense j'ai pas du tout vérifié si les cookies marchaient bien hein... faudra vérifier ça, ca fera l'objet d'au autre post !

Je confirme que les cookies fonctionnent très bien avec de récentes versions des navigateurs suivants :
- FireFox
- Edge
- Internet Explorer.