Centrer des éléments en JS

Facile de centrer ses éléments dans une page en JS… ? Eh ben non, car selon les navigateurs, on ne peux pas récupérer les hauteurs / largeurs de la page de la même façon.
J’ai donc fait une petite fonction qui va centrer un élément automatiquement, peu importe le navigateur que vous utilisez.

Tout d’abord il va falloir détecter si vous êtes sous Internet Explorer, vu que c’est principalement ce dernier qui nous pose problème…
Avec une ligne de code tout simplement :

var IE = navigator.appName.match(/Microsoft/) ? true : false ;

Voici cette fonction :

function centerElement(elt) {
    var wW =  IE ? window.document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth : window.innerWidth,
         wH =  IE ? window.document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight : window.innerHeight,

         compStyle = window.getComputedStyle(elt,null),
         w = parseInt(compStyle.getPropertyValue('width'), 10),
	 h = parseInt(compStyle.getPropertyValue('height'), 10) ;

	 elt.style.top = Math.floor((wH - h) / 2) + 'px' ;
	 elt.style.left = Math.floor((wW - w) / 2) + 'px' ;
}

Bien entendu, cela est trop simple..
Internet Explorer ($*@## !!!) n’a pas de fonction getComputedStyle. Il va donc falloir la réécrire nous-même.
La voici (elle ne vient pas de moi).

if (!window.getComputedStyle) {
    window.getComputedStyle = function(el, pseudo) {
        this.el = el ;
        this.getPropertyValue = function(prop) {
            var re = /(\-([a-z]){1})/g ;
            if (prop == 'float') prop = 'styleFloat' ;
            if (re.test(prop)) {
                prop = prop.replace(re, function () {
                    return arguments[2].toUpperCase() ;
                }) ;
            }
            return el.currentStyle[prop] ? el.currentStyle[prop] : null ;
        }
        return this ;
    }
}

Voila, grâce à cette fonction vous pourrez facilement centrer vos éléments en JS peu importe le navigateur !

A lire aussi :  Pagination avec de l'Ajax, sans Ajax !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *