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 :-)