Avatar billede albjerre Nybegynder
17. august 2004 - 18:25 Der er 42 kommentarer og
1 løsning

Script til centrering af div + script til ens højde på 4 div

Jeg har brug for 2 forskellige scripts. Det skal siges, at jeg næsten intet kender til javascript.

Koden til siden kan ses her:

http://allanbjerre.dk/v2/index.php
http://allanbjerre.dk/v2/v2.css

1. Script:

Det første script skal kunne sætte positionen på min boks med navnet #main, så main kommer til at stå midt i browservinduet. Jeg har lavet funktionen til bestemmelsen af placeringen:

browserwidth  = window.innerWidth;

pos = ((browserwidth - 750) / 2)

document.write ('left: ' + pos + 'px')

Men jeg ved ikke, hvordan jeg får det sat ind i mit html, og hvordan jeg får lavet resten af scriptet, så boksens position bliver defineret ved "onload" og "onresize".

2. script:

Det andet script behøver måske ikke engang være et script. Men jeg  ved ikke, hvordan jeg skal lave det, så de 3 bokse, #main, #left_side og #right_side er lige så lange som boksen #content. Hvis #content så er mindre end browservinduet, skal de 3 andre bokse fylde 100% i browservinduet. Hvis problemet kan løses uden javascript, er det bare godt.

75 point per script. ;)
Avatar billede mik789 Nybegynder
17. august 2004 - 21:44 #1
1.
function setLeft(){
var pos = ((document.body.clientWidth - 750) / 2);
document.getElementById('main').style.left = pos + 'px';
}
window.onload=setLeft;

function resizeWin(){
window.location.reload();
}
window.onresize=resizeWin;
Avatar billede mik789 Nybegynder
17. august 2004 - 22:09 #2
2.
Du skal i alle fald starte med at styre og sætte højde på de ydre elementer:

html, body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}

Og derefter kan du prøve at bevare position:absolute på #main. Men hvis jeg har forstået dig rigtigt vil du have at det er indholdet af #content der skal bestemme højden af de bokse der omgiver denne, således at de udvider sig med #content.

Hvilke styles har du på #content_wires og #content_menu ?
Avatar billede roenving Novice
17. august 2004 - 22:36 #3
<script type="text/javascript">
//id'er på de elementer, som skal være lige høje, antallet er ligegyldigt;
var elms = ['left','middle','right'];

function synchronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
</script>
Avatar billede roenving Novice
17. august 2004 - 23:15 #4
-- og det er nemt nok at positionere centreret, det behøver du ikke javascipt til:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<style type="text/css">
#main{width:750px;margin:0px auto;}
</style>
</head>
<body>
  <div id='main' style="text-align:center;background:gold;">
    Dette er centreret
  </div>
</body>
Avatar billede morteeart Nybegynder
17. august 2004 - 23:27 #5
roenving, mangler der ikke et kald på din funktion ?
Avatar billede mik789 Nybegynder
17. august 2004 - 23:28 #6
eller (hvis det er #main du vil have centeret og kun dets indhold):

<style type="text/css">
html{height:100%;}
body{height:100%;margin:0;padding:0;text-align:center;background-color:#B2B2B2;}
#main{width:750px;margin:0px auto;background-color:#3B3B3B;}
</style>
Avatar billede mik789 Nybegynder
17. august 2004 - 23:28 #7
hov: "og ikke kun dets indhold"
Avatar billede roenving Novice
17. august 2004 - 23:33 #8
>>morteeart 17/08-2004 23:27:38

Jo, selvfølgelig skal funktionen kaldes, f.eks. med:

window.onload = synchronizeDivs;

>>mik789 17/08-2004 23:28:12

Den centrerer da også div'en ?-)
Avatar billede roenving Novice
17. august 2004 - 23:34 #9
Hov ...

23:15:48 centrerer da også ...
Avatar billede albjerre Nybegynder
17. august 2004 - 23:34 #10
Til mik789:

Jeg har fået dit 1. script til at virke. Jeg har endda forkortet det lidt. Men det er lidt langsomt.

<script type="text/javascript">

function setLeft(){
var pos = ((document.body.clientWidth - 750) / 2);
document.getElementById('main').style.left = pos + 'px';
}
window.onload=onresize=setLeft;

</script>

Men jeg kan ikke få det til at virke uden javascript.
Avatar billede roenving Novice
17. august 2004 - 23:37 #11
Dumt at benytte javascript til at centrere, når det er overflødigt ...
Avatar billede albjerre Nybegynder
17. august 2004 - 23:38 #12
I know. Men jeg kan ikke få det til at virke med min kode.
Avatar billede roenving Novice
17. august 2004 - 23:42 #13
Har du prøvet ?-)

-- det hører med i historien, at det kun virker i IE, hvis du sætter den i standards-mode ved at have en fuldt kvalificeret doctype inkl. dtd-link !-)

-- alle de andre browsere kan godt finde ud af css uden at være tvunget med tommelskruer !o]
Avatar billede albjerre Nybegynder
17. august 2004 - 23:44 #14
jeg har doctype med:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
Avatar billede roenving Novice
17. august 2004 - 23:48 #15
Så centrerer dette:

<html>
<head>
<title>Tomt dokument</title>
<style type="text/css">
#main{width:750px;margin:0px auto;}
</style>
</head>
<body>
  <div id='main' style="text-align:center;background:gold;">
    Dette er centreret
  </div>
</body>

Prøv lige en gang, og sæt det derefter ind !-)
Avatar billede roenving Novice
17. august 2004 - 23:48 #16
-- og text-align:center; gør præcis det som det siger: centrerer teksten i div'en ...
Avatar billede mik789 Nybegynder
17. august 2004 - 23:54 #17
gonat folkens ;-)
Avatar billede albjerre Nybegynder
17. august 2004 - 23:55 #18
Til Roenving:

Nu har jeg sat din kode ind. Men main bliver stadig ikke centreret.
Avatar billede roenving Novice
17. august 2004 - 23:58 #19
Hvorfor har du position:absolute; på main ?-)

-- og en indlysende fejl her:

<div id='main' style='style="text-align:center;'>

-- som selvfølgelig skal være:

<div id='main'>
Avatar billede albjerre Nybegynder
18. august 2004 - 00:04 #20
Ja, nu er main centreret. Men resten følger ikke med..
Avatar billede albjerre Nybegynder
18. august 2004 - 00:05 #21
Hov... Det skrev jeg vist for hurtigt ;) Jeg fandt fejlen.
Avatar billede albjerre Nybegynder
18. august 2004 - 00:08 #22
Til Roenving:

Du kan få 75 point nu. Men jeg mangler stadig en ordentlig løsning på det andet problem. Som du kan se, er alle tre divs lige lange... Men content skal jo være kortere end de andre.
Avatar billede roenving Novice
18. august 2004 - 00:20 #23
Du har jo så blandet nogle med forskellige grundegenskaber, men sådan kan det løses:

<script type="text/javascript">
//id'er på de elementer, som skal være lige høje, antallet er ligegyldigt;
var elms = ['left_side','right_side','main','content'];

function synchronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=((i!=3)?180:0)+maxH + 'px';
  }
}

window.onload=synchronizeDivs;

</script>
Avatar billede albjerre Nybegynder
18. august 2004 - 00:25 #24
Nice. Ja, så er der kun 1 problem tilbage. Hvis indholdet i content er mindre en vinduet, så sker det, som du kan se nu...
Avatar billede roenving Novice
18. august 2004 - 00:27 #25
Det sætter du i denne linje:

  var maxH = 0;

-- sæt tallet til det mindste, som passer til dine sidebars !o]

(du skal sikkert exksperimentere en smule, men nok ikke så meget !-)
Avatar billede albjerre Nybegynder
18. august 2004 - 00:31 #26
Jamen, det hjælper jo ikke noget at lave statiske sidebars. Hvis en bruger ikke lige har den opløsning, jeg designer længden af mine sidebars efter, så vil mine sidebars slutte midt på hans side!

Mine sidebars skal også tilpasse sig efter browserstørrelsen.
Avatar billede roenving Novice
18. august 2004 - 00:36 #27
Jaeh, joeh, hvordan havde du tænkt dig, at det skulle tilpasses en 203*164 skærm ...
Avatar billede albjerre Nybegynder
18. august 2004 - 00:38 #28
Det skal kunne fungere på alle skærmstørrelser.
Avatar billede albjerre Nybegynder
18. august 2004 - 00:59 #29
Nå. Jeg smutter i seng nu. Det ville være skønt, hvis du kunne finde en løsning på problemet... og endnu bedre, hvis løsningen var uden brug af javascript!
Avatar billede albjerre Nybegynder
20. august 2004 - 00:20 #30
Til Roenving

Kan du ikke lave en funktion der hedder noget lignende det her:

var maxH = minheight

function minheight(){
var browserheight = document.body.clientheight;
var menuheight = 512

if browserheight > menuheight {
  minheight = browserheight
}
else {
  minheight = menuheight
}
}

Det er nok højst sandsynligt ikke rigtigt javascript. Men du kan vel godt forstå hvad jeg mener med det. Jeg sætter varH til at være højden på browservinduet. Hvis så browservinduet er for lille til at kunne vise hele "menuskærmen", så sætter jeg varH til en minimumshøjde, jeg selv bestemmer.

Du får point, hvis du kan sætte den funktion her ind i den anden, så det fungerer.
Avatar billede roenving Novice
20. august 2004 - 01:19 #31
Det kan såvidt jeg kan gennemskue skrives i een linje:

var maxH = Math.max(document.body.clientheight,512);
Avatar billede albjerre Nybegynder
20. august 2004 - 11:55 #32
Når jeg sætter det ind, som jeg har gjort her virker det ikke. Skal det sættes ind et andet sted?

<script type="text/javascript">
//id'er på de elementer, som skal være lige høje, antallet er ligegyldigt;
var elms = ['left_side','right_side','main','content'];

function synchronizeDivs(){
  var maxH = Math.max(document.body.clientheight,512);
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=((i!=3)?180:0)+maxH + 'px';
  }
}

window.onload=synchronizeDivs;

</script>
Avatar billede roenving Novice
20. august 2004 - 12:10 #33
Uff ...

Der skal være et stort H:

  var maxH = Math.max(document.body.clientHeight,512);

-- men clientHeight er såvidt jeg ved en IE-only ting, så måske, du også skal have Netscape/Mozilla-tingen window.innerHeight med:

  var maxH = Math.max(((window.innerHeight)?window.innerHeight:document.body.clientHeight),512);
Avatar billede mik789 Nybegynder
20. august 2004 - 12:34 #34
vedr. clientHeight osv., kan du måske bruge http://eksperten.dk/spm/529774 og denne demo: http://dev.e-tidsskrift.dk/vinduesdimensioner.html
//mik
Avatar billede albjerre Nybegynder
20. august 2004 - 12:51 #35
Det virker helt fint med clientHeight i Firefox. Så det holder jeg mig bare til. Giv et svar, og du får alle 150 point. Det her har været til stor hjælp for mig.
Avatar billede roenving Novice
20. august 2004 - 12:58 #36
-- nu har mik789 vel også ydet en betydelig indsats rundt omkring forløbet, så han kan vel også få gavn af dine point ?-)

Velbekomme '-)
Avatar billede albjerre Nybegynder
20. august 2004 - 14:46 #37
Ja, jeg havde glemt at teste noget. Scriptet virker faktisk ikke helt, som det skal. da jeg lavede en ordentlig test, viste det sig, at "document.body.clientHeight" ikke virkede i begge browsere. Så jeg satte det andet ind i stedet for.

Nu virker det fint i mozilla - bortset fra at siden bliver længere og længere, hver gang jeg resizer! (Jeg har sat onresize ind).

Men i IE kan den slet ikke loade siden færdig.

Her er mit script:

<script type="text/javascript">
//id'er på de elementer, som skal være lige høje, antallet er ligegyldigt;
var elms = ['left_side','right_side','main','content'];

function synchronizeDivs(){
  var maxH = Math.max((((window.innerHeight)?window.innerHeight:document.body.clientHeight)-180),333);
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
document.getElementById(elms[i]).style.height=((i!=3)?180:0) + maxH + 'px';
  }
}

window.onload=onresize=synchronizeDivs;

</script>
Avatar billede mik789 Nybegynder
20. august 2004 - 15:00 #38
roenving> tag du bare pointene - det er dig der har slidt med de praktiske løsninge (og det ser jo ikke ud til at du er færdig endnu ;-)
Avatar billede albjerre Nybegynder
21. august 2004 - 02:45 #39
Nu har jeg lavet om på koden, så det virker perfekt i Mozilla. (http://allanbjerre.dk/v2/index.php)

Men med det nye kode, jeg har sat ind, looper siden konstant i IE. Jeg kan se, at mik789 har det samme problem (http://eksperten.dk/spm/523643).

Kan problemet slet ikke løses?
Avatar billede mik789 Nybegynder
21. august 2004 - 07:47 #40
window.onload=onresize=synchonizeDivs;

har du prøvet window.onload=window.onresize=synchonizeDivs; eller helt at skille de to funktioner ad:

function resizeWin(){ window.location.reload(); }
window.onresize=resizeWin;
window.onload=synchronizeDivs;

i det sp. du henviser til var problemet at funktionen skulle skrives med window i stedet for med self.
Avatar billede albjerre Nybegynder
21. august 2004 - 14:03 #41
Ja, jeg har prøvet at lave begge dele. Den sidste løsning bruger jeg nu. Det er den, der får siden til at loope i IE.
Avatar billede albjerre Nybegynder
18. november 2004 - 00:27 #42
Da jeg ikke har fået et brugbart svar, lukker jeg ned for spørgsmålet.
Avatar billede roenving Novice
19. december 2004 - 17:55 #43
Hrm ?-)
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