Freelance Expert Technique Magento - JS – Adapter son site au navigateur de l’utilisateur

CONTACT
RSS

JS – Adapter son site au navigateur de l’utilisateur

Il est possible que vous ayez besoin d’adapter votre site en fonction de la taille du navigateur du client. Nous allons donc voir comment faire cette manipulation avec une image qui s’adapte Ă  la taille du navigateur, le tout grĂące Ă  jQuery.


Pour ce faire, nous allons créer une fonction adjustSize() que nous appellerons dÚs que la page sera chargée.

// Initialise le site par rapport au navigateur
$(function() {
	adjustSize();
});

Jusque lĂ , rien de bien compliquĂ©. Pour que la fonction soit utile, nous avons besoin de rĂ©cupĂ©rer la hauteur et la largeur du navigateur. Le problĂšme Ă©tant que les navigateurs ne sont pas tous sur la mĂȘme longueur d’ondes (qui a dit IE ?). Encore et toujours le mĂȘme, Internet Explorer (du 6 au 8) ne connait pas self.innerWidth et son homologue self.innerHeight. De ce fait il faut passer par une petite condition pour contourner ce problĂšme.

/* FONCTION QUI AJUSTE LE SITE AU NAVIGATEUR */
function adjustSize() {
	// Initialisation des variables pour la taille de la fenĂȘtre
	var navWidth, navHeight;
	if (self.innerWidth != undefined)
	{
		navWidth = self.innerWidth;
		navHeight = self.innerHeight;
	} else {
		navWidth = document.documentElement.clientWidth;
		navHeight = document.documentElement.clientHeight;
	}
}

VoilĂ  la base du script ! Pour la suite nous allons utiliser une image qui s’adaptera donc au navigateur (pas franchement d’intĂ©rĂȘt, c’est vraiment pour l’exemple). J’ai hĂ©siter longuement entre un de mes tags sur CS:S (comprendra qui pourra) mais finalement j’ai pris une simple image d’un artiste que j’aime beaucoup, Grum. Comme je suis sympa je vous met le code HTML :

<img src="grum.jpg" alt="Grum" />

Ce tutoriel semble arrivĂ© Ă  la fin, il ne reste plus qu’Ă  adapter l’image au navigateur grĂące aux variable navWidth et navHeight crĂ©es prĂ©cĂ©demment :

/* FONCTION QUI AJUSTE LE SITE AU NAVIGATEUR */
function adjustSize() {
	// Initialisation des variables pour la taille de la fenĂȘtre
	var navWidth, navHeight;
	if (self.innerWidth != undefined)
	{
		navWidth = self.innerWidth;
		navHeight = self.innerHeight;
	} else {
		navWidth = document.documentElement.clientWidth;
		navHeight = document.documentElement.clientHeight;
	}

	// Mise-Ă -jour des divs principaux (avec la bonne taille tailles)
	$("img").css({
		"width": navWidth,
		"height": navHeight
	});
}

Et voilĂ , une bien belle image tout Ă©tirĂ© comme il faut :). L’image est bien aux dimensions du navigateur mais il reste une petite chose Ă  faire. En effet, lorsque vous redimensionnez votre navigateur l’image ne suit pas. On pourrai penser que la mĂ©thode resize() de jQuery pourrait faire l’affaire mais il y a encore quelques subtilitĂ©s parmi les navigateurs. Firefox va redimensionner l’image par Ă -coup alors que Webkit (Chrome et Safari) et IE le font instantanĂ©ment. La mĂ©thode resize() pour l’exemple proposĂ© dans ce tutoriel suffit, mais si vous avez d’autres parties de votre site Ă  adapter, il se peut que ça rame sec sur IE. Pour pallier ce problĂšme, j’utilise la fonction smartresize de Paul Irish qui permet Ă  IE et Webkit d’attendre que l’utilisateur est redimensionner sa page pour fonctionner (un exemple est disponible ici). ConcrĂštement ça donne ça :

// Fonction appelé lorsque le navigateur change de résolution
$(window).smartresize(function(){
	adjustSize();
});

Félicitation, vous avez réussi mon tutoriel \o/
N’hĂ©sitez pas Ă  nous montrer vos rĂ©alisations faites avec nos tutos ;)

CATÉGORIES :

jQuery

    • ZeBu
    • January 15th, 2010

    Hummm… Perso j’ai une barre de scroll vertical et horizontal sur la dĂ©mo !
    J’suis sous XP avec Firefox et une rĂ©solution de 1440*900.

  1. Perso j’ai aussi les scrollbars chez moi (Windows 7 & Firefox 3.5.7)

    • Lesny
    • January 15th, 2010

    Salut les mecs :)
    Je viens de regarder, et chez moi ça marche niquel (Chrome et Firefox, sous 7), je viens de test sous nunux, idem.

    Comme l’a prĂ©cisĂ© Le breton (calvein), la redimension ne s’effectue que lorsque vous arrĂȘtez la redimension (lorsque vous lacher le clic de la souris), ceci afin d’Ă©viter une surcharge de calcul cĂŽtĂ© client.

    • ZeBu
    • January 15th, 2010

    Oui la redimension se fait bien si je fais varier la taille de la fenĂȘtre du navigateur, mais il y a toujours par dĂ©faut la barre de scroll horizontal et vertical du navigateur^^
    J’ai testĂ© que le lien dĂ©mo, mais pas la source.

    Tiens v’lĂ  un screen : http://img43.yfrog.com/img43/158/nanane.jpg

  2. Ah ben si c’est un breton, c’est pour ça que ça marche pas :D

  3. C’est normal, c’est le css par dĂ©faut du navigateur qui met des espaces un peu n’importe comment, et comme j’ai pas mis une ligne de CSS ça donne ça.

    • ZeBu
    • January 15th, 2010

    J’vais ĂȘtre chiant… mais mĂȘme avec le padding et margin Ă  0, il y a toujours des scrollbar :P

    • adrien audrys lawl
    • January 15th, 2010

    @ZeBu

    ZeBu :
    Oui la redimension se fait bien si je fais varier la taille de la fenĂȘtre du navigateur, mais il y a toujours par dĂ©faut la barre de scroll horizontal et vertical du navigateur^^
    J’ai testĂ© que le lien dĂ©mo, mais pas la source.
    Tiens v’là un screen : http://img43.yfrog.com/img43/158/nanane.jpg

    de mĂȘme pour moi…
    ubuntu 8.04, firefox 3.0.17

    • benji
    • October 7th, 2010

    super le tuto
    comment ca se passe par contre quand il y a des images et du textes?

  4. Comme un bloc avec son width et son height prédéfinis.

  5. Superb, what a web site it is! This webpage presents useful
    information to us, keep it up.

  1. January 18th, 2010