DevBlog

Voici une petite fonction qui permet de centrer un élément dans une page Web ou, plus exactement, dans le “viewport”.

Mais qu’est-ce que c’est le “viewport” ? Il s’agit de la partie visible d’une page dans un navigateur.

Ainsi, quelle que soit la position de l’internaute dans la page, l’élément sera centré…

Voyons cette fonction…

function centerThis(element) {
	$(element).css({
		'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
		'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
	});
}

À utiliser comme ceci :

centerThis('#ZoomPhoto');

Attention, cette fonction ne fait que déterminer la position de l’élément concerné. S’il est caché (display: none), n’oubliez pas de le montrer suite à l’appel de cette fonction…

Mais attendez… “Houston ? We have a problem…”

En effet, pour l’instant, si le viewport est plus petit que l’élément à centrer, certaines parties de l’élément se retrouvent en dehors du viewport et ne sont donc pas visibles… C’est le genre de problème qui ne saute pas tout de suite aux yeux lorsque le bureau arbore fièrement un écran de 20 pouces et plus…

Corrigeons donc cette anomalie, pour le bien des mobinautes et de leurs écrans 7 pouces…

function centerThis(element) {
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var elementHeight = $(element).height();
	var elementWidth = $(element).width();

	var elementTop, elementLeft;

	if (windowHeight <= elementHeight) {
		elementTop = $(window).scrollTop();
	} else {
		elementTop = ((windowHeight - elementHeight) / 2) + $(window).scrollTop();
	}

	if (windowWidth <= elementWidth) {
		elementLeft = $(window).scrollLeft();
	} else {
		elementLeft = ((windowWidth - elementWidth) / 2) + $(window).scrollLeft();
	}

	$(element).css({
		'top': elementTop,
		'left': elementLeft
	});
}

Et voilà ! L’élément est centré, quelle que soit la taille du viewport…

Une dernière chose, ça fonctionne sous IE6…