Avatar billede dadane Novice
24. februar 2005 - 14:02 Der er 5 kommentarer og
1 løsning

Folde ud kasser

Jeg har lavet nedenstående:

--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="da">
<head>
<title>Pakke ind og ud test</title>

<script type="text/javascript">
var show = new Array();
show[1] = false;
show[2] = false;
show[3] = false;

t=new Array(0,"Dette er så teksten for den<br/>første<br/>foldeud boks","Bemærk at man godt kan have <b>html koder</b> med","og så videre");

    function change(nr) {
        var x="d" + nr + "b";
        show[nr]=!show[nr];
        if (show[nr]) {
            document.getElementById(x).innerHTML=t[nr];
        } else {
            document.getElementById(x).innerHTML="";
        }
    }
</script>

</head>
<body>
<div onClick="java script:change(1);" id="d1a"><img src="ikon.gif">Test<br>
<div id="d1b"></div>
</div>
<div onClick="java script:change(2);" id="d2a"><img src="ikon.gif">Test2<br>
<div id="d2b"></div>
</div>
<div onClick="java script:change(3);" id="d3a"><img src="ikon.gif">Test3<br>
<div id="d3b"></div>
</div>
</body>

--

Men er ikke helt tilfreds.

For det første vil jeg gerne have en glat udfoldning. Det kan jeg hvis jeg i stedet restringere højden at min div-boks. Men hvordan kan jeg vide hvad dens fulde højde er???

For det andet så kan jeg ikke få den foldet helt sammen, - hvorfor ikke?

Så kom med forslag til forbedringer, - helst en div-boks med style="height:0 px; overflow:hidden;" ting hvor jeg i javascript kan ændre height til det rigtige.
Avatar billede roenving Novice
25. februar 2005 - 13:05 #1
Vis og skjul dem i stedet !-)

F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="da">
<head>
<title>Pakke ind og ud test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var show = new Array();
show[1] = false;
show[2] = false;
show[3] = false;

    function change(nr) {
        show[nr]=!show[nr];
        document.getElementById("d" + nr + "b").style.display = (show[nr])?'block':'none';
    }
</script>

</head>
<body>
<div onClick="change(1);" id="d1a"><img src="ikon.gif">Test<br>
<div id="d1b" style="display:none;">Dette er så teksten for den<br/>første<br/>foldeud boks</div>
</div>
<div onClick="change(2);" id="d2a"><img src="ikon.gif">Test2<br>
<div id="d2b" style="display:none;">Bemærk at man godt kan have <b>html koder</b> med</div>
</div>
<div onClick="change(3);" id="d3a"><img src="ikon.gif">Test3<br>
<div id="d3b" style="display:none;">og så videre</div>
</div>
</body>
</html>

-- bemærk også, at jeg satte et dtd-link på doctype (så vil selv IE tage udgangspunkt i standarderne, hvilket den ellers ikke vil !-)

-- jeg fjernede også den ulovlige pseudo-fil-protokol java script: for det første er det ulovlig script-kode (men ingen browsere kløjs i det !-), for det andet er det selvfølgelig noget vrøvl at fortælle javascript-fortolkeren, at den skal fortolke den kode, som findes i en javascript-event som javascript !o]
Avatar billede dadane Novice
25. februar 2005 - 14:51 #2
roenving, - tak!

Men øh, - det hjalp jo ikke så meget på det egentligt problem.

Er det ikke muligt at få info om hvor stort et højt et divfelt er? Så man efterfølgende kan croppe i højden???
Avatar billede roenving Novice
25. februar 2005 - 15:06 #3
Jo, du kan aflæse offsetHeight !-)

-- og den manglende fulde sammenfoldning skyldes, at en div, som har noget i sig, altid mindst vil have en højde, som svarer til et linjeskift, så det er faktisk bedst at bruge vis og skjul !o]

-- måske er det sådan en expand/contract-ting, du søger:

http://www.eksperten.dk/spm/485556#rid4489881, som er sidste indlæg ...
Avatar billede dadane Novice
25. februar 2005 - 16:40 #4
Jo, det er noget i den stil jeg ønsker at lave. Kast et svar
Avatar billede roenving Novice
25. februar 2005 - 16:41 #5
Velbekomme '-)
Avatar billede roenving Novice
26. februar 2005 - 04:41 #6
Tak for point ;~}
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