Javascript pour re-dessiner la page

Dans l’article précédent nous avons trouvé un moyen d’adapter la page à la taille de la fenêtre.

Le seul problème avec cette technique, c’est que si le visiter modifie sa fenêtre, la page n’est plus à la bonne échelle.

La solution, c’est de re-dessiner la page lorsque le visiteur modifie la fenêtre.

Malheureusement, window.onsresize est déclenché, non seulement quand la fenêtre est modifiée, mais aussi quand elle est zoomée.

Pour redessiner la page quand la fenêtre est modifiée mais éviter de le faire quand la fenêtre est zoomée, on regarde les proportions de la page:

  • onresize avec changement de ratio L/H = re-dessiner la page
  • onresize sans changement de ratio L/H = ne rien faire
  <script>

	var delai = 0.5;
	var already = 0;
	var rat = ratio();

	window.onresize = function(event) {
		var hrf = window.location.href;
		if (hrf.substr(-1) == '+') return false;

		if (ratio() == rat) return false;
		if (!already){
		already = 1;
		setTimeout(redraw, delai * 1000);
		}
	};	

	function redraw(){
		already = 0;
		window.location.reload();
	}

	function ratio(){
		var w = window.innerWidth;
		var h = window.innerHeight;
		var r = Math.round(w/h*10);
		return r;
	}

  </script>

Ce script n’a pas d’intérêt pour les pages destinées aux appareils mobiles, car la fenêtre ne peut changer de format.

Leave a Reply

Your email address will not be published. Required fields are marked *