josDesign
Erfahrenes Mitglied
Hallo,
ich baue mir gerade eine Seite welche horizontal sowie vertikel zentriert wird per JS/jQuery:
jQuery Funktionen:
Nun ist es aber so, dass wenn die Viewportheight kleiner ist, als die Höhe von der zentrierten Homepage ich die vertikale Zentrierung deaktivieren muss. Ich habe dafür folgendes Skript im $(function() { Bereich von jQuery:
Wenn ich .vAlign() ausserhalb der if's fix schreibe, aktualisiert sich die Zentrierung auch nach Viewportresize. Ich frage mich, wie ich auch meinen IF-Code nach Resize wieder ausführen kann.
Vielleicht hat jemand einen Tipp oder Hinweis für mich?
LieGrü und Dank im Voraus,
jos
ich baue mir gerade eine Seite welche horizontal sowie vertikel zentriert wird per JS/jQuery:
jQuery Funktionen:
Code:
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
Nun ist es aber so, dass wenn die Viewportheight kleiner ist, als die Höhe von der zentrierten Homepage ich die vertikale Zentrierung deaktivieren muss. Ich habe dafür folgendes Skript im $(function() { Bereich von jQuery:
Code:
var viewportHeightIE = document.body.clientHeight;
var contentHeight = document.getElementById('wrap').offsetHeight;
if( navigator.appName=="Microsoft Internet Explorer" ) {
if( viewportHeightIE > contentHeight ) {
$("#wrap").vAlign();
}
} else {
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
if( viewportHeight > contentHeight ) {
$("#wrap").vAlign();
}
}
// Seite hor zentrieren
$("#wrap").hAlign();
Wenn ich .vAlign() ausserhalb der if's fix schreibe, aktualisiert sich die Zentrierung auch nach Viewportresize. Ich frage mich, wie ich auch meinen IF-Code nach Resize wieder ausführen kann.
Vielleicht hat jemand einen Tipp oder Hinweis für mich?
LieGrü und Dank im Voraus,
jos
Zuletzt bearbeitet: