Blog ArobaseErreur 404 – Ou pas !

Facile … ? 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 ;
    }
}

En espérant que ça puisse aider un peu …

Cette entrée a été posté dans Développement, Javascript et taggé , , . Enregistrer le permalien.

Laisser un commentaire

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

Recherche par catégorie