Avatar billede nicolailissau Nybegynder
09. november 2009 - 22:13 Der er 6 kommentarer og
1 løsning

Vertical align

Hej Eksperter.

Har lavet et lille script for at centrere et div vertikalt på min side. Hvis jeg sætter en alert ind lige før den bliver skrevet er det pixel antal div'et skal flyttes ned korrekt, den gør det bare ikke.

Det er sikkert simpelt.

På forhånd tak.

<script type="text/javascript">
function __init__(){
    document.form.field.focus();
    oH = document.getElementById('container').offsetHeight;
    if(window.innerHeight && window.innerWidth){
        wH = window.innerHeight;
    }
    else {
        wH = document.body.clientHeight;
    }
    document.getElementById('container').style.top = (Math.round(wH/2)) - (Math.round(oH/2))+"px";
}

function toggle(obj){
    if(document.getElementById(obj).style.display=="block"){
        document.getElementById(obj).style.display = "none";
    }
    else{
        document.getElementById(obj).style.display = "block";
    }
}
</script>

<body onload="__init__();">
<a href="#" style="float:right; margin-right:20px;">Tilføj workout</a>
<div id="container" style="border:solid #000000 2px; height:auto; width:800px; margin:0 auto; padding: 20px 50px 20px 50px;">
<form method="post" name="form">
<input name="field" type="text" style="width:800px;"/>
</form>
<a href="java script:void(0);" onclick="toggle('advSearch');">Avanceret søgning</a>
<div id="advSearch" style="display:none;">
<p>Avanceret søgning: ON</p>
</div>
</div>
</body>
Avatar billede Slettet bruger
09. november 2009 - 23:15 #1
Det her du leder efter ? Det er XHTML 1.0 Transitional PASSED

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
  body {
  color: #000000;
  background-color: #FFFFFF;
  height: 100%;
  }
  #center {
  margin: 20%;
  }
  </style>
  <title>Centered divs</title>
</head>
<body>
  <div id="center">
<a href="#" style="float:right; margin-right:20px;">Tilføj workout</a>
<div id="container" style="border:solid #000000 2px; height:auto; width:800px; margin:0 auto; padding: 20px 50px 20px 50px;">
<form method="post" name="form" action="">
<input name="field" type="text" style="width:800px;"/>
</form>
<a href="java script:void(0);" onclick="toggle('advSearch');">Avanceret søgning</a>
<div id="advSearch" style="display:none;">
<p>Avanceret søgning: ON</p>
</div>
</div>
  </div>
</body>
</html>
Avatar billede nicolailissau Nybegynder
09. november 2009 - 23:54 #2
Tak for svar.

Ja, det er en løsning, men indholdet på siden bliver dynamisk. Jeg vil derfor gerne have en funktion der kan centrere div'et når nyt indhold loades. Altså den læser siden størrelse og centererer div'et derudfra. Som det script jeg har lavet bare, hvor den faktisk ændrer top property.
Avatar billede zips Juniormester
10. november 2009 - 00:38 #3
Udfra dette http://www.howtocreate.co.uk/tutorials/javascript/browserwindow ser det ud til du arbejder med noget som ikke virker i IE
Avatar billede Slettet bruger
22. november 2009 - 18:19 #4
Fandt du ud af det ?
Avatar billede nicolailissau Nybegynder
23. november 2009 - 09:15 #5
Hej.

Jeg har ikke fået det implementeret endnu, men jeg har en funktíon der finder højden af siden, højden af elementet og hvor meget siden er scroll'et. Så satser på at lave det derudfra.

I håb om andet svar har jeg ikke afsluttet tråden.

Mvh
Avatar billede Slettet bruger
23. november 2009 - 09:55 #6
Prøv dette.

<script type="text/javascript">
function __init__(){
    document.form.field.focus();
    oH = document.getElementById('container').offsetHeight;
    if(window.innerHeight && window.innerWidth){
        wH = window.innerHeight;
    }
    else {
        wH = document.body.clientHeight;
    }
    document.getElementById('container').style.marginTop = (Math.round(wH/2)) - (Math.round(oH/2))+"px";
}

function toggle(obj){
    if(document.getElementById(obj).style.display=="block"){
        document.getElementById(obj).style.display = "none";
    }
    else{
        document.getElementById(obj).style.display = "block";
    }
}
</script>

<body onload="__init__();">
<a href="#" style="float:right; margin-right:20px;" onClick="window.location.reload()">Tilføj workout</a>
<div id="container" style="border:solid #000000 2px; height:auto; width:800px; margin:0 auto; padding: 20px 50px 20px 50px;">
<form method="post" name="form">
<input name="field" type="text" style="width:800px;"/>
</form>
<a href="java script:void(0);" onclick="toggle('advSearch'); window.location.reload();">Avanceret søgning</a>
<div id="advSearch" style="display:none;">
<p>Avanceret søgning: ON</p>
</div>
</div>
</body>
Avatar billede nicolailissau Nybegynder
25. november 2009 - 10:52 #7
Hej igen.

Tak det har jeg faktisk også prøvet. Men problemet var at jeg ikke kunne placere "Tilføj workout" "log ind" og andre ting oppe i højre hjørne.

Men efter du postede nu, tænkte jeg over at jeg bare kan placere "tilføj workout" absolute, så det kan godt virke.

Tak for svar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester