Problem med fane system
Hej,Først undskyld overskriften. Kender ikke så meget til javascript, så viste ikke hvordan jeg skulle beskrive det.
Nå, men jeg har fundet en kode, der gør man får nogle faner i toppen, og kan skifte mellem forskelligt indhold. Det fungere som sådan også ok, men der er én ting jeg savner i det:
At den kan udvide og formindske der, hvor indholdet bliver vist automatisk, for hver fane... Har ingen ide om det er muligt, men jeg kunne godt tænke mig jeg kunne resize hvert vindue, så hvis der er et sted jeg kun skal bruge lidt plads, så er der ikke en million linier neden under der er tomme, fordi næste fane står der meget mere på.
Håber i kan hjælpe!
Her er min kode:
<html>
<head>
<title>Faneblade</title>
<script language="javascript" type="text/javascript">
num = 3 //antal faneblade
function faa(obj)
{
if (document.getElementById){return(eval("document.getElementById('"+obj+"').style"));}
else if (document.all){return(eval("document.all."+obj+".style"));}
else {return(eval("document."+obj+".style"));}
}
function fav(o){
o.style.background = "#FFFFFF"
}
function ufav(o){
if (o.style.zIndex != 4){o.style.background = "#cccccc"}
}
function aktiver(o){
faa("l" + o).zIndex = 3
obj = faa("f" + o)
obj.zIndex = 4
obj.background = "#ffffff"
obj.borderBottom = "0px #FFFFFF solid"
obj.top = 19
for (i=1;i<=num;i++)
{
if (i != o){
obj = faa("f" + i)
obj.top=20
obj.zIndex = 1
obj.background = "#cccccc"
obj.borderBottom = "1px #000000 solid"
faa("l" + i).zIndex=2
}
}
}
</script>
<style type="text/css">
body {
background-color:#778899;
}
div.faneblad {
background-color:#cccccc;
position:absolute;
border:1px #000000 solid;
cursor:hand; cursor:pointer;
top:20px;
height:22px;
z-index:1;
}
div.lag {
background-color:#ffffff;
position:absolute;
border:1px #000000 solid;
top:40px;
left:20px;
height:50%;
width:55%;
z-index:2;
}
p.fane {
font-family:verdana;
font-size:12px;
color:#000000;
margin:2px 4px 2px 4px;
text-align:center;
}
</style>
</head>
<body onload="aktiver(1)">
<div class="faneblad" id="f1" style="width:50;left:30;" onmouseover="fav(this)" onmouseout="ufav(this)" onclick="aktiver(1)">
<p class="fane">1</p>
</div>
<div class="faneblad" id="f2" style="width:50;left:85;" onmouseover="fav(this)" onmouseout="ufav(this)" onclick="aktiver(2)">
<p class="fane">2</p>
</div>
<div class="faneblad" id="f3" style="width:70;left:140;" onmouseover="fav(this)" onmouseout="ufav(this)" onclick="aktiver(3)">
<p class="fane">3</p>
</div>
</div>
<div class="lag" id="l1">
1
</div>
<div class="lag" id="l2">
2
</div>
<div class="lag" id="l3">
3
</div>
</body>
</html>
