Div Slider
b-phase
- javascript
Hallo zusammen
ich habe da ein kleines Verständnisproblem, vielleicht (wahrscheinlich) kann mir jemand helfen. Eine Funktion klappt, die andere nicht, hier erst mal die funktionierende:
-----------------------------------------------------------------------------
function init(){
if(document.getElementById){
obj = document.getElementById("gallery");
obj.style.top = "0";
}
}
function slideDown(){
if(document.getElementById){
if(parseInt(obj.style.top) < 200){
obj.style.top = parseInt(obj.style.top) + 2 + "px";
setTimeout("slideDown()",10);
}
}
}
<body onload="init()">
<a href="javascript:slideDown()">Galerie</a></div>
----------------------------------------------------------------------------
nun, die die nicht funktioniert:
function moveDown(target, pos){
obj = document.getElementById("gallery");
obj.style.top = pos;
if(document.getElementById){
if(parseInt(obj.style.top) < 200){
obj.style.top = parseInt(obj.style.top) + 2 + "px";
setTimeout("slideDown()",10);
}
}
}
<a href="javascript:slideDown('gallery', '0')">Galerie</a></div>
----------------------------------------------------------------------------
Ich verliere sofort nach dem ersten Timerdurchlauf den ID-Tag, warum? Auch wenn ich diesen noch mal mit dem Timeout übergebe "setTimeout("slideDown('target', 'pos')",10)" wird das obj nicht mehr erkannt. Die erste Funktion definiert möglicherweise das obj als globale Variable oder? Ich möchte die Funktion eben auf verschiedene divs anwenden, wie schaffe ich das?
danke schon mal für eure Antwort
sorry, der zweite Funktionsaufruf muss natürlich so erfolgen:
<a href="javascript:moveDown('gallery', '0')">Galerie</a></div>
sorry, der zweite Funktionsaufruf muss natürlich so erfolgen:
<a href="javascript:moveDown('gallery', '0')">Galerie</a></div>
hab's hinbekommen, habe es noch mal geschrieben, scheinbar war im ersten Script ein Fehler.
ok, jetzt blamier ich mich gleich völlig, im neuen Script war ein Fehler, es funktioniert doch nicht, hier noch mal alle beide Funktionen, slideDown funktioniert, moveDown nicht. moveDown verliert wie gesagt nach dem ersten Timerdurchlauf das obj.
function init(){
if(document.getElementById){
obj = document.getElementById("gallery");
obj.style.top = "0";
}
}
function slideDown(){
if(document.getElementById){
if(parseInt(obj.style.top) < 200){
obj.style.top = parseInt(obj.style.top) + 2 + "px";
setTimeout("slideDown()",10);
}
}
}
function moveDown(target, pos){
obj = document.getElementById(target);
obj.style.top = pos;
if(document.getElementById){
if(parseInt(obj.style.top) < 200){
obj.style.top = parseInt(obj.style.top) + 2 + "px";
setTimeout("moveDown()",10);
}
}
}
<body onload="init()">
<a href="javascript:moveDown('gallery', '0')">Galerie</a><br />
<a href="javascript:slideDown()">Galerie</a></div>
Mahlzeit b-phase,
moveDown verliert wie gesagt nach dem ersten Timerdurchlauf das obj.
Nein.
function moveDown(target, pos){
obj = document.getElementById(target);
obj.style.top = pos;
if(document.getElementById){
if(parseInt(obj.style.top) < 200){
obj.style.top = parseInt(obj.style.top) + 2 + "px";
setTimeout("moveDown()",10);
}
}
}<a href="javascript:moveDown('gallery', '0')">Galerie</a><br />
Beim Klick auf den "Link" wird die Funktion modeDown() mit zwei Parametern aufgerufen. Laut Code wird der erste Parameter dazu benutzt, in einer globalen(!!!) Variable ein Elementobjekt abzulegen.
Weiter unten wird dann ein Timeout gesetzt, der die Funktion moveDown() nach 10 Millisekunden *OHNE*(!!!) Parameter aufruft.
Was passiert dann wohl? Richtig - der erste Parameter ist leer/undefined und die Suche nach einem entsprechenden Element wird wohl auch ein leeres bzw. undefiniertes Objekt zurückliefern ... und dies in der (immer noch) globalen(!!!) Variablen namens "obj" ablegen.
Das alles hätte Dir auch die Fehlerkonsole eines vernünftigen Browsers sagen können ...
MfG,
EKKi
Beim Klick auf den "Link" wird die Funktion modeDown() mit zwei Parametern aufgerufen. Laut Code wird der erste Parameter dazu benutzt, in einer globalen(!!!) Variable ein Elementobjekt abzulegen.
Hallo Ekki
soweit war ich im Grunde ja auch schon. Wie gesagt ich habe auch versucht das Objekt und die Position noch mal mit dem Timer durchzuschleifen, was aber nicht funktioniert.
setTimeout("moveDown('gallery', 'pos')",10);
Meine Frage ist eben nun, wie schaffe ich es, die Funktion zum Laufen zu bekommen, ohne zuvor eine globale Variable definieren zu müssen. Ich möchte wie gesagt, mehrere layer dynamisch verschieben.
Mahlzeit b-phase,
soweit war ich im Grunde ja auch schon. Wie gesagt ich habe auch versucht das Objekt und die Position noch mal mit dem Timer durchzuschleifen, was aber nicht funktioniert.
... was aber nicht daran lag, dass es generell nicht funktioniert, sondern - mal wieder - daran, dass Du das "<http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=Beachten Sie:>" nicht beachtet hast.
setTimeout("moveDown('gallery', 'pos')",10);
Der erste Parameter ist ein String und sollte JS-Code enthalten, der *exakt so* ausgeführt wird. Dieser String kann natürlich auch aus fixen und variablen Bestandteilen zusammengedengelt werden - dann sollte das aber auch korrekt passieren ... im konkreten Fall kann die Funktion moveDown() mit einem String, der "pos" enthält, als zweitem Parameter vermutlich herzlich wenig anfangen. Ich schätze, Du meinst da eher
setTimeout("moveDown('" + target + "', " + pos + ")",10);
MfG,
EKKi
setTimeout("moveDown('" + target + "', " + pos + ")",10);
ja super, dann lags also nur an der Schreibweise - wieder was gelernt.
Über diese Schreibweise bin ich vor kurzem mal getappt, wobei ich damit nichts anzufangen wusste, danke dir!
Allerdings hatte das Ganze noch einen kleinen Logikfehler, ich darf pos nicht vordefinieren, sondern muss es innerhalb der Funktion natürlich immer neu abrufen, bis der Wert schließlich 200 ergibt damit der Timer abbricht, also so:
function moveDown(target){
obj = document.getElementById(target);
pos = obj.style.top;
if(document.getElementById){
if(parseInt(obj.style.top) < 200){
obj.style.top = parseInt(obj.style.top) + 2 + "px";
setTimeout("moveDown('" + target + "')",10);
}
}
}
<a href="javascript:moveDown('gallery')">sonstige</a><br />
Jedenfalls hast du mir sehr weitergeholfen :-)
Hi,
setTimeout("moveDown('gallery', 'pos')",10);
Der erste Parameter ist ein String und sollte JS-Code enthalten
Nein.
Besser wäre es, wenn er statt eines Textliterals gleich eine Funktionsreferenz wäre.
MfG ChrisB
Mahlzeit ChrisB,
setTimeout("moveDown('gallery', 'pos')",10);
Der erste Parameter ist ein String und sollte JS-Code enthalten
Nein.
"Nein" ist in diesem Fall falsch.
Besser wäre es, wenn er statt eines Textliterals gleich eine Funktionsreferenz wäre.
Er kann beides enthalten. Gerade für noch nicht so bewanderte Entwickler sind Funktionsreferenzen an dieser Stelle auch nicht einfach zu verstehen - daher habe ich mich bei meinem Erklärungsversuch an <http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=die entsprechende Stelle in SELFHTML> gehalten, um damit b-phase das Nachschlagen und Verstehen zu erleichtern.
MfG,
EKKi
Hi,
setTimeout("moveDown('gallery', 'pos')",10);
Der erste Parameter ist ein String und sollte JS-Code enthalten
Nein.
"Nein" ist in diesem Fall falsch.
Nein.
Wenn du kann geschrieben hättest, wäre ich einverstanden. Aber mit einem „sollte“ aus besagtem Grund nicht.
MfG ChrisB