Développeur Web RoR

J'ai eu un petit bug aujourd'hui pour centrer verticallement un div (enfin une image !)

J'utilise cette fonction jquery

(function ($) {

// VERTICALLY ALIGN FUNCTION

$.fn.vAlign = function() {

        return this.each(function(i){

        var ah = $(this).height();

        var ph = $(this).parent().height();

        var mh = (ph - ah) / 2;

        $(this).css('margin-top', mh);

        });

};

})(jQuery);

Donc dans mon code j'ai fait :

$(document).ready(function() {

        alert($('#monimg').height());     

        alert($('#monimg').css('height'));

        $('#monimg').vAlign();

});

Les valeurs affichées était 0 et 0 et mon image ne s'est pas centrée !

Après de moulte recherche, je suis tombé sur une discussion !

Il existe une différence entre  $(document).ready(); et $(window).load();

$(document).ready(); : quand le document est chargé (le DOM)

$(window).load(); : quand la fenêtre est chargé (avec toutes ces images)

J'ai donc fait :

$(window).load(function() {

        alert($('#monimg').height());     

        alert($('#monimg').css('height'));

        $('#monimg').vAlign();

});

Résultat une fois toutes les images centrées, la hauteur de mon image est renvoyée et elle s'est centrée !

Encore un petit problème : le temps que toutes les images se chargent mon image #

monimg ne s'est pas centrée (ben oui 

$(window) n'était pas totalement "loadé" !

Du coup j'ai mis style="display:none;" sur mon image et ensuite j'ai mis le code dans head :

$(window).load(function() {

        $('#monimg').show();

        $('#monimg').vAlign();

});

J'en ai appris une bien bonne aujourd'hui :-)