nicht angemeldet
Problem mit Verändern der Höhe eines <div>s
JürgenBHallo 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
-
Hallo Fabian,
Deine Fehlerbeschreibung
Ich habe hier ein ziemliches Problem. ...
ist recht knapp. Daher weiß ich nicht, ob ich alles finde:
function slide(box, height, me){
var i = 0;diese lokale Variable wird bei jedem Aufruf auf "0" gesetzt. Verwende für "i" eine globale Variable;
var box_height = window.setInterval("slide()", 80);
warum startest du das Interval jedesmal. Hier wäre setTimeout besser;
document.getElementById(box).style.height = i + me;
document.getElementById(box).style.display = "block";
i++;
if( i == height ){diese Abfrage ist riskant, da "me" ja kein Teiler von "height" sein muss. Prüfe lieber auf ">" und begrenze i dann auf "height"
clearInterval(box_height);
}
}[/code]
[code lang=html]</script>
</head>Gruß, Jürgen
-
Hallo!
Deine Fehlerbeschreibung ist recht knapp.
Entschuldigung. Ich versuche mich zu bessern.
function slide(box, height, me){
var i = 0;
diese lokale Variable wird bei jedem Aufruf auf "0" gesetzt. Verwende für "i" eine globale Variable;Ist gemacht.
var box_height = window.setInterval("slide()", 80);
warum startest du das Interval jedesmal. Hier wäre setTimeout besser;
Ok. Ich habe es jetzt so versucht:
var i = 0; var lastOpenedBox = null; function openBox(box, height, me){ if(lastOpenedBox != null){ closeBox(lastOpenedBox); } aktiv = window.setTimeout("slide(box, height, me)", 50); } function closeBox(lastOpenedBox){ document.getElementById(lastOpenedBox).style.display = "none"; } function slide(box, height, me){ document.getElementById(box).style.height = i + me; document.getElementById(box).style.display = "block"; i++; if( i == height ){ window.clearTimeout(aktiv); } }Aber die Firefox-Konsole beanstandet, dass box in der 8.ten Zeile meines Beispiels nicht definiert ist.
document.getElementById(box).style.height = i + me;
document.getElementById(box).style.display = "block";
i++;
if( i == height ){diese Abfrage ist riskant, da "me" ja kein Teiler von "height" sein muss. Prüfe lieber auf ">" und begrenze i dann auf "height"
Das verstehe ich nicht!? Was meinst du mit Teiler? "me" soll die MassEinheit sein.
Vielen Dank für deine Hilfe!
Liebe Grüße, Fabian-
hi,
Aber die Firefox-Konsole beanstandet, dass box in der 8.ten Zeile meines Beispiels nicht definiert ist.
document.getElementById(box).style.height = i + me;
Und, hast du irgendwo vorher eine Javascript-Variable namens box definiert?
Oder meinst du vielleicht das Textliteral "box"?gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo
Aber die Firefox-Konsole beanstandet, dass box in der 8.ten Zeile meines Beispiels nicht definiert ist.
document.getElementById(box).style.height = i + me;
Und, hast du irgendwo vorher eine Javascript-Variable namens box definiert?
Nein.
Oder meinst du vielleicht das Textliteral "box"?
Nein. Ich möchte ein Parameter übergeben. Ich habe hier diesen Link. Per onClick übergebe ich Parameter.
<a href="#" onclick="openBox('text1', '140', 'px');return false">Linktext</a>
Und jetzt habe ich mein JS so verändert:
var i = 0; var lastOpenedBox = null; function openBox(box, height, me){ if(lastOpenedBox != null){ closeBox(lastOpenedBox); } aktiv = window.setTimeout("slide(" + box + ", " + height + ", " + me + ")", 50); } function closeBox(lastOpenedBox){ document.getElementById(lastOpenedBox).style.display = "none"; } function slide(box, height, me){ document.getElementById(box).style.height = i + me; document.getElementById(box).style.display = "block"; i++; if( i == height ){ window.clearTimeout(aktiv); } }Könnt ihr mir bitte sagen, wie ich es machen muss? Ich bin noch nicht ganz so gut und tappe absolut im Dunkeln.
Vielen Dank für eure Antworten! Grüße, Fabian-
Nachtrag:
Ich habe vergessen, zu sagen dass die Firefox-Konsole folgendes sagt:px is not defined [und zwar in dieser Zeile: aktiv = window.setTimeout("slide(" + box + ", " + height + ", " + me + ")", 50);]
Element refernziert durch ID/NAME im globalen Geltungsbereich. Verwenden Sie stattdessen W3C-Standard document.getElementById().
Warum diese beide Fehlermeldungen kommen ist mir nicht ganz klar...
Danke schön! Fabian-
hi,
px is not defined [und zwar in dieser Zeile: aktiv = window.setTimeout("slide(" + box + ", " + height + ", " + me + ")", 50);]
Was kommt denn bei dieser Stringverkettung heraus?
Wenn me den Wert "px" hat:
slide(WertVonBox, WertVonHeight, px)
Wenn du die Zeichenkette "px" übergeben willst, musst du sie dort noch mal als Zeichenkette übergeben:
setTimeout("slide(" + box + ", " + height + ", '" + me + "')", 50);
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo!
Wenn du die Zeichenkette "px" übergeben willst, musst du sie dort noch mal als Zeichenkette übergeben:
Oh, danke schön. Das habe ich irgendwie übersehen. Danke!
Aber auch jetzt geht es nicht. Was ist denn noch falsch? Firefox meldet, dass in Zeile 50 box nicht definiert sei. Woran liegt das? (Zeile 50 ist die erste Zeile der Funktion slide).
<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 i = 0; var lastOpenedBox = null; function openBox(box, height, me){ if(lastOpenedBox != null){ closeBox(lastOpenedBox); } aktiv = window.setTimeout("slide(" + box + ", " + height + ", '" + me + "')", 50); } function closeBox(lastOpenedBox){ document.getElementById(lastOpenedBox).style.display = "none"; } function slide(box, height, me){ document.getElementById(box).style.height = i + me; document.getElementById(box).style.display = "block"; i++; if( i == height ){ window.clearTimeout(aktiv); } } ~~~</script>~~~html </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>Vielen Dank für eure Hilfe! Grüße, Fabian
-
hi,
Aber auch jetzt geht es nicht. Was ist denn noch falsch? Firefox meldet, dass in Zeile 50 box nicht definiert sei. Woran liegt das?
aktiv = window.setTimeout("slide(" + box + ", " + height + ", '" + me + "')", 50);
Ersetze doch diese Zeile mal durch
alert("slide(" + box + ", " + height + ", '" + me + "')");- dann siehst du, was da versucht wird aufzurufen bzw. was da interpretiert werden soll.
Sieht das korrekt aus?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
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
-
Hallo Fabian,
beim 1.Aufruf von slide hat i den Wert 0. Per setInterval wird slide immer wieder aufgerufen, bis i den Wert height hat. Bei der nächsten Runde beginnst Du mit dem Wert i=height und erhöhst es dann immer im 2. Die Bedingung i==height wird daher nie mehr erreicht (bzw. erst nach dem 2^31-Modulo). Setze beim Starten des Slides i=0.
Da Du das Increment jetzt schon auf 2 gesetzt hast, solltest Du die Abfrage i==height noch einmal überdenken.
Gruß, Jürgen
-
Hallo!
Danke schön für deine Antwort!beim 1.Aufruf von slide hat i den Wert 0. Per setInterval wird slide immer wieder aufgerufen, bis i den Wert height hat. Bei der nächsten Runde beginnst Du mit dem Wert i=height und erhöhst es dann immer im 2. Die Bedingung i==height wird daher nie mehr erreicht (bzw. erst nach dem 2^31-Modulo). Setze beim Starten des Slides i=0.
Oh. Danke schön!
Da Du das Increment jetzt schon auf 2 gesetzt hast, solltest Du die Abfrage i==height noch einmal überdenken.
Das verstehe ich nicht. Warum sollte ich das nochmal überdenken? Denkst du, dass i >= height besser wäre?
Aber was kann ich machen, damit die letzte geöffnete Box sich wieder schließt? Kannst du mir dabei bitte helfen?
Vielen Dank! Grüße, Fabian-
Hallo Fabian,
Da Du das Increment jetzt schon auf 2 gesetzt hast, solltest Du die Abfrage i==height noch einmal überdenken.
Das verstehe ich nicht. Warum sollte ich das nochmal überdenken? Denkst du, dass i >= height besser wäre?ja. Du könntest sonst, wenn das Increment kein Teiler von height ist, am Zustand i==height "vorbeilaufen".
function openBox(box, height, me){
if(lastOpenedBox != null){
machZu = alert("closeBox('" + lastOpenedBox + "', '" + box + "', '" + height + "', '" + me + "')", 20);hier einfach closeBox(lastOpenedBox) aufrufen. Oder soll die Box langsam zugehen?
lastOpenedBox = box;
}
aktiv = window.setInterval("slide('" + box + "', '" + height + "', '" + me + "')", 20);
}
function closeBox(lastOpenedBox){--> function closeBox(box){
var a = height; // ???
document.getElementById(box).style.height = i + me; //???
document.getElementById(box).style.display = "block";"none"
a = a - 2; //???
if( a == 0) {//???
window.clearInterval(machZu); //???
}
}zum Schließen sollte ...display="none" reichen.
Gruß, Jürgen
-
Hallo!
hier einfach closeBox(lastOpenedBox) aufrufen. Oder soll die Box langsam zugehen?
Ja genau! Und da reicht display: none leider nicht. Wie muss ich das machen? Irgendwo muss doch der Fehler sein, oder? Oder mach ich einen Denkfehler?
Danke und Gruß, Fabian-
Hallo Fabian,
hier einfach closeBox(lastOpenedBox) aufrufen. Oder soll die Box langsam zugehen?
Ja genau! Und da reicht display: none leider nicht. Wie muss ich das machen? Irgendwo muss doch der Fehler sein, oder? Oder mach ich einen Denkfehler?nun, statt schrittweise (+2) die Höhe von 0 bis height zu ändern gehst Du umgekehrt vor, also in (-2)-Schritten von height bis 0 und am Ende dann display="none". Aber pass auf, dass Du nicht mit den globalen Variablen durcheinander kommst.
Gruß, Jürgen
-
Hallo!
Das habe ich schon gemacht. Aber es funktioniert nicht. Deswegen muss irgendwo ein Fehler sein.
Hier mein JavaScript:<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); i = 0; } } </script>Ich habe hier ein alert genommen und habe bewusst nicht die Funktion closeBox aufgerufen. Das war zum Überprüfen. Aber leider kommt gar kein alert. Also wird das alles ignoriert. Bloß warum ist mir ein Rätsel. Weißt du warum?
Vielen Dank! Liebe Grüße, Fabian-
Hallo Fabian,
var lastOpenedBox = null;
function openBox(box, height, me){
if(lastOpenedBox != null){
machZu = alert("closeBox('" + lastOpenedBox + "', '" + box + "', '" + height + "', '" + me + "')", 20);
lastOpenedBox = box;diese Zuweisung innerhalb des IF-Blocks wird nie ausgeführt. Sie muss außerhalb des IF-Blocks liegen.
}
Gruß, Jürgen
-
Vielen Dank für deine Antwort! Ich habe es so gemacht, wie du gesagt hast und es funktioniert insofern, dass das alert die richtigen Daten ausgibt. Vielen vielen Dank dafür.
Aber jetzt gibt es das Problem, dass zwar irgendwie die Daten richtig ankommen bei der Funktion closeBox, dann aber nicht richtig "weiterverarbeitet" werden. Ich wäre sehr dankbar für deine Hilfe! Wo liegt denn der Fehler? Ich habe schon unzählige male verschiedene Varianten ausprobiert, aber es funktioniert nicht.
Wo liegt hier der Fehler?<script type="text/javascript"> var i = 0; var a = 0; var z = 0; var lastOpenedBox = null; function openBox(box, height, me){ var z = height; if(lastOpenedBox != null){ machZu = setInterval("closeBox('" + lastOpenedBox + "', '" + box + "', '" + z + "', '" + me + "')", 20); } lastOpenedBox = box; aktiv = window.setInterval("slide('" + box + "', '" + height + "', '" + me + "')", 20); } function closeBox(lastOpenedBox, me, z){ document.getElementById(lastOpenedBox).style.height = z + me; document.getElementById(lastOpenedBox).style.display = "block"; z = z - 2; if( z <= 0) { window.clearInterval(machZu); document.getElementById(lastOpenedBox).style.display = "none"; } } 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); i = 0; } } </script>Die Variable z habe ich der Einfachkeit halber noch hinzugefügt. Die Firefoxkonsole gibt an, dass es einen Fehler beim Verarbeiten des Wertes für 'height' gab, und dass die Deklaration ignoriert wurde. Nur leider eben keine Zeilenangabe. Aber es ist "nur" eine Warnung und kein Fehler. Also vielleicht nicht so wichtig. Ich weiß es nicht.
Vielen Dank für deine Hilfe! Freundliche Grüße, Fabian-
Hallo Fabian,
machZu = setInterval("closeBox('" + lastOpenedBox + "', '" + box + "', '" + z + "', '" + me + "')", 20);
function closeBox(lastOpenedBox, me, z){
beim Aufruf hast Du einen Parameter (box) zu viel. Außerdem ist "z" überflüssig, da eine globale Variable. Beim Aufruf sollte z aber auf height gesetzt sein, sonst wird es sofort negativ. Daher vermutlich die Warnung.
Gruß, Jürgen
-
Hallo!
Wow! Danke schön! Jetzt klappt (fast) alles! Die jeweils richtigen Boxen "sliden" auf und zu. Nur habe ich ein allerletztes Problem. Und zwar möchte ich die Höhe der als letztes geöffneten Box speichern, damit sie auch um genau diese Höhe wieder zu gescrollt wird. Weil bis jetzt speichert das JavaScript den Wert der aktuell geöffneten Box.
Mein Versuch sah so aus: Ich will eine Globalvariable erstellen, und in dieser dann den Wert speichern und später auf diesen zugreifen. Also ähnlich wie bei lastOpenedBox.<script type="text/javascript"> var i = 0; var a = 0; var z = 0; var lastOpenedBoxHeight = 0; var lastOpenedBox = null; function openBox(box, height, me){ if(lastOpenedBox != null){ machZu = setInterval("closeBox('" + lastOpenedBox + "', '" + me + "')", 20); } lastOpenedBox = box; z = height; lastOpenedBoxHeight = height; aktiv = window.setInterval("slide('" + box + "', '" + height + "', '" + me + "')", 20); } function closeBox(lastOpenedBox, me){ document.getElementById(lastOpenedBox).style.height = lastOpenedBoxHeight + me; document.getElementById(lastOpenedBox).style.display = "block"; lastOpenedBoxHeight = lastOpenedBoxHeight - 3; if( lastOpenedBoxHeight <= 0) { window.clearInterval(machZu); document.getElementById(lastOpenedBox).style.display = "none"; } } 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); i = 0; } } </script>Ich habe es nach dem gleichen Schema gemacht wie bei lastOpenedBox, aber es klappt einfach nicht. Könntest du mir bitte bei diesem allerletzten Problem helfen? Auf jeden Fall nochmal ein riesiges Dankeschön an dich! Vielen vielen Dank!
Liebe Grüße, Fabian-
Hallo Fabian,
Du überschreibst lastOpenedBoxHeight mit der aktuellen Höhe (height) während das Schließinterval noch läuft.
> lastOpenedBox = box; > z = height; z = lastOpenedBoxHeight; > lastOpenedBoxHeight = height; > lastOpenedBoxHeight = lastOpenedBoxHeight - 3; z = z - 3 oder kurz z-=3 > if( lastOpenedBoxHeight <= 0) { z <=0100%ig sicher bin ich jetzt nicht. Ohne Test ist es schwierig. Aber versuch es mal.
Gruß, Jürgen
-
Hallo Jürgen!
Vielen Dank für deine Hilfe! Ich habe es jetzt richtig hinbekommen und es sieht toll aus :) Vielen vielen Dank für deine Hilfe und deine Geduld!
Danke schön! Liebe Grüße, Fabian
-
-
-
-
-
-
-
-
-
-
-
-
- dann siehst du, was da versucht wird aufzurufen bzw. was da interpretiert werden soll.
-
-
-
-
-
-
Hallo Fabian,
zum me: ich dachte, das sei ein Increment. Vergiss meinen Einwand.
Zu Deinem Problem: ich glaube, Du hasst noch nicht verstanden, was setTimeout und setInterval machen. setInterval ruft eine Funktion immer wieder in einem festen Zeitrhythmus auf, setTimeout ruft eine Funktion einmal nach einer bestimmten Zeit auf. Bei Deinem Problem solltest Du also entweder setInterval einmal aufrufen und mit clearInterval bei Bedarf beenden oder setTimeout in der Funktion neu starten, bis die Aufgabe erledigt ist.
Den Rest hat Dir wahsaga ja schon geschrieben.
Gruß, Jürgen
-
-