Div in midden van browserscherm zetten

[flbos]

Hoi, ik gebruik onderstaande functie om een bepaalde div die standaard onzichtbaar is zichbtaar te maken. De positioning van deze div is absolute, het is dan ook de bedoeling om er voor te zorgen dat deze div precies in het midden van het scherm komt. Met het midden bedoel ik het midden van de ruimte van het scherm in de browser, dus exclusief menu's en alle werkbalken. Dit krijg ik niet helemaal voor elkaar.

Probleem is dat ik het midden bereken met behulp van availHeight. Dit is de volledige hoogte van het scherm (ook buiten de browser, echt het totale scherm van de gebruiker dus). Hierdoor komt mijn div aanzienlijk lager dan het midden terecht. Hoe bepaal ik nu dus het stukje hoogte van de ruimte van het scherm in de browser (dus exclusief menu's en alle werkbalken). Als ik dat weet kan ik dit invoegen in onderstaande functie en dan kom ik er wel uit denk ik.

Eenzelfde verhaal gaat in feite op voor de breedte, want ook daarvoor gebruik ik nu de breedte van het hele scherm ipv alleen het stukje binnen de browser dat de pagina laat zien.

function show(){
	width = 620; //breedte van de div
	height = 270; //hoogte van de div
	leftmargin = (screen.availWidth/2)-(width/2);
	topmargin = (screen.availHeight/2)-(height/2) + document.documentElement.scrollTop;	
	document.all['hiddendiv'].style.left=leftmargin
	document.all['hiddendiv'].style.top=topmargin
                document.all['hiddendiv'].style.display='block'; //zichtbaar maken
  }

 

[JeroenE]

Vervang "availHeight" door height en "availWidth" door width.
Ook de width en height hoef je niet meer door twee te delen.
Normaal moet het zo in orde zijn.

function show(){ 
    var divw = 620; //breedte van de div 
    var divh = 270; //hoogte van de div     
    document.all['hiddendiv'].style.left = (screen.width/2) - divw;
    document.all['hiddendiv'].style.top = (screen.height/2) - divh;
    document.all['hiddendiv'].style.display='block'; //zichtbaar maken 
  }

Greetz : Jeren.

 

[flbos]

Bedankt maar de aangedragen oplossing werkt niet...

Ten eerste moet je lijkt mij width en heigth wel door twee delen anders kom je toch nooit goed uit

Tenminste bij mij komt de breedte nu ongeveer goed uit, met mijn opzet uit mijn eerste post komt de div horizontaal gezien bijna in het midden, er is enige afwijking aangezien de scrollbalk aan de rechterkant ook mee wordt geteld als ik screen.width neem.

Probleem zit met name in de hoogte, daar komt de div te ver naar beneden omdat screen.height de hoogte van het hele scherm neemt.

Nogmaals: het is mijn bedoeling om de div gecentreerd te laten zien ten opzicht van de randen van het binnenste gedeelte van de browser. Hiermee bedoel ik het gedeelte van de browser dat de pagina laat zien. Is dit mogelijk met JS?

 

[JeroenE]

Je hebt gelijk dat je eigen "width" en "height" ook door twee moet delen.

function show(){ 
    var divw = 620; //breedte van de div 
    var divh = 270; //hoogte van de div      
    document.all['hiddendiv'].style.left = (screen.width-divw) / 2; 
    document.all['hiddendiv'].style.top = (screen.height-divh) / 2; 
    document.all['hiddendiv'].style.display='block'; //zichtbaar maken 
  }

Voor de rest zal ik het straks eens beter bekijken.

Greetz : Jeren.

 

[JeroenE]

Ik moet je het antwoord schuldig blijven.
Sorry hoor.
Hier kan ik dus ook weer iets bijleren.

Greetz : Jeren.

 

[Johantrax]

is idd met javascript op te lossen, ik denk wel dat dit niet voor IE is

function show(){
    var divw = 620; //breedte van de div
    var divh = 270; //hoogte van de div      
    document.all['hiddendiv'].style.left = ([B]window.innerWidth[/B]-divw) / 2;
    document.all['hiddendiv'].style.top = ([B]window.innerHeight[/B]-divh) / 2;
    document.all['hiddendiv'].style.display='block'; //zichtbaar maken
    //als je div centraal moet blijven ondanks scrollen
    document.all['hiddendiv'].style.position = 'absolute';
}

Deze code is nog niet getest!
--Johan

 

[JeroenE]

Had ik al geprobeerd, maar ik kreeg een foutmelding.

Greetz : Jeren.

 

[JeroenE]

Ik heb het even als volgt opgelost :

<html>
<head>
<title>Center Div</title>
<style type="text/css">
#hiddendiv {
height:270;
width:620;
background-color:#eeeeee;
}
</style>
</head>
<body>
<table height="100%" width="100%">
<tr valign="middle"><td align="center">
<div id="hiddendiv"></div>
</td></tr>
</table>
</body>
</html>

--> voorbeeld <--

Greetz : Jeren.

 

[Johantrax]

mooi is anders (codetechnisch gezien dan), maar het werkt wel, alleen krijg ik zowel in FF als IE een scrollbar voor de volledige pagina

 

[JeroenE]

Dat is omdat de hoogte van de tabel 100% is en ik daaronder nog een onzichtbare teller gezet heb.
Kopieer de code in de div gerust in een nieuw html-bestand, en probeer dat eens opnieuw. Dan zou die scrillbar weg moeten zijn.

Greetz : Jeren.