Position eines DIV-Containers mit Javascipt verändern

Diskutiere Position eines DIV-Containers mit Javascipt verändern im JavaScript Forum im Bereich Programmierung; Hallo zusammen. Hoffe, ich bin hier in der richtigen Kategorie, da meine Frage wahrscheinlich ein Zusammenspiel aus Javascript, HTML und CSS...
Neues Thema erstellen Antworten
D

dte

Member
Beiträge
5
Punkte Reaktionen
0
Hallo zusammen.

Hoffe, ich bin hier in der richtigen Kategorie, da meine Frage wahrscheinlich ein Zusammenspiel aus Javascript, HTML und CSS ist...

Ich möchte die Position eines DIVs über Javascript verändern. Oben links, oben rechts, unten links und unten rechts funktionieren bereits. Wie kann ich mein DIV jedoch horizontal und/oder auch vertikal in Bezug auf das gesamte angezeigte Fenster positionieren?

VG Dennis

Hier die Teilausschnitte des relevanten Codes:

Javascript: 
        <script type="text/javascript">

            function build() {

                var content = 'Variabler Inhalt';
                var horizontal = 'OBEN';
                var vertikal = 'LINKS';

                if (horizontal === 'LINKS') {
                    document.getElementById('overlay').style.left = '30px';
                } else if (horizontal === 'MITTE') {
                    null // HowTo?
                } else {
                    document.getElementById('overlay').style.right = '30px';
                }

                if (vertikal === 'OBEN') {
                    document.getElementById('overlay').style.top = '20px';
                } else if (vertikal === 'MITTE') {
                    null // HowTo?
                } else {
                    document.getElementById('overlay').style.bottom = '20px';
                }

                document.getElementById('overlay').style.fontFamily = 'Arial';
                document.getElementById('overlay').style.fontSize = '50px';
                document.getElementById('overlay').style.color = '#FF0000';
                document.getElementById('overlay').style.position = 'fixed';
                document.getElementById('overlay').innerHTML = content;
                setTimeout(build,10);

            }

        </script>

HTML: 
    <body onload='build()'>
        <div id='overlay'></div>
    </body>
 
Zuletzt bearbeitet:
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
Ich zeige dir das mal für die horizontale Positionierung, siehe die Kommentare im Skript. Für die vertikale Richtung kannst Du es sicher selbst anpassen:
Code: 
            if (horizontal === 'LINKS') {
                document.getElementById('overlay').style.left = '30px';
            } else if (horizontal === 'MITTE') {
                // Linke Kante des Overlay in die Mitte positionieren:
                document.getElementById('overlay').style.left = "50%";
                // Jetzt liegt das Overlay rechts von der Mitte,
                // wir muessen es um die Haelfte seiner Breite
                // nach links verschieben:
                document.getElementById('overlay').style.transform
                    = 'translateX(-50%)';
            } else {
                document.getElementById('overlay').style.right = '30px';
            }
 
D

dte

Member
Beiträge
5
Punkte Reaktionen
0
Super! Danke @Sempervivum !

Funktioniert! :)

Zumindest horizontal mittig ODER vertikal mittig - wenn ich jetzt aber beides kombinieren möchte (also horizontal UND vertikal), dann scheint document.getElementById('overlay').style.transform = 'translateX(-50%)' ignoriert, bzw. durch das darauffolgende Setzen von translateY überschrieben zu werden. :unsure:

Hast Du auch hierzu einen Ansatz für mich?

VG Dennis

Javascript: 
                if (horizontal === 'LINKS') {
                    document.getElementById('overlay').style.left = '25px';
                } else if (horizontal === 'MITTE') {
                    document.getElementById('overlay').style.left = "50%";
                    document.getElementById('overlay').style.transform = 'translateX(-50%)';
                } else {
                    document.getElementById('overlay').style.right = '25px';
                }

                if (vertikal === 'OBEN') {
                    document.getElementById('overlay').style.top = '20px';
                } else if (vertikal === 'MITTE') {
                    document.getElementById('overlay').style.top = "50%";
                    document.getElementById('overlay').style.transform = 'translateY(-50%)';
                } else {
                    document.getElementById('overlay').style.bottom = '20px';
                }

                document.getElementById('overlay').style.position = 'fixed';
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
Ja, das Problem ist, dass das zweite transform das erste überschreibt. Du kannst das z. B. beheben, indem Du am Schluss den Fall, dass beide mittig sind, getrennt abfragst:
Code: 
            if (horizontal === 'MITTE' && vertikal === 'MITTE') {
                document.getElementById('overlay').style.transform = 'translate(-50%, -50%)';
            }
 
D

dte

Member
Beiträge
5
Punkte Reaktionen
0
Bombe!!! 1A. Vielen Dank!

Javascript: 
                if (horizontal === 'LINKS') {
                    document.getElementById('overlay').style.left = '25px';
                } else if (horizontal === 'MITTE') {
                    document.getElementById('overlay').style.left = '50%';
                    document.getElementById('overlay').style.transform = 'translateX(-50%)';
                } else {
                    document.getElementById('overlay').style.right = '25px';
                }

                if (vertikal === 'OBEN') {
                    document.getElementById('overlay').style.top = '20px';
                } else if (vertikal === 'MITTE') {
                    document.getElementById('overlay').style.top = '50%';
                    document.getElementById('overlay').style.transform = 'translateY(-50%)';
                } else {
                    document.getElementById('overlay').style.bottom = '20px';
                }

                if (horizontal === 'MITTE' && vertikal === 'MITTE') {
                    document.getElementById('overlay').style.transform = 'translate(-50%, -50%)';
                }

                document.getElementById('overlay').style.position = 'fixed';
overlay.area81.de
 
Thema:

Position eines DIV-Containers mit Javascipt verändern

Oben Unten