Bonjour,
voilà, j'ai crée un plugin jQuery afin de faciliter le tout pour mettre les div au milieu de l'écran. Mais, le defaut, c'est quand, je fait par exemple height : 50%, celui ci ne fonctionne plus correctement car au chargement jQuery ne cherche pas, il prend 50 au lieu de la taille final.
Quand, je le fait manuellement avec la console, il me renvois bien les bonnes valeurs, donc je pense que jQuery n'arrive pas lors de son chargement.
Voici mon code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="./plugin-jQuery/centerWindow.plugin.js"></script>
    <style type="text/css">
    body, html {
        margin:0;
        padding:0;
    }
    .is-Negative {width: 600px;border: 1px solid black; height: 50%;}
    </style>
</head>
<body>
    <div class="is-Negative centerWindow">TEST</div>

<script type="text/javascript">
        $(window).load(function(){
            $('.centerWindow').centerWindow({
                "topBottom" : "Yes",
                "leftRight" : "Yes",
                "Attached" : "Absolute",
                "zIndex" : "1000"
            });
        });
    </script>
</body>
</html>

Et mon plugin :

(function($){
    /*
    *
    * This plugin jQuery was created by Maniac058
    * Any improvement is allowed
    * This work is made available under the terms of the Creative Commons License Attribution 
    * - no commercial use - Sharing in the Same Conditions 4.0 International. 
    *
    */
    $.fn.centerWindow = function(options){
        var defaults = {
            'Attached' : 'Absolute',
            'topBottom' : 'Yes',
            'leftRight' : 'Yes',
            'zIndex' : '1'
        };
        var parametres=$.extend(defaults, options); 
        if(parametres.Attached == 'Fixed') {
            var position = 'fixed';
        }
        else if(parametres.Attached == 'Absolute') {
            var position = 'absolute';
        }
        if(parametres.topBottom == 'Yes') {
            var top = '50%';
            //var MgTP = ((this.height()) + this.css('padding-top').replace('px', '')) /2 ;
            //var MgTop = -MgTP+'px';
            var MgTop = -((this.height() /2) + (this.css('padding-top').replace('px', '')/2)) + 'px';
            //var MgTop = -this.height()/2 + 'px';
        }
        else if(parametres.topBottom == 'No')
        {
            var top = 'initial';
            var MgTop = 'initial';
        }
        if(parametres.leftRight == 'Yes') {
            var left = '50%';
            var MgLeft = -((this.width()/2) + (this.css('padding-left').replace('px', '')/2)) + 'px';
            //var MgLeft = -this.width()/2 + 'px';
        }
        else if(parametres.leftRight == 'No') {
            var left = 'initial';
            var MgLeft = 'initial';
        }
        this.css({
            'position' : 'absolute',
            'left' : left,
            'top' : top,
            'z-index' : parametres.zIndex
        });
        this.css({
            'margin-left' : MgLeft,
            'margin-top' : MgTop
        });
    };
})(jQuery);

Merci de votre aide.
Cordialement;

1 réponse


Bonjour,
c'est le DOCTYPE utilisé (html 5) qui donne ce comportement avec les heights en pourcentage. Si tu l'enlève, tu verras que le cadre est bien centré.

Une manière de peut-être résoudre le problème en gardant le doctype: (à tester)

body, html {
margin:0;
padding:0;
height:100%;
}

Cordialement

Antho