Div mit Javascript mittig setzen / auf Bildschirm zentrieren

05. August 2010  |  Kommentar schreiben   |  Tags: , ,



Bei Facebook teilen

Die nächste interesante Javascript Programmieraufgabe, mit der wir uns beschäftigen wollen ist eine Div Ebene, abhängig von ihrer Breite und Größe und abhängig von der Browser Auflösung bei dem Benutzer, der die Javascript Funktion ausführt, auf dem Bildschirm zentrieren. Das brauchen wir oft wenn wir beispielsweise schnell eine Tabelle mit Elementen zeigen wollen, die verglichen werden oder allgemein in allen Fällen, wo wir unbedingt den kompletten Inhalt des Divs möglichst übersichtlich dem Besucher zeigen wollen. An der Stelle ist es für uns nicht relevant wo sich die Maus befindet zur Zeit der Öffnung von der Div Ebene, es wird einfach die Javascript Funktion ausgeführt.

Wir gehen davon aus, dass der zu zentrierende Div bereits vorbereitet und voll mit Daten ist. Nun gehen wir hin und zentrieren ihn.

Schritte

1. Die Div Ebene muss erstmal vom linken Rand genau in der Mitte des Bildschirms stehen. Das macht man so (unser Div heißt einfach div):

document.getElementById(div).style.left='50%';

50% bedeutet – setzte die Ebene genau in die Mitte des Bildschirms vom linken Rand her. An der Stelle ist es und noch egal wie breit der Div tatsächlich ist.

2. Ensprechend der Größe der Div Ebene, den Abstand zum linken Rand des Bildschirms verringern und zwar genau die Hälfte von der tatsächlichen Größe des Divs:

function CenterScreenDiv(div) {
div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Und fertig – die Ebene steht mittig wie ein Wunder, cross-browser-fähig!

Zusammenfassung der Funktion

Anbei die Funktion komplett:


document.getElementById('MyDiv').innerHTML = 'Hallo Welt';
CenterScreenDiv(document.getElementById('MyDiv'));

function CenterScreenDiv(div) {
div.style.left='50%';
div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Die Funktion können Sie auch bequem nutzen immer, wenn Sie dynamische Inhalte via AJAX nutzen. Es wird auch berücksichtigt, dass das Fenster auch mittig und sichtbar stehen soll, auch wenn der Benutzer nach unten gescrollt hat.

Teilen

Hinterlasse eine Antwort

Du musst angemeldet sein, um einen Kommentar abzugeben.