JS-Code auch bei Resize des Browser Windows wiederholt ausführen

josDesign

Erfahrenes Mitglied
Hallo,

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:
Zurück