11499 sujets

JavaScript, DOM et API Web HTML5

Zoom type Firefox

Bonjour
j'utilise actuellement pour les personnes malvoyantes un système de zoom qui grossit les font-size de mon site.Voici le code :


var fontSize = 0.9;
function zoomIn() {
    fontSize += 0.1;
    document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
    fontSize -= 0.1;
    document.body.style.fontSize = fontSize + "em";
}


Ce code ne me convient pas vraiment car lorsqu'il grossi le texte du site il me déforme carrément la structure de celui-ci.

Je souhaiterais donc avoir un système de zoom de type navigateur où lorsque l'on clique sur + cela me grossisse toute la page et non que le texte.

Savez-vous où je puisse récupérer ce type de code ?

Merci d'avance
Modifié par stephane72 (15 Sep 2013 - 14:50)
Oui c'est ce que j'ai pensé mais j'ai cru lire que l'attribue "zoom" n'était pas compatible avec tous les navigateur ! est-ce vrai ?
Pourquoi vouloir réaliser un truc qui existe déjà naturellement sur les navigateur ?
Je pense que SolidSnake parlait du zoom avec les propriétés "transform" et "scale".
Je viens donc d'adapter un code que voici ci-dessous :

<html>
	<body>
		<style>
		.container{width: 800px;background: #000;}
		p{color:#fff;}
		a { color: #FFCC00;}
		</style>
		<div class="container">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
	<script type="text/javascript">
	function ZoomScreen100() {
	document.body.style.zoom="100%"
	 }
	function ZoomScreen200() {
	document.body.style.zoom="200%"
	 } 
	function ZoomScreen300() {
	document.body.style.zoom="300%"
	}
	function ZoomScreen400() {
	document.body.style.zoom="400%"
	}
	</script>
	<a href="#" onclick="ZoomScreen100()">A+</a>
	<a href="#" onclick="ZoomScreen200()">A+</a>
	<a href="#" onclick="ZoomScreen300()">A+</a>
	<a href="#" onclick="ZoomScreen400()">A+</a>
	</body>
</html>


Cela fonctionne sur Chrome,Safari,et IE mais pas sur oera et Firefox
Sujet clos
Aller à