nicht angemeldet
Hallo!
Das mit dem Öffnen klappt jetzt. Vielen Dank dafür! Aber jetzt habe ich noch ein Problem. Und zwar habe ich mehrere Boxen. Wenn die erste geöffnet wird, dann öffnet sich diese genau richtig.
Aber wenn ich dann auf die nächste Box klicke, dann läuft etwas falsch. Ich glaube, dass ein großteil des Quelltextes einfach ignoriert wird. Mir ist aber leider ein Rätsel, wieso. Die erste Box, die sich schließen sollte, tut genau das nicht. Und die zweite Box (die Box die sich öffnen sollte) öffnet sich aber beginnt viel zu weit unten und hört nicht mehr auf sich zu öffnen :-( Was habe ich falsch gemacht? Ich habe die ganze Zeit probiert und es nicht hinbekommen.
Hier ist nochmal der komplette Quelltext:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.topic{
width: 500px;
background-color: #E89300;
text-align: center;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1em;
font-family: sans-serif;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
padding: 0.2em 0 0.2em 0;
}
div.text{
width: 498px;
margin-left: auto;
margin-right: auto;
border-left-color: #E89300;
border-left-style: dashed;
border-left-width: 1px;
border-right-color: #E89300;
border-right-style: dashed;
border-right-width: 1px;
font-size: 0.8em;
height: 0px;
overflow: hidden;
}
</style>
<script type="text/javascript">
var i = 0;
var a = 0;
var lastOpenedBox = null;
function openBox(box, height, me){
if(lastOpenedBox != null){
machZu = alert("closeBox('" + lastOpenedBox + "', '" + box + "', '" + height + "', '" + me + "')", 20);
lastOpenedBox = box;
}
aktiv = window.setInterval("slide('" + box + "', '" + height + "', '" + me + "')", 20);
}
function closeBox(lastOpenedBox){
var a = height;
document.getElementById(box).style.height = i + me;
document.getElementById(box).style.display = "block";
a = a - 2;
if( a == 0) {
window.clearInterval(machZu);
}
}
function slide(box, height, me){
document.getElementById(box).style.height = i + me;
document.getElementById(box).style.display = "block";
i = i + 2;
if( i == height ){
window.clearInterval(aktiv);
}
}
</script>
</head>
<body>
<div class="topic"><a href="#" onclick="openBox('text1', '130', 'px');return false">1.</a></div>
<div id="text1" class="text" style="display:none">
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
</div>
<div class="topic"><a href="#" onclick="openBox('text2', '100', 'px');return false">2.</a></div>
<div id="text2" class="text" style="display:none">
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
</div>
<div class="topic"><a href="#" onclick="openBox('text3', '250', 'px');return false">3.</a></div>
<div id="text3" class="text" style="display:none">
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
</div>
<div class="topic"><a href="#" onclick="openBox('text4', '160', 'px');return false">4.</a></div>
<div id="text4" class="text" style="display:none">
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
</div>
<div class="topic"><a href="#" onclick="openBox('text5', '160', 'px');return false">5.</a></div>
<div id="text5" class="text" style="display:none">
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
</div>
</body>
</html>
Vielen Dank für die Hilfe! Grüße, Fabian
JürgenB