Division in het midden van het scherm tonen

[gast0140]

Hoi javascripters,

Ik heb een division die de waarde van een variabele weergeeft:

echo("<div id=\"popup\">$popupContent</div>");

Deze division heeft de breedte van de inhoud van de variabele,
nu wil ik deze division in het midden van het scherm zetten met javascript volgens:
[JS]var popupContent = "<?php Print($popupContent); ?>";
document.getElementById("popup").style.left = (window.innerWidth/2) - (document.getElementById("popup").style.left/2) +"px"; //optie 1
document.getElementById("popup").style.left = (window.innerWidth/2) - (popupContent.length/2) +"px"; //optie 2[/JS]
Optie 1 werkt niet, waarschijnlijk omdat het element geen width heeft, maar bepaald wordt door de lengte van de variabele.
Optie 2 werkt ook niet, waarom, weet ik niet zeker.

Ik stel het erg op prijs als iemand mij met mijn probleem kan helpen of een (beter) alternatief te geven voor wat ik probeer te doen,
gast0140

 

[That Guy]

Whoa, whoa, zo werkt het niet
Je kan niet zomaar php mixen met Javascript. Tenminste, dat kan wel, maar niet op de manier zoals jij het wilt. Overigens ziet je met optie 1 het dichtste bij!

Het probleem is je 1e regel. Wat je even moet bedenken als je php/js mixed, is dat de php uitgevoerd wordt op de server, de output dan pas naar de browser wordt gestuurd - waar de js uitgevoerd wordt. Ofwel: op regel 1 staat iets van (na php is uitgevoerd)

[js]var popupContent = "De waarde van variabele is 32";[/js]

Variabele 'popupContent' bevat nu dus gewoon een sting. Hetzelfde geld als er HTML in deze string staat: Javascript ziet het als string.
Als je het vervolgens daadwerkelijk 'in de pagina' wilt gooien zal je dat nog wel als tussenstap moeten doen.

Aanschouw:
[js]var popupContent = "<?php echo $popupContent; ?>"; // zet php data in de js string

var div = document.createElement('div'); // maak nieuw div element
div.setAttribute('id', 'popup'); // zet het ID van dit element naar 'popup'
div.innerHTML = popupContent; // zet de popupContent string in de div
document.body.appendChild(div); // zet deze nieuwe div in de DOM

// nu pas kunnen we 'm aanroepen:
document.getElementById("popup").style.left = (window.innerWidth/2) - (document.getElementById("popup").style.left/2) +"px"; //optie 1[/js]



overigens, 'left' werkt pas als het element een position: absolute heeft in z'n style. Dus eventueel kan je na regel 4 nog dit erbij zetten:
[js]div.setAttribute('style', 'position: absolute;');[/js]

 

[gast0140]

Hoi That Guy,

Dankjewel voor de uitleg van php en js en voor een voorbeeldcode,
nu vraag ik me af of css ook enkel op de server wordt uitgevoerd, net als php,
of kan de volgende code ook nog in de css komen?
[js]popup.setAttribute('id', 'popup');[/js]

 

[csshunter]

Hoi beiden en medelezers,
Ik begrijp het iets anders, of anders heb ik iets niet begrepen.

1. Ik heb een division die de waarde van een php-variabele weergeeft.

• Dus: als uit de php-machine bv. een variabele-waarde van "Dit is mijn popup!" komt rollen,
• dan moet in de html-code komen te staan: <div id="popup">Dit is mijn popup!</div>

Dan lijkt me dat de pagina-code eenvoudig kan zijn:

<div id="popup"><?php echo $popupContent; ?></div>

Daar is dan niet perse javascript voor nodig. Je kan volgens de methode-ThatGuy wel die <div> gaan construeren, maar het kan vlugger meteen.

2. Deze division heeft de breedte van de inhoud van de variabele.
Nee, dat is wel de bedoeling, maar een div heeft een block-karakter en pakt altijd 100% van de beschikbare breedte (tenminste: zonder tegenbericht ergens anders in de html- of css-code).

3. Nu wil ik deze division in het midden van het scherm zetten met javascript. (= het horizontale midden)
Dat zou je inderdaad met javascript kunnen doen:
[JS]var pop=document.getElementById('popup');
pop.style.display="inline"; // de div ontdoen van z'n block-karakter (=100% beschikbare breedte)
var popWidth=pop.offsetWidth; // de berekende inline-breedte
pop.style.width=popWidth; // die breedte toekennen aan de div
pop.style.display="block"; // en z'n block-karakter teruggeven[/JS]
En dan kan je een berekening op de popWidth loslaten die de helft van het verschil met de opgemeten schermbreedte als margin-left neemt (of daaromtrent). *)

4. Maar ...
... hebben we voor opmaak niet CSS klaar staan?
Jawel:

#popup {
    margin: 0 auto;
    /* en meer moois, zoals: */
    background: yellow;
    border: 1px solid red;
    }

Omdat de reële breedte met javascript is vastgesteld, gaat het nu met {margin: 0 auto} vanzelf!

5. Maar ...
... als er toch CSS klaar staat, waarom dan niet alle javascript vergeten en er een container-div'je met inwendig spannetje van maken?

<div id="popup"><span><?php echo $popupContent; ?></span></div>

... met:

#popup {
    text-align: center;
    }
#popup span {
    display: inline-block;
    text-align: left;
    border: 1px solid green;
    background: yellow;
    /* en meer moois */
    }

• De testbatterij is opgeladen: variabele-div-variabele.htm
  
  
• Voordeel van puur css: aanpassing on-the-fly van de div-breedte, als de bezoeker een andere lettergrootte instelt of gaat in/uitzoomen.
• Met javascript zou je een "popup-breedte spion" met een setInterval-functie om de x sec. moeten laten checken of er soms herberekend moet worden wegens gewijzigde omstandigheden: extra gedoe.

Met vriendelijke groet,
CSShunter
___________
*) NB: de berekening met optie 1 kan niet werken, want:

• De window.innerWidth doet het niet in IE8 (zie quirksmode-tabel). Met de offsetWidth van de body kan het wel.
• De opgevraagde document.getElementById("popup").style.left bestaat niet. Dit zou de opgemeten breedte van de div moeten zijn, en hiervoor moet je dus eerst het block-karakter van de div slopen.

PS: Over tabellen zullen we het maar niet hebben! En met css een {display:table} en {display:table-cell} blokkendoos bouwen vraagt ook extra html-code.

 

[gast0140]

Het is gelukt met css, dank!