nicht angemeldet
Hallo alle zusammen!
Ich habe hier ein ziemliches Problem. Ich möchte erreichen, dass ein <div>-Container auf"slided". Und damit habe ich ziemliche Probleme.
Mein Lösungsansatz sieht bis jetzt so aus:
<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;
}
</style>
<script type="text/javascript">
var lastOpenedBox = null;
function openBox(box, height, me){
if(lastOpenedBox != null){
closeBox(lastOpenedBox);
}
slide(box, height, me);
}
function closeBox(lastOpenedBox){
document.getElementById(lastOpenedBox).style.display = "none";
}
function slide(box, height, me){
var i = 0;
var box_height = window.setInterval("slide()", 80);
document.getElementById(box).style.height = i + me;
document.getElementById(box).style.display = "block";
i++;
if( i == height ){
clearInterval(box_height);
}
}
</script>
</head>
<body>
<div class="topic"><a href="#" onclick="openBox('text1', '140', 'px');return false">Sinn dieser Seite</a></div>
<div id="text1" class="text" style="display:none;">
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text! Gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanz viel Text!
</div>
</body>
</html>
Dies ist mein warscheinlich stümperhafter Versuch dem Problem auf die Schliche zu kommen. Aber irgendwie klappt es nicht. Ich bin für jede Hilfe dankbar. Was mache ich falsch? Könnte ich anders an die ganze Sache herangehen?
MfG. Fabian
JürgenB