begin process at 2012 05 28 12:56:46
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC ENREGISTREMENT COOKIE

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC ENREGISTREMENT COOKIE


 Information sur la source

Note :
Aucune note
Catégorie :Divers Classé sous :cookie, texte, style, css, accessibility Niveau :Débutant Date de création :15/02/2011 Date de mise à jour :15/02/2011 18:31:14 Vu :2 732

Auteur : Annadrill

Ecrire un message privé
Site perso
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

 Description

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

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



 Historique

15 février 2011 18:31:14 :
Ajout d'info

 Sources du même auteur

Source avec Zip PETITE "BOX DE COMMENTAIRE"
Source avec Zip LOADER UNE PAGE EN AJAX AVEC UN PETIT EFFET

 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator
Source avec Zip XSTYLE : STYLE ETENDU par foxz
Source avec Zip Source avec une capture TRAITEMENT IMMÉDIAT DU CSS [TIC] par bultez
Source avec Zip ACTIVATION DE CSS - RÉCUPERATION DATE JOUR - CRYPTER ADRESSE... par oliverdev

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

CSS dans une iframe [ par le_binr ] Bonjour,Je suis en train de créer un site internet dynamique avec un petit wysiwyg permettant de mieu gérer le texte pour un novice.Grâce à la command iframe et css [ par kaskran ] Est ce que l'on peut inserer ( et donc utiliser) une feuille de style dans une IFrame ????car la j'ai un soucis explorer ne veut pas l'utiliser mon st appliquer plusieurs styles CSS sur une cellule d'un tableau [ par zizou100679 ] sur une balise TD je voudrais appliquer plusieurs styles provenant d'une feuille de style. on va appeler cssGras un style qui met la police en gras, c CSS: Change la couleur du texte d'un input [ par Mumuri ] Bonjour,j'aimerai changer le couleur de texte d'un input en mode disabled. Je pense que ca peut se faire via un css, mais je ne connais pas la ligne à probleme d'alignement de texte avec les css [ par pqmoltonel ] bonjour, j'ai un petit soui avec les feuilles de stylesj'aimerai alligner le texte contenu dans un &lt;span&gt;en basj'ai donc mis:.base{ position: re Changer le style css [ par djagger ] Salut !J'ai cr&#233;&#233; un menu en javascript avec une feuille de style pour les menus, sous-menus etc ...en gros :&lt;table&gt;&lt;tr&gt;&nbsp;&nb feuille de style en Css et formulaires. Comment ça marche? exemples si possible.. merci. [ par maxpat ] Bonjour &#224; tous, Travaillant sous Nvu, j'ai cr&#233;&#233; une feuille de style en Css. Comment faire un formulaire avec une feuille de style? Me DHTML - Formulaire - Input File - Style CSS [ par asgarden ] Bonjour,Voilà cela fait un petit moment que je cherche comment modifier le style d'un champs de formulaire de type FILE ?J'ai beau essayer, rien n'y f CSS et Hover [ par pitchoune ] Bonjour, Soit le tableau suivant dans une page HTML :   &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"&gt;   Du texte incliné (css) [ par annesirine ] Bonjour à tous, J'ai trouvé comment en css incliner du texte : ------------ <font style="layout-flow: vertical-ideographic" size=


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,557 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales