Slide-Funktion klappt nur 1x - bräuchte ein 2. Paar Augen
0 0 
Felix Riesterer
0
Slide-Funktion klappt nur 1x - bräuchte ein 2. Paar Augen
Judn Morgen Leude,
ick hab mal wieder ein problem mit nem Slide-Menu. Das Slide-Menu besteht aus 3 simplen Funktionen: Die Down- bzw Up-Funktionen
und einer If-Abfrage als 3. Funktion in der die beiden Slide-Funktionen je nach Situation zur Anwendung kommen sollen. Es funktioniert
zwar soweit, es slidet runter und wieder rauf wenn man den button drückt, aber halt nur 1-mal! Ist in dem Script doch noch iwo ein
Fehler oder fehlt evtl. noch was, damit das jederzeit funktioniert?
Da mein Wissen über Javascript irgendwo doch noch recht beschränkt ist, hoffe ich das ihr mir hoffentlich weiterhelfen könnt.
gruß KeYara
Hier, das Beispiel zum folgendem Quelltext: Slide-Beispiel
Vom halbwegs gleichen Aufbau her hab ich vor ein paar Monaten schonmal ein Slide-Menu gebastelt was auch eigtl funktioniert.
Wunsch-Slide-Menu
Allerdings enthält dieses sehr viele Fehler, worauf ich mich entschlossen habe nochmal neu anfzufangen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="KeYara" />
<meta name="editor" content="html-editor phase 5" />
<title>Slide - Test</title>
<script language="JavaScript" type="text/javascript">
// Variablen - deren Wert verändert werden kann bzw. darf
var PosA = 0; // Start-Position
var PosB = 120; // Ziel-Position
var speed = 5; // Speed-Wert gleich Anzahl an Pixeln um die PosA erhöht wird, bis das Menu PosB erreicht hat.
// Funktion fürs Down-Sliden
function slideDown(identifier){
var sliden = document.getElementById(identifier);
PosA += speed;
if(PosA <= 120) {
sliden.style.top = PosA + "px";
setTimeout("slideDown('"+identifier+"')", 1);
}
}
// Funktion fürs Up-Sliden
function slideUp(identifier){
var sliden = document.getElementById(identifier);
PosB -= speed;
if(PosB >= 0) {
sliden.style.top = PosB + "px";
setTimeout ("slideUp('"+identifier+"')", 1);
}
}
// Funktion um beide Funktionen je nach Situation zum Einsatz kommen zu lassen.
var abc = 1;
function slide(identifier) {
if(abc==1) {
slideDown(identifier);
abc = 2;
} else {
slideUp(identifier);
abc = 1;
}
}
~~~~~~html
</script>
<style type="text/css">
#menu {
position:relative;
margin-left:0px;
margin-top:-120px;
height:120px;
width:100px;
background-color:red;
z-index:5;
list-style:none;
float:left;
padding:0;
}
#navi {
width:100px;
height:120px;
background-color:green;
position:relative;
top:120px;
padding:0;margin:0 auto;
}
#slide {
width:100px;
position:absolute;
left:220px;
top:120px;
cursor:pointer;
}
</style>
</head>
<body style="padding:0; margin:0;">
<div id="navi">
<ul id="menu">
<li class="links">Link 1</li>
<li class="links">Link 2</li>
<li class="links">Link 3</li>
<li class="links">Link 4</li>
<li class="links">Link 5</li>
<li class="links">Link 6</li>
</ul>
</div>
<p id="slide" onclick="slide('menu');"><u>up and down</u></p>
</body>
</html>
-
<script language="JavaScript" type="text/javascript">[/code]
schmeiß das language-Attribut raus
// Variablen - deren Wert verändert werden kann bzw. darf
var PosA = 0; // Start-Position
var PosB = 120; // Ziel-PositionAnfangsposition PosA = 0;
var speed = 5; // Speed-Wert gleich Anzahl an Pixeln um die PosA erhöht wird, bis das Menu PosB erreicht hat.
// Funktion fürs Down-Sliden
function slideDown(identifier){
var sliden = document.getElementById(identifier);
PosA += speed;
if(PosA <= 120) {
sliden.style.top = PosA + "px";
setTimeout("slideDown('"+identifier+"')", 1);
}
}jetzt ist PosA >= 120
...
}
> </script> und bleibt es auch -
Liebe(r) KeYara,
Da mein Wissen über Javascript irgendwo doch noch recht beschränkt ist, hoffe ich das ihr mir hoffentlich weiterhelfen könnt.
wie wäre es mit Weiterbildung zum Thema Animieren in JavaScript? Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
hi Felix,
danke ersma für deinen link.
wie wäre es mit Weiterbildung zum Thema Animieren in JavaScript? Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Ich hab mir den Workshop mal angeschaut und werde ihn in der nächsten Zeit intensiver studieren. Ich denke ich kann einiges
davon recht gut für mein Projekt gebrauchen, allerdings ist es für mein derzeitiges Problem nicht grade hilfreich. Das
Projekt: FaderFramework bezieht sich allerdings aufs Ein-, Aus- und Überblenden von Elementen und nicht auf die
Verschiebung eines Elements von A nach B und wieder zurück.Was mein Problem angeht bin ich nun schon einen großen Schritt weiter:
Ich habe festgestellt das die Variablen durch die Funktion slideUp() überschrieben werden und das dadurch die Ausgangs-
variablen nicht mehr stimmen um die slideDown()-Funktion erneut auszuführen.Nach einigem Suchen im WWW, habe ich schließlich auf einer Seite gelesen, dass man das mit einem Array lösen kann. Von
Arrays weiß ich zwar wie Arrays aufgebaut werden, nur finde ich, in Bezug auf mein Problem, keinen brauchbaren Lösungsanfang
wie ich das Array in meinen Funktionen einbauen kann.Daher meine neue Frage: Wie sollte ich anfangen das Array einzubauen?
Würde mich über einen weiteren Denkanstoß sehr freuen. *liebguck*
Gruß KeYara
hier noch mal das script mit den beiden Kontroll-Alerts:
var speed = 5; var PosA = 0; var PosB = 120; function slideDown(identifier){ var sliden = document.getElementById(identifier); var PosB = 120; PosA += speed; if(PosA <= PosB) { sliden.style.top = PosA + "px"; setTimeout("slideDown('"+identifier+"')", 1); } if(PosA==PosB) { alert(sliden.offsetTop); } } function slideUp(identifier){ var sliden = document.getElementById(identifier); var PosA = 0; PosB -= speed; if(PosB >= PosA) { sliden.style.top = PosB + "px"; setTimeout ("slideUp('"+identifier+"')", 1); } if(PosB==PosA) { alert(sliden.offsetTop); } } var abc = 1; function slide(identifier) { if(abc==1) { slideDown(identifier); abc = 2; } else { slideUp(identifier); abc = 1; // Testwerte um meine Theorie zu überprüfen PosA = 0; PosB = 120; } }P.s.:
Liebe(r) KeYara,
Das "r" büdde mitschreiben. Bin eigl. sehr männlich - Der Nick is ein Name von einem Charakter aus einem Rollenspiel. :-)
-
Lieber KeYara,
Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Ich hab mir den Workshop mal angeschaut und werde ihn in der nächsten Zeit intensiver studieren. Ich denke ich kann einiges
davon recht gut für mein Projekt gebrauchen,davon gehe ich aus, daher habe ich ihn Dir auch verlinkt.
allerdings ist es für mein derzeitiges Problem nicht grade hilfreich.
Das kommt auf Deine Geduld und Lernbereitschaft an. Ich behaupte, dass in diesem Lehrgang viele Zusammenhänge angesprochen und gelernt werden, die Dir in Deinem konkreten Fall sehr viel weiterhelfen werden. Dass Du das im Moment noch nicht erkennst, liegt daran, dass Dir das dazu nötige Fachwissen noch fehlt.
Das Projekt: FaderFramework bezieht sich allerdings aufs Ein-, Aus- und
Überblenden von Elementen und nicht auf die
Verschiebung eines Elements von A nach B und wieder zurück.Das Projekt geht insbesondere auf die Art und Weise ein, wie man ein solches Projekt überhaupt anfängt. Und auf die dazu notwendigen Grundlagen. Alles Dinge, die Dir noch fehlen - sonst könntest Du ja alles schon und bräuchtest hier keine Hilfe.
Nach einigem Suchen im WWW, habe ich schließlich auf einer Seite gelesen,
dass man das mit einem Array lösen kann.Aberglaube. Ein Array ist ein Werkzeug. Was man mit diesem Werkzeug macht, ist die eigentliche Frage. Man kann z.B. mit einem Hammer eine Schraube in die Wand klopfen, um ein Bild aufzuhängen. Das geht! Aber ob es sinnvoll ist, und wie man es vermeidet, dass sich die Schraube währenddessen verbiegt, ist eine andere Frage. Ähnlich verhält es sich mit einem Array und Deinem Projekt.
Von
Arrays weiß ich zwar wie Arrays aufgebaut werden, nur finde ich, in Bezug
auf mein Problem, keinen brauchbaren Lösungsanfang wie ich das Array in
meinen Funktionen einbauen kann.Eben. Deine Frage ist weniger, "wie mache ich mir ein Array nutzbar?", als vielmehr "wie lautet eine generelle Lösungsstrategie?".
Daher meine neue Frage: Wie sollte ich anfangen das Array einzubauen?
Tja, und da sind wir wieder beim eigentlichen Problem: Geduld und Lernbereitschaft. Daher bleibe ich bei meinem Artikel. Wenn Du ihn eine Weile durchgearbeitet hast, dann betrachtest Du die Dinge etwas anders und kannst Dein Problem selbst lösen. Also nicht gleich sagen, dass Dir das jetzt nicht konkret hilft!
Würde mich über einen weiteren Denkanstoß sehr freuen. *liebguck*
OK. Du brauchst eine Art Richtungsanzeiger (Variable mit
trueoderfalse), anhand dessen die passende Funktion aufgerufen wird. Vielleicht kannst Du die zwei Funktionen auch in einer einzigen Funktion vereinen, innerhalb derer dann eben anstatt einer Addition eine Subtraktion vorgenommen wird. Den Richtungsanzeiger könnte man dann sogar als "Vorzeichen" bei der Addition nehmen... Alles weitere findest Du im Lehrgang.Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi Felix,
habe das Slide-Menu im Groben jetz funktionsfähig, mit hilfe deines Workshops, hinbekommen. Slide.js
Mein Fehler war, dass ich an bestimmten Stellen mir nicht wirklich überlegt habe was ich vergleichen will bzw. was die
eigentliche Bedingung sein soll.
Da ich das jetzt nicht wirklich einschätzen kann, könntest du dir eventuell das Script bitte mal anschauen und mir
sagen ob es nun halbwegs valide ist?. Die Fehlerkonsole von FF zeigt mir zumindestens keinen Fehler an.Auf jeden Fall nochmal großes Dankeschön für deine Hilfe und deinen Link. Ich werd mir deinen Workshop in nächster Zeit
öfter anschauen, da ich vieles für meine Online-Status-Anzeige verwenden kann. Im Moment aber kämpfe ich mit dem nächsten
Problem, das Slide-Menu betreffend: per Klick auf die Main-Buttons, je eine Gruppe von Sub-Buttons im Sub-Menu automatisch
generieren lassen.Eine Idee wäre mit ner Switch-Abfrage zu arbeiten (ähnlich wie in PHP), aber erstmal weitersuchen. Wenn ich dann doch
nicht weiter kommen sollte melde ich mich nochmal.Wie gesagt, würde ich mich freuen wenn du dir evtl. das Script mal anschauen und mir sagen könntest
ob es soweit valide ist. *ganzdollliebguck*Gruß KeYara
-
-
-