[Résolu] Javascript émuler "CRTL & +"

Bonjour à tous,

Je cherche un moyen de proposer à mes visiteurs de grossir le texte des mes pages. J'étais parti sur un styleswitcher mais je n'ai pas abouti. Je cherche donc un moyen via JS de reproduire le comportement de la fonction navigateur "CTRL + +" et "CRTL + -".
Si cela n'est pas possible, auriez-vous une idée pour parvenir à ce résultat?

Merci d'avance
Modifié par gendo (20 Aug 2007 - 15:04)

Salut,

Je sais que c'est possible, mais vu mes connaissances en JS je risque de ne pas pouvoir t'aider beaucoup.
Par contre, pourquoi vouloir reproduire une fonction qu'un navigateur propose, qui va non seulement occuper de l'espace dans la page pour rien, mais qui risque d'être en plus moins efficace que la fonction du navigateur ?

Salut.

Si tes polices sont en em ou en pourcentages alors une augmentation de la valeur pour l'élément html ou body fera l'affaire.

Mikachu > c'est juste pour proposer cette option dans la page

CNeo > Voilà ce que j'ai:

<a onclick="document.getElementById('conteneur').style.fontSize += '1.5em';">test</a>

J'essaie de continuer avec ça, je posterai mes éventuelles découvertes
Modifié par gendo (16 Aug 2007 - 22:56)

Voilà mon code, si tu t'y retrouves ^^

<script type="text/javascript">
	var TexteModificateur = 0;
	if (LireCookie("TexteModificateur"))
	{
		TexteModificateur = parseFloat(LireCookie("TexteModificateur"));
	}
	function GrossirTexte() {		
		if (TexteModificateur < 0.35)
		{
			TexteModificateur += 0.1;
			document.getElementById('conteneur').style.fontSize = (1 + TexteModificateur) + 'em';
			EcrireCookie("TexteModificateur", TexteModificateur);
			AfficherModificateur(TexteModificateur)
		}
	}
	function RetrecirTexte() {		
		if (TexteModificateur > 0.05)
		{
			TexteModificateur -= 0.1;
			document.getElementById('conteneur').style.fontSize = (1 + TexteModificateur) + 'em';
			EcrireCookie("TexteModificateur", TexteModificateur);
			AfficherModificateur(TexteModificateur)
		}
	}
	function MettreTexte(emmod) {		
		TexteModificateur = emmod;
		document.getElementById('conteneur').style.fontSize = (1 + emmod) + 'em';
		EcrireCookie("TexteModificateur", TexteModificateur);
		AfficherModificateur(emmod);
	}	

	function AfficherModificateur(emmod) {	
		for (var i=Math.round(emmod * 10 + 1); i>0; i--)
		{
			elem = document.getElementById("txt" + i);
			elem.style.opacity = 1;
			elem.style.MozOpacity = 1;
			elem.style.KhtmlOpacity = 1;
			elem.style.filter = "alpha(opacity=" + 1 * 100 + ")";
		}
		for (var i=Math.round(emmod * 10 + 2); i<6; i++)
		{
			elem = document.getElementById("txt" + i);
			elem.style.opacity = 0.3;
			elem.style.MozOpacity = 0.3;
			elem.style.KhtmlOpacity = 0.3;
			elem.style.filter = "alpha(opacity=" + 0.3 * 100 + ")";
		}
	}
</script>

<div id="conteneur">
	<div id="top_menu">
		<div style="background-color:#E9E9E9;padding: 0px 0px 0px 8px;">			
			<div class="float_right">&nbsp;
				<a onclick="RetrecirTexte();"><img  src="{$menu_root}templates/images/txt/moins.gif" alt="" /></a> 
				<a onclick="MettreTexte(0);"><img id="txt1" src="{$menu_root}templates/images/txt/a1.gif" alt="" /></a>
				<a onclick="MettreTexte(0.1);"><img id="txt2" src="{$menu_root}templates/images/txt/a2.gif" alt="" /></a>
				<a onclick="MettreTexte(0.2);"><img id="txt3" src="{$menu_root}templates/images/txt/a3.gif" alt="" /></a>
				<a onclick="MettreTexte(0.3);"><img id="txt4" src="{$menu_root}templates/images/txt/a4.gif" alt="" /></a>
				<a onclick="MettreTexte(0.4);"><img id="txt5" src="{$menu_root}templates/images/txt/a5.gif" alt="" /></a>
				<a onclick="GrossirTexte();"><img src="{$menu_root}templates/images/txt/plus.gif" alt="" /></a>&nbsp;&nbsp; 
			</div>

	<script type="text/javascript">
	document.getElementById('conteneur').style.fontSize =  (1 + parseFloat(LireCookie("TexteModificateur"))) + 'em';
	for (var i=Math.round(TexteModificateur * 10 + 2); i<6; i++)
	{literal}
	{
		elem = document.getElementById("txt" + i);
		elem.style.opacity = 0.3;
		elem.style.MozOpacity = 0.3;
		elem.style.KhtmlOpacity = 0.3;
		elem.style.filter = "alpha(opacity=" + 0.3 * 100 + ")";
	}
	{/literal}
	</script>

Modifié par gendo (18 Aug 2007 - 23:28)

Bon, j'ai mis en ligne mon script général, voici une page avec un peu de contenu (texte) où on peut le voir en fonctionnement:
http://www.matthieu-varaldo.com/photos/
Merci bc CNeo et Mikachu

PS: Vos remarques sur d'éventuelles (devrais-je dire, ultra probables) améliorations sont les bienvenues!

gendo a écrit :
PS: Vos remarques sur d'éventuelles (devrais-je dire, ultra probables) améliorations sont les bienvenues!

Par rapport à ton code HTML je dirais que trop de divs tue le div ... Pourquoi en mettre autour des h3 ?

PS : j'ai regardé rapidement donc ...

Tu as tout à fait raison pour les div... J'ai pourtant déjà essayé de décrasser un peu (menus sous formes de liste, titre utilisant des balises h1, h2, h5...), mais j'ai beaucoup de mal avec la structure générale de la page.

Pour ce qui est de:

<div class="bords"><h3 class="h3_green">Préambule</h3></div>

Le div me permet d'ajouter les bords gris, le h3 ajoutant les bords blancs.
Penses-tu qu'il faudrait mieux un code du genre:

<h3 class="h3_green"><span>Préambule</span></h3>

Avec:

.h3_green {
border: 1px solid #CCCCCC;
font-size: 1.2em;
padding: 0px;
margin: 0px;
}

.h3_green span {
display:block;
color: #FFFFFF;
padding: 2px;
margin: 2px;
text-align: center;
}
.h3_green span {background-color: #99CC99;}

Modifié par gendo (20 Aug 2007 - 10:43)

Je pense en effet que les divs doivent être réservés aux grandes divisions de la page autrement dit les grandes parties.
Le span ayant sémantiquement aucune signification il fera très bien l'affaire.

D'autres remarques :
- les balises <b> et <i> sont plutôt dépréciées en XHTML
- en général à la suite d'un titre ( tes h3 ) on met un paragraphe pas un span
- tes outils de taille du texte apparaissent même quand Javascript n'est pas activé donc dans l'idéal il faudrait qu'ils soient générés par Javascript
- dans la colonne de droite il y a du style dans les balises span

Voilà je crois que tu as déjà de quoi faire

CNeo a écrit :
- les balises <b> et <i> sont plutôt dépréciées en XHTML

J'ai remplacé les <b> par des <strong>, et les <i> par des <em>

CNeo a écrit :
- en général à la suite d'un titre ( tes h3 ) on met un paragraphe pas un span

OK, j'ai corrigé cela

CNeo a écrit :
- tes outils de taille du texte apparaissent même quand Javascript n'est pas activé donc dans l'idéal il faudrait qu'ils soient générés par Javascript

Modifié!

CNeo a écrit :
- dans la colonne de droite il y a du style dans les balises span

Déplacé dans le css.

Merci beaucoup pour ton aide !
Modifié par gendo (20 Aug 2007 - 13:19)

Quelle rapidité. Il reste sûrement d'autres choses à améliorer mais je ne les vois pas vu que ce n'est pas moi qui ai fait la page et que je n'ai pas très envie de tout regarder.

Lol, je comprends Le sujet original concernait le grossissement du contenu, ce qui a été traité (enfin j'espère que ce que j'ai ira).

Merci encore pour ton aide Je vais maintenant travailler sur l'amélioration de la sémantique du code.

De rien.
N'oublie pas de mettre le sujet en résolu et bonne chance pour ta sémantique.