nicht angemeldet Felix Riesterer
Struppi
Struppi
Felix Riesterer
JürgenB
Der Martin
JürgenB
JürgenB
Hallo,
Ich würde mich sehr freuen wenn jemand mal schauen könnte, wo das Problem liegt, warum in meinem Script kein Fadeeffekt mit dem Firefox (andere Browser hab ich noch nicht getestet) zustande kommt.
Vielen Dank für eure nette Hilfe.
<html>
<head><title>Fade Test</title></head>
<body>
<span id="1" style="color:#bbbbbb">test 1</span>
<span id="2" style="color:#ffffff">test 2</span>
<span id="3" style="color:#555555">test 3</span>
<script type="text/javascript">
function setOpacity(id, value)
{
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.color = 'rgb('+value+','+value+','+value+')';
}
for (var i = 1; i <= 3; i++)
{
var help = "";
for(var z = 254; z > -1 ; z--)
{
help = "setOpacity("+i+","+z+");";
window.setTimeout("setOpacity(i,z);", 10);
}
for(var y = 0; y < 255; y++)
{
help = "setOpacity("+i+","+y+");"
window.setTimeout(help, 10);
}
}
</script>
</body>
</html>
Hallo
Guckst du in die Fehlerkonsole?
m
so danke erstmal.
Ich habe mir eure Nachrichten durchgelesen und habe selbst im Netz geforscht. Der Ansatz mit dem rgb(...) ist wohl nicht so gut da man auch opacity und filter -> opacity manipulieren kann. Habe dazu ein einfaches script gefunden, welches ich verstehe, und auf meine Bedürfnisse angepasst.
<html>
<head><title>Fade Test</title></head>
<body>
<span id="quote1">test 1</span>
<script type="text/javascript">
var TimeToFade = 1000.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
fade('quote1');
<!-- wenn ich den hier umklammerten code weglasse funktioniert es und er fadet zumindest quote1 aus -->
pausecomp(1000.0);
fade('quote1');
<!-- weglassen ende -->
</script>
</body>
</html>
so nun sollte in meinem Beispiel hier eigentlich "quote1" ausgeblendet und wieder eingeblendet werden. passiert aber nicht. da Timeout ja scheinbar unabhängig von dem Fortlaufen des Scripts ist habe ich auch schon mal das script für ne Sekunde warten lassen nach dem ersten fade. Leider ist das Ergebnis nicht gut. Es funktioniert gar nicht. nur wenn ich die letzten beiden Anweisungen weglasse, fadet es aus. Was mache ich falsch.
Danke für eure Hilfe.
Lieber JSVollNoob,
var TimeToFade = 1000.0;
function fade(eid)
> Was mache ich falsch.
JürgenB hatte Dir einen [sehr passenden Link](http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/) [gegeben](https://forum.selfhtml.org/?t=193790&m=1294931). Warum hast Du Dir nicht die Mühe gemacht, den dortigen Artikel auch nur ansatzweise durchzuarbeiten? Er behandelt exakt Dein Problem...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Hallo Leute, ich habe natürlich alles mindestens überflogen und aber auch auf eingene Faust recherchiert und mir Gedanken gemacht. Wie mein Nick schon aussagt, kenn ich mich nicht besonders gut mit JS aus und würde es auch nicht lernen wollen wenn ich nicht müsste. Trotzdem bin ich euch allen sehr dankbar. habe das Problem jetzt folgendermaßen gelöst:
<html>
<head><title>Fade Test</title></head>
<body>
<span id="quote1">test 1</span>
<span id="quote2">test 2</span>
<span id="quote3">test 3</span>
<script type="text/javascript">
var TimeToFade = 1000.0;
var DisplayDelay = 3000.0;
var NoOfSpans = 3;
var DisplayDelaySwitch = 0; //helps with Delay
var Count = 1; // counts current container
function fade(lastTick, eid)
{
// Init Block
var element = document.getElementById(eid+Count);
if(element == null)
return;
if((element.FadeState != 1) && (element.FadeState != -1)) // 1 = fade in // 2 = fade out
{
element.FadeState = 1;
element.FadeTimeLeft = TimeToFade;
}
// Init end
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var delay = 33; // TimeOut Period
if(DisplayDelaySwitch == 1)
{
DisplayDelaySwitch = 0;
element.FadeTimeLeft = TimeToFade;
elapsedTicks = 0;
}
if(element.FadeTimeLeft <= elapsedTicks)
{
if(element.FadeState == 1)
{
delay = DisplayDelay;
DisplayDelaySwitch = 1;
}
else
{
if(document.getElementById('quote'+(Count+1)) == null)
{ Count = 1; }
else
{ Count++; }
}
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
}
else
{
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
{ newOpVal = 1 - newOpVal; }
else
{ newOpVal = 0 + newOpVal; }
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
}
setTimeout("fade(" + curTick + ",'" + eid + "')", delay);
}
while(document.getElementById("quote"+Count) != null)
{
document.getElementById("quote"+Count).style.opacity = 0;
Count++;
}
Count = 1;
fade( new Date().getTime(), 'quote');
</script>
</body>
</html>
Rekursion scheint wirklich der einzige Weg zu sein, wie ich dem setTimeOut bei kommen kann. das mit der Pause-Schleife is mir auch komisch vorgekommen, da es in jeder anderen Programmiersprache, die ich kenne eleganter geht.
Jedenfalls läuft es jetzt. Danke nochmal
Rekursion scheint wirklich der einzige Weg zu sein, ...
Das ist keine Rekursion!
Die Funktion ruft nicht sich selbst auf, sondern du erzeugst einen timeout der irgendwann die Funktion nochmal aufruft. Eine Rekursion wäre hier auch völlig unangebracht.
Struppi.
Rekursion scheint wirklich der einzige Weg zu sein, ...
Das ist keine Rekursion!
Die Funktion ruft nicht sich selbst auf, sondern du erzeugst einen timeout der irgendwann die Funktion nochmal aufruft. Eine Rekursion wäre hier auch völlig unangebracht.Struppi.
Danke wieder was gelernt. Ist das denn nicht indirekte Rekursion, da ich die Funktion in der Funktion mit einem Timeout aufrufe? Aber eigentlich viel interessanter wäre ob es noch einen anderen Weg gibt ohne die Rekursion, welche keine ist.
Danke wieder was gelernt. Ist das denn nicht indirekte Rekursion, da ich die Funktion in der Funktion mit einem Timeout aufrufe? Aber eigentlich viel interessanter wäre ob es noch einen anderen Weg gibt ohne die Rekursion, welche keine ist.
Nein. Da du, wie du gemerkt hast, die Ausführung von JS nicht stoppen kannst, musst du dies über einen Timer machen.
Ein anderer Weg, den Timer einzusetzen, wäre über so eine generalisierte Form: http://aktuell.de.selfhtml.org/artikel/javascript/timer/
Struppi.
Lieber JSVollNoob,
Wie mein Nick schon aussagt, kenn ich mich nicht besonders gut mit JS aus und würde es auch nicht lernen wollen wenn ich nicht müsste.
böser Fehler! Du würdest "es auch nicht lernen wollen" ist hier ganz schlecht. Das klingt wie "gebt mir am besten eine fertige Lösung, dann bin ich hier ganz schnell wieder weg", was hier im Grunde nicht gerne gesehen wird. Und diese Haltung kann man einem "JSVollNoob" nun nicht automatisch unterstellen, von daher sagt Dein Nick diese unterschwellige Lernverweigerung eben nicht aus.
habe das Problem jetzt folgendermaßen gelöst: [...grauenhafter code...]
Jedenfalls läuft es jetzt. Danke nochmal
Auf Wiedersehen. (wahrscheinlich eher nicht)
Liebe Grüße,
Felix Riesterer.
Hallo JSVollNoob,
function pausecomp(millis)
{
var date = new Date();
var curDate = null;do { curDate = new Date(); }
while(curDate-date < millis);
}
wer so etwas einsetzt, der quält auch Tiere und Kinder.
Jetzt mal im Ernst: dieses Funktion macht eine Zeit lang ... nichts, und das mit höchster Geschwindigkeit und voller CPU-Auslastung. Hierdurch "friert" der Browser ein und manche Browser senden nach einiger Zeit (5 sec?) eine Warnung.
Du solltest dich mit setTimeout bzw. setInterval mal genauer beschäftigen. Auch etwas Kenntnis über "window.onload" könnte dir weiterhelfen und z.B. verhindern, dass du auf Elemente zugreifst, die noch gar nicht existieren.
Wenn du noch mehr Hilfe benötigst, benötigt das Forum eine genauere Fehlerbeschreibung , z.B. die Fehlermeldung des Browsers, am besten die des Firefox. Ein Link zu deiner (Test-)Seite würde möglichen Helfern die Möglichkeit geben, dein Problem nachzuvollziehen.
Gruß, Jürgen
Hi,
Ich würde mich sehr freuen wenn jemand mal schauen könnte, wo das Problem liegt, warum in meinem Script kein Fadeeffekt mit dem Firefox (andere Browser hab ich noch nicht getestet) zustande kommt.
ich weiß nicht, ob das wirklich die Ursache ist, aber ...
<span id="1" style="color:#bbbbbb">test 1</span>
<span id="2" style="color:#ffffff">test 2</span>
<span id="3" style="color:#555555">test 3</span>
... die ID-Werte sind ungültig. IDs müssen mit einem Buchstaben beginnen.
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.color = 'rgb('+value+','+value+','+value+')';
Die Fehlerkonsole sagt dir vermutlich, dass getElementById() kein passendes Objekt gefunden hat.
So long,
Martin
Hi,
for(var z = 254; z > -1 ; z--)
{
help = "setOpacity("+i+","+z+");";
window.setTimeout("setOpacity(i,z);", 10);
was genau möchtest Du mit dieser Kombi aus loop über die 256 Farbwerte und dem Timeout erreichen? Merke: für eine Animation ist _immer_ timeout/intervall zuständig, loops sind viel zu schnell.
Gruesse, Joachim
Hallo JSVollNoob,
for (var i = 1; i <= 3; i++)
{
var help = "";
for(var z = 254; z > -1 ; z--)
{
help = "setOpacity("+i+","+z+");";
window.setTimeout("setOpacity(i,z);", 10);
}
for(var y = 0; y < 255; y++)
{
help = "setOpacity("+i+","+y+");"
window.setTimeout(help, 10);
}
du verwechselst setTimeout mit wait, das es in Javascript nicht gibt. Schau die mal diesen Artikel über eine [Komfortable Timer-Funktion](http://aktuell.de.selfhtml.org/artikel/javascript/timer/) an.
Gruß, Jürgen