Problème sur agrandissement taille police

Bonjour

Je tiens tout d'abord à me présenter, Thibaut, 27 ans, chômeur à la recherche d'un emploi (dans l'associatif, l'informatique, la publicité...).

Je travaille actuellement bénévolement sur un site associatif destiné à un public de mal-voyants.

Aussi, pour faciliter leur lecture et sachant que le plupart ne connaissent pas les fonctions des navigateurs, j'ai ajouté deux feuilles de style (taille large et extra-large) et un javascript styleswitcher.js et cela fonctionne (en m'inspirant du topic suivant).

Seulement, cela ne fonctionne que sur la page en cours et pas sur les liens suivants.

Ai-je raté une étape? Est-ce que c'est parce que je l'essaye encore en local? Le site est hébergé sur voila (gratuitement), est-ce que ce script est donc incompatible car le site n'a pas un réel nom de domaine?

Merci d'avance.

Ps: l'ancien site est ici, le premier jet de la refonte peut être consultable ici. J'accepte toute critique constructive sur le site, cependant, il répond à un cahier des charges national d'où certaines obligations fondamentales (notamment pas de php).

D'ailleurs, j'ai un souci avec le dewplayer qui ne passe pas quand j'utilise IE (je dirai pour ma part tant pis mais bon)...

Ps2: Le script en question est le suivant (et pas de moi):

checkStylesheet();

function checkStylesheet()
{
	var textSize = getCookie("text_size");
	var theLink = "";

	if (textSize != "null")
	{
		setStylesheet('Text ' + textSize)
	}

	return true;
}

function cookieExists(cookieName)
{
	if (document.cookie != "")
	{
		var theCookieList = document.cookie.split(";");

		for (i = 0; i < theCookieList.length; i++)
		{
			var currCookieName = theCookieList[i].split("=")[0];
			var currCookieValue = theCookieList[i].split("=")[1];

			if (currCookieName.indexOf(cookieName) != -1)
			{
				if (currCookieValue == "null")
				{
					return false;
				}

				return true;
			}
		}
	}
	return false;
}

function getCookie(cookieName)
{
	if (cookieExists(cookieName))
	{
		var theCookieList = document.cookie.split(";");

		for (var i = 0; i < theCookieList.length; i++)
		{
			if (theCookieList[i].split("=")[0].indexOf(cookieName) != -1)
			{
				return theCookieList[i].split("=")[1];
			}
		}
	}

	return "null";
}

function setCookie(cookieName, cookieValue)
{
	var cookieOptions = "path=/;";

	cookieOptions += "domain=voila.fr;";
	cookieOptions += "expires=" + (new Date("December 31, 2010")).toGMTString() + ";";

	document.cookie = cookieName + "=" + cookieValue + ";" + cookieOptions;

	return;
}

function setStylesheet(styleTitle)
{
	var currTag;

	if (document.getElementsByTagName)
	{
		for (var i = 0; (currTag = document.getElementsByTagName("link")[i]); i++)
		{
			if (currTag.getAttribute("rel").indexOf("style") != -1 && currTag.getAttribute("title"))
			{
				currTag.disabled = true;

				if(currTag.getAttribute("title") == styleTitle)
				{
					currTag.disabled = false;
				}
			}
		}
	}
	else
	{
		alert("Avec ce navigateur, il n'est pas possible de changer la taille de la police du texte.");
	}
}

[/i][/i][/i][/i][/i]
Modifié par r41nb0w (07 Apr 2010 - 14:23)

julienw a écrit :
Clairement, si tu veux poser un cookie, il faut l'essayer en ligne.

Je n'ai pas encore les codes pour le mettre sur l'hébergeur officiel mais, en l'essayant chez moi, je mets juste "free.fr"?

julienw a écrit :
Ensuite, il faut bien que sur chaque page, tu ailles récupérer le cookie configuré, et que tu configures le stylesheet associé en fonction. Et j'ai pas l'impression que tu fasses ça, je me trompe ?

Possible que non, je ne fais qu'appeler la fonction js et les feuilles de style alternatives. Tu peux développer le codage s'il-te-plait?

Ps: pour le dewplayer, il fallait le mettre dans le même dossier que les fichiers html le demandant pour qu'Internet Explorer le reconnaisse. L'est vraiment ...
Modifié par r41nb0w (07 Apr 2010 - 18:27)

Pas de nouvelles, mauvaises nouvelles snif!

Bon, j'ai testé depuis en changeant le nom de domaine mais cela ne modifie pas la chose.

J'ai, en cherchant sur le forum, récupéré un fil de discussion qui m'a permis de changer le script en celui-ci:

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

Cependant, en appelant le script dans head et en mettant deux feuilles de style alternatives, cela ne fonctionne pas.

Est-ce que c'est sur le lien en lui-même que cela pêche?

Si je mets ceci, cela fonctionne pour la modification de la feuille de style:

<a id="tmoyen" class="moyen" href="#" onclick="setStylesheet('Taille moyenne'); setCookie('text_size', 'Moyen'); 
return false;" onkeypress="setStylesheet('Taille moyenne'); setCookie('text_size', 'moyen'); return false;" 
title="Texte de taille moyenne">A</a>

Si je laisse seulement le minimum comme expliqué sur le lien, mes changements ne fonctionnent plus.

<a href="#" 
onclick="setActiveStyleSheet('paul'); 
return false;">A</a>

Quel est le problème exactement? Je ne sais pas du tout l'erreur et j'avoue nager... J'espère que vous saurez m'aider...

Ps: Voilà mon modèle de page xHtml:

<!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">

<head>

<title>Bibliothèque Sonore d'Orthez | ?????</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="copyright" title="Sous licence CC" href="http://creativecommons.org/licenses/by-nc-nd/2.0/fr/" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link type="text/css" rel="stylesheet" href="css/font.css" /><!-- Feuille de style basique -->
<link type="text/css" rel="stylesheet" href="css/large.css" title="Taille normale" /><!-- Feuille police de base -->
<link type="text/css" rel="alternate stylesheet" href="css/xlarge.css" title="Taille moyenne" /><!-- Feuille police moyenne -->
<link type="text/css" rel="alternate stylesheet" href="css/xxlarge.css" title="Grande taille" /><!-- Feuille police grande -->

<!-- Script pour la modification de la taille du texte -->
<script language="JavaScript" type="text/javascript" src="js/taille.js"></script>
<!-- Script pour le Dewplayer -->
<script language="JavaScript" type="text/javascript" src="js/swfobject.js"></script>

</head>

<body>

<table width="100%"  border="0" align="left">
<tr>
  
<!-- 1ère colonne -->
    <th scope="col" width="20%" valign="top">

<!-- Trois A pour changer la taille de la police -->
<div id="taille">
	<a id="tnormal" class="normal" href="#" onclick="setStylesheet('Taille normale'); setCookie('text_size', 'Normal'); 
	return false;" onkeypress="setStylesheet('Taille normale'); setCookie('text_size', 'normal'); return false;" 
	title="Texte de taille normale">A</a>
	<a id="tmoyen" class="moyen" href="#" onclick="setStylesheet('Taille moyenne'); setCookie('text_size', 'Moyen'); 
	return false;" onkeypress="setStylesheet('Taille moyenne'); setCookie('text_size', 'moyen'); return false;" 
	title="Texte de taille moyenne">A</a>
	<a id="tgrand" class="grand" href="#" onclick="setStylesheet('Grande taille'); setCookie('text_size', 'Grand'); 
	return false;" onkeypress="setStylesheet('Grande taille'); setCookie('text_size', 'grand'); return false;" 
	title="Texte de grande taille">A</a>
</div>

<!-- Menu de navigation à gauche -->
<div id="menu">
<p id="menuon"><a href="index.html">Accueil</a></p>
<p><a href="infos.htm">Informations</a></p>
<p><a href="animateurs.htm">Animateurs</a></p>
<p><a href="audiolecteurs.htm">Audiolecteurs</a></p>
<p><a href="catalogue.htm">Catalogue</a></p>
<p><a href="actualites.htm">Actualités</a></p>
<p><a href="sponsors.htm">Sponsors</a></p>
</div>
	</th>
<!-- Fin du Menu de navigation -->

<!-- 2ème colonne -->
    <th scope="col" width="85%">
	
<!-- Début du contenu -->
	<p align="justify" id="titre">Titre de la page</p>

</th><!-- Fin du contenu -->

</tr></table>

</body>

</html>

Ci-après ma feuille de style grand format:

/* Taille du texte */

/* Taille 3 xxlarge */


html {
	font-size: 100%;
} 

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 2.25em;
	text-align: left;
}

#titre {
	font-size: 3em;
	text-align: center;
	color: #000099;
}

.titre {
	font-size: 3em;
	color: #666666;
}

h1, h2 {
	text-align: center;
}

.infos {
	font-style: italic;
	font-size: 2em;
}

.big {
	font-size: 3em;
}

.actu {
	text-decoration: underline;
	font-size: 2.5em;
}

/* Décoration du A de la police en cours */

#tgrand {
	color: #666;
	font-weight: bold;
	padding: 0em;
}

[/i][/i][/i][/i]

Bonjour,

Il est possible et conseillé d'installer un serveur chez soi, sur sa propre bécane, quand on fait un minimum de PHP. Ça permet entre autre de vérifier le fonctionnement de ces histoires de cookies / sessions avant de mettre réellement en ligne. Faire une recherche Google "WAMP" pour les PC et "MAMP" pour les Macintosh.

Bonjour.

A moins que j'ai lu en ZZ, je ne vois pas pourquoi tu me parles de PHP sur un site 200% xHtml...

Un simple questionnement: quels sont les scripts/codages à effectuer pour paramétrer un changement de taille de police sur un site global avec création de cookie?

Bonjour ici.

Toujours pas de solutions pour mon problème?

Est-ce ma démarche qui est mauvaise?

Bonjour Laurie-Anne.

J'ai quelques connaissances relatives du sujet et, d'ailleurs, le site en développement répond à un cahier des charges national mais aussi à des impératifs logiques décidés par le bureau associatif.

Aussi oui, les mal-voyants qui fréquentent notre association ne connaissent que très peu de rudiments informatiques. Ils surfent mais toutes les fonctionnalités annexes ne sont pas leur point fort.

Pourquoi pas une formation? C'est une idée en effet mais le problème est que je ne suis qu'aide webmaster. J'ai pris en charge le développement d'un site facile, léger et accessible à tout un chacun.

De ce fait, mon problème reste entier: permettre un agrandissement du texte qui reste permanent au fil des pages du site et si possible sans Php.

Je ne demande pas une autre piste de réflexion, juste une solution.

Merci quand même