Überblenden mit JavaScript
0 1 
Felix Riesterer
0 0 0 0 0 0 0 0 Felix Riesterer
0 0 Felix Riesterer
Überblenden mit JavaScript
Hi,
Ich bin noch ein relativer Neuling mit JavaScript und will eine Funktion realisieren, mit der verschiedene Arrays überblendet werden. Leider klappt es nicht und die Fehlerkonsole gibt zurück, die Variable x wäre nicht definiert
var meldungen = new Array(4);
meldungen[0] = "<div id='m0'><img src='http://schwarzwald-logistik.de/images/logo.gif' width='536' alt='SL-Logistik' /></div>";
meldungen[1] = "<div id='m1'><img src='http://www.unimall.de/templates/yaml-for-xtc-1-0-1/img/unimall/unimall-logo01_mue.gif' width='536' alt='Unimall' /></div>";
meldungen[2] = "<div id='m2'>co2-filter.com || Das CO<sub>2</sub>-Portal.</div>";
meldungen[3] = "<div id='m3'>Keine aktuellen Meldungen.</div>";
var i = 0;
var textdauer = 1000;
var unimall = 20000;
function blenden(n)
{
x = n;
var meldung = "m" + n;
document.getElementById(meldung).style.opacity = i;
document.getElementById(meldung).style.MozOpacity = i;
document.getElementById(meldung).style.KhtmlOpacity = i;
document.getElementById(meldung).style.filter = 'alpha(opacity=i)';
i++;
document.innerHTML = i;
if (i < 100)
{
window.setTimeout("blenden(x)",1);
}
else
{
document.getElementById(meldung).visibility = hidden;
return n;
}
}
function ausgeben (x)
{
window.document.getElementById("akg").innerHTML = meldungen[x] + x;
window.setTimeout("blenden(x)", textdauer); //Das ist anscheinden undefined
x++;
window.setTimeout("ausgeben(x)", 2); //Das auch
return;
}
<body onload="javascript:ausgeben(0)">
<div id="akg" style="background:#808080;"> </div>
Ausgegeben wirde nur meldungen[0] sowie die zahl 0. Warum ist das x jetzt anschließend undefined??
Danke
-
Hallo,
die Variable x wäre nicht definiert
ist sie auch nicht.
window.setTimeout("blenden(x)",1);
Du übergibst sie hier nicht. Erst so:
window.setTimeout("blenden("+x+")",1);
MfG. Christoph
-
Lieber bosselmann,
probier's mal damit:
window.setTimeout("blenden("+x+")",1);Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Ok, jetzt wird die Funktion aufgerufen, aber die Konsole gibt mir jetzt das zurück: document.getElementById(meldung) is null.
var meldung = "'m" + n + "'"; document.getElementById(meldung).style.opacity = i;Woran liegt das denn jetzt?
-
Hallo,
Ok, jetzt wird die Funktion aufgerufen, aber die Konsole gibt mir jetzt das zurück: document.getElementById(meldung) is null.
Dann gibts das nicht...
var meldung = "'m" + n + "'";
document.getElementById(meldung).style.opacity = i;
> Woran liegt das denn jetzt? mach mal bevor document.getElementById(meldung).style... eine alert-Kontrolle: alert(meldung); Vielleicht merkst du einen Fehler ;) MfG. Christoph -- Wo die Sprache aufhört, fängt die Musik an... Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:) Go to [this](http://home.arcor.de/minicrispie/index.html) or Go to [this](http://home.arcor.de/provochlud/index.html)-
Hi,
ok, Fehler gefunden, aber die Lösung nicht :-(
Ich verzweifle noch, sitz seit heut morgen um 10 dran... Rette mich!Gruß
Dominik
-
Hallo,
ok, Fehler gefunden, aber die Lösung nicht :-(
Ich verzweifle noch, sitz seit heut morgen um 10 dran... Rette mich!was zeigt die meldung den an ?
MfG. Christoph
-
Hallo,
ich seh gerade noch einen Fehler:
du musst natürlich bei ALLEN setTimeouts die Funktion in der art ändern:
window.setTimeout("DeinFunktion(+x+)", 1);ich glaube, das sollte gehen ^^
MfG. Christoph
-
Hi, nee, hab ich schon gemacht. Hier der aktuelle JavaScript-Stand:
var meldungen = new Array(4); meldungen[0] = "<div id='m0'><img src='http://schwarzwald-logistik.de/images/logo.gif' width='536' alt='SL-Logistik' /></div>"; meldungen[1] = "<div id='m1'><img src='http://www.unimall.de/templates/yaml-for-xtc-1-0-1/img/unimall/unimall-logo01_mue.gif' width='536' alt='Unimall' /></div>"; meldungen[2] = "<div id='m2'>co2-filter.com || Das CO<sub>2</sub>-Portal.</div>"; meldungen[3] = "<div id='m3'>Keine aktuellen Meldungen.</div>"; var i = 0; var a = 0; var textdauer = 1000; var unimall = 20000; function blenden(n) { x = n; var meldung = "'m" + a + "'"; document.getElementById(meldung).style.opacity = i; document.getElementById(meldung).style.MozOpacity = i; document.getElementById(meldung).style.KhtmlOpacity = i; document.getElementById(meldung).style.filter = 'alpha(opacity=i)'; i++; document.innerHTML = i; if (i < 100) { window.setTimeout("blenden(" + x + ")",1); } else { document.getElementById(meldung).visibility = hidden; a++; return n; } } function ausgeben (x) { window.document.getElementById("akg").innerHTML = meldungen[x] + x; window.setTimeout("blenden(" + x + ")", textdauer); x++; window.setTimeout("ausgeben(" + x + ")", 2); return; }-
-
Hallo,
var meldung = "'m" + a + "'";
versuch mal:
var meldung = "m" + a;
die anführungszeichen weglassen
MfG. Christoph
Auch nix, wieder: is null
-
-
-
Lieber bosselmann,
ich glaube, da ist ein kleiner Denkfehler.
meldungen[0] = "<div id='m0'><img src='http://schwarzwald-logistik.de/images/logo.gif' width='536' alt='SL-Logistik' /></div>";
hier speicherst Du eine Zeichenkette in Deinem Array "meldungen" unter der Nummer Null ab. Wohlgemerkt eine _Zeichenkette_ und kein HTML-Elementobjekt!
document.getElementById(meldung).style.opacity = i;
Hier willst Du auf ein HTML-Element als Objekt zugreifen, das eine ID in der Art enthält, wie Du sie in Deiner Zeichenkette oben abgelegt hast.
Siehst Du da etwa keinen Widerspruch? Es gibt kein Element "m0"! Es gibt nur eine Zeichenkette, die zufällig in irgendsoeinem Array namens "meldungen" abgelegt ist.
Was Du willst, ist eigentlich eine Sammlung von HTML-Elementen (müssen das <div>-Elemente sein?), die Du in einem Array lediglich refernzierst (also nicht speicherst, sondern nur eine Referenz auf sie speicherst!!), um dann später damit etwas anzustellen.
Dein Array "meldungen" kommt im späteren Verlauf Deines Scriptes nicht mehr vor... ist Dir das nicht auch schon aufgefallen? Das ist ein weiterer Hinweis darauf, dass bei Dir ein kleiner Denkfehler aufgetreten ist.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Ja ok, ich verstehe. Aber das Array Meldungen kommt nochmal in der Funktion ausgeben() vor, in dem es ausgegeben wird. Diese Funktion wird aber vor der Blendfunktion aufgerufen. Somit müsste das <div id='m0'> existieren oder nicht?
Grüße
Dominik
-
Lieber bosselmann,
mit diesem Code bin ich weiter gekommen. Vergleiche selbst, was bei Dir anders ist/war:
var meldungen = new Array(4); meldungen[0] = "<div id='m0'><img src='http://schwarzwald-logistik.de/images/logo.gif' width='536' alt='SL-Logistik' /></div>"; meldungen[1] = "<div id='m1'><img src='http://www.unimall.de/templates/yaml-for-xtc-1-0-1/img/unimall/unimall-logo01_mue.gif' width='536' alt='Unimall' /></div>"; meldungen[2] = "<div id='m2'>co2-filter.com || Das CO<sub>2</sub>-Portal.</div>"; meldungen[3] = "<div id='m3'>Keine aktuellen Meldungen.</div>"; var i = 0; var textdauer = 1000; var unimall = 20000; function blenden(n) { var meldung = "m" + n; document.getElementById(meldung).style.opacity = i/100; document.getElementById(meldung).style.MozOpacity = i/100; document.getElementById(meldung).style.KhtmlOpacity = i/100; document.getElementById(meldung).style.filter = "alpha(opacity="+i+")"; i++; if (i < 100) { window.setTimeout("blenden("+n+");", 20); } else { document.getElementById(meldung).visibility = "hidden"; return n; } } function ausgeben (x) { document.getElementById("akg").innerHTML = meldungen[x]; window.setTimeout("blenden("+x+");", textdauer); //Das ist anscheinden undefined x++; x = (x == meldungen.length) ? 0 : x; window.setTimeout("ausgeben("+x+");", unimall); //Das auch return; }Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Danke, klappt super, nur ein Problem: Die Blende funktioniert nur am Anfang, dannach gibt die Fehlerkonsole
Fehler: document.getElementById(meldung) is null
zurück.
-
So jetzt funzt es: Es lag am setTimeout(): Das Intervall war zu kurz, sodass der Zähler i nicht runtergesetzt werden konnte...
Jetzt noch eine abschließende Frage:
var meldungen = new Array(4); meldungen[0] = "<div id='m0'><img src='http://schwarzwald-logistik.de/images/logo.gif' id='sl' alt='SL-Logistik' /></div>"; meldungen[1] = "<div id='m1'><img src='http://www.unimall.de/templates/yaml-for-xtc-1-0-1/img/unimall/unimall-logo01_mue.gif' id='unimall' alt='Unimall' /></div>"; meldungen[2] = "<div id='m2'><span style='font-size:2em;'>co2-filter.com || Das CO<sub>2</sub>-Portal.</span></div>"; meldungen[3] = "<div id='m3'>Keine aktuellen Meldungen.</div>"; var i = 0; var j = 0; var textdauer = 10000; var unimall = 20000; function ausblenden(n) { var meldung = "m" + n; document.getElementById(meldung).style.opacity = 1 - i/100; document.getElementById(meldung).style.MozOpacity = 1 - i/100; document.getElementById(meldung).style.KhtmlOpacity = 1 - i/100; document.getElementById(meldung).style.filter = "alpha(opacity="+i+")"; i = i + 2; if (i < 101) { window.setTimeout("ausblenden("+n+");", 10); } else { document.getElementById(meldung).visibility = "hidden"; i = 0; return; } } function einblenden(n) { var meldung = "m" + n; if (i == 0) { document.getElementById(meldung).visibility = "hidden"; i = i + 2; window.setTimeout("einblenden("+n+");", 10); } else { document.getElementById(meldung).style.opacity = i/100; document.getElementById(meldung).style.MozOpacity = i/100; document.getElementById(meldung).style.KhtmlOpacity = i/100; document.getElementById(meldung).style.filter = "alpha(opacity="+i+")"; i = i + 2; if (i < 101) { window.setTimeout("einblenden("+n+");", 10); } else { document.getElementById(meldung).visibility = "visible"; i = 0; return; } } } function ausgeben (x) { document.getElementById("akg").innerHTML = meldungen[x]; window.setTimeout("einblenden("+x+");", 0); window.setTimeout("ausblenden("+x+");", textdauer + 875); x++; x = (x == meldungen.length) ? 0 : x; window.setTimeout("ausgeben("+x+");", textdauer + 1700); return; }Jetzt wird aber das Bild vor dem Einblenden ganz kurz angezeigt. Gibt es eine Möglichkeit, das zu unterbinden??
-
Lieber bosselmann,
Jetzt wird aber das Bild vor dem Einblenden ganz kurz angezeigt. Gibt es eine Möglichkeit, das zu unterbinden??
bitte nimm es mir nicht übel, aber ich mag das Konzept nicht, wie Dein Script aufgebaut ist! Wenn man das ganze Teil ummodeln könnte, dann wäre da zum einen ein wesentlich verständlicherer Code möglich, und natürlich auch das Verhindern der Anzeige, wie Du das meinst.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hmmm, OK. Wie würdest du so ein Skript aufbauen? Nach welchem Schema?
Gruß Dominik
-
Lieber Dominik,
Hmmm, OK. Wie würdest du so ein Skript aufbauen? Nach welchem Schema?
im Grunde bin ich mit Jürgen gerade dabei, dieses Problem so richtig in Angriff zu nehmen, jedoch hat er noch technische Probleme mit seinem FTP-Zugang zu lösen, bevor wir richtig anfangen können. Du kannst aber meinen ersten Anfang schon sehen. Wenn es Dich wirklich interessiert, dann können auch wir beide diesen "Lehrgang" zusammen machen, und Jürgen kann sich einklinken, wenn er soweit ist.
Ich will halt mein Script nicht einfach so verschenken... Und außerdem habe ich dabei wieder so einiges gelernt, was ich vielleicht mit meinem jsPopup verbinden könnte, um ein etwas leistungsfähigeres und visuell ansprechenderes Script zu erstellen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-
-
-
-
-
-
-
-
-
-