Changer la taille du texte et ou de feuille de style avec enregistrement cookie

Commenter

Contenu du snippet

J'ai pu grâce à ce forum terminer mon script permettant de modifier la taille du texte ainsi que la feuille de style de mon site, cela faisant partie d'un projet d'accessibilité, et je me suis dis qu'il pouvait être intéressant pour certains d'avoir ce code fini.

Source / Exemple : 


// choisir l'ID de la div ou l'espace dans le quel la taille sera modifiée... ici id = maDiv

//agrandit la taille du texte   lien : <a href="" onclick="growMySize('contentcorps','2'); return false" class="increase" accesskey="a">
//ou rapetisse la taille : lien :  <a href="" onclick="growMySize('contentcorps','-2'); return false" class="decrease" accesskey="r">

function growMySize(element, step) 
{
    step = parseInt(step,10);
    var el = document.getElementById(element);
    var curFont = parseInt(el.style.fontSize,10);
    el.style.fontSize = (curFont+step) + 'px';
}
// remet la taille défaut à définir   lien :  <a href=""onclick="resetMySize('contentcorps'); return false" class="reset" accesskey="d">
function resetMySize(element)
{
	
var el = document.getElementById(element);
el.style.fontSize = '16px';
}
// passe en pixels la taille du texte   lien :  <a href=""onclick="setMySize('30'); return false" class="reset" accesskey="d">
function setMySize(Pixels)
{	

    var el = document.getElementById('maDiv');
   
    el.style.fontSize = Pixels + 'px';
}

// lien <a title="Fond en couleur" href="" onclick="setActiveStyleSheet('templateColor'); return false;"  accesskey="c">

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 var 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.onunload = function() 
 {
//création du cookie
 var title = getActiveStyleSheet();
var el = document.getElementById('maDiv');
    var curFont = parseInt(el.style.fontSize,10);
    el.style.fontSize = curFont + 'px';
 createCookie("mySizeSaved", curFont, 365);
 
  createCookie("style", title, 365);
//récupération du nom et de la valeur

}
window.onload = function() {
//Lancement de la Ask()
	var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
var pixels = readCookie('mySizeSaved');
if (pixels) {
	setMySize(pixels);
	//alert(pixels);

  setActiveStyleSheet(title);
}}

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

Conclusion :


Je ferai juste remarqué que j'ai du placer la partie création des cookies (window onload et onunload) directement dans ma page php plutot que dans un js externe sans quoi cela ne fonctionnait pas.

Pour info : le changement de stylesheet se fait avec des alternates stylesheet

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Annadrill)