javascript direkt ändern

[rotalever]

Ich hab hier sowas:

var color1 = [255,0,0];
var color2 = [0,0,255];
var fadeintime = 500;
var fadeouttime = 500;

function fadein (element)
{
var fade = 0.0;
var msec = 0;
var msec_start = new Date().getTime();
while (fade < 1.0)
{
msec = new Date().getTime() - msec_start;
fade = 1.0*msec / fadeintime;
if (fade > 1.0)
{
fade = 1.0;
}
element.style.backgroundColor = "rgb(" +
(parseInt (color1[0]*(1-fade) + color2[0]*fade)) + "," +
(parseInt (color1[1]*(1-fade) + color2[1]*fade)) + "," +
(parseInt (color1[2]*(1-fade) + color2[2]*fade)) +")";
}
}

(vermutlich sieht man, dass ich sonst nie javascript programmiere ;))

Wie auch immer, theoretisch sollte es funktionieren und die Hintergrundfarbe sich "langsam" verändern. Funktioniert aber nicht. Erst ist die Hintergrundfarbe halt rot, wie immer. Dann wird die Funktion aufgerufen und wenn sie fertig ist (schaut zumindest so aus, da kleine Pause dazwischen), wird die Farbe Blau. Die Abstufungen dazwischen sind aber nicht zu sehen. Wenn man dieses color-zeugs mit document.write ausgibt, sind die Zwischenstufen aber korrekt. Für mich sieht das so aus, als würe element.style.backgroundColor... in einen Puffer schreiben und das umfärben wird erst nach Beendigung der Funktion ausgeführt??
Wie kann ich das machen, dass der sofort umfärbt?? Hab leider keine Ahnung von javascript.

[M@tes]

Kanns jetzt nicht ausprobieren, aber meine erste Idee wäre mal folgendes zu probieren:
Starte eine Funktion, die die Schleife beinhaltet, welche wiederum jedesmal die Funktion aufruft, welche die Farbwerte anpasst.

Anderes: Gibt getTime auch Millisekunden an? Hab schon ewigs nicht mehr mit JS gearbeitet.

[rotalever]

Kanns jetzt nicht ausprobieren, aber meine erste Idee wäre mal folgendes zu probieren:
Starte eine Funktion, die die Schleife beinhaltet, welche wiederum jedesmal die Funktion aufruft, welche die Farbwerte anpasst.

Anderes: Gibt getTime auch Millisekunden an? Hab schon ewigs nicht mehr mit JS gearbeitet.
Falls du sowas meinst:

function applycolor (element, fade)
{
element.style.backgroundColor = "rgb(" +
(parseInt (color1[0]*(1-fade) + color2[0]*fade)) + "," +
(parseInt (color1[1]*(1-fade) + color2[1]*fade)) + "," +
(parseInt (color1[2]*(1-fade) + color2[2]*fade)) +")";
}

=>funktioniert nicht.
Ich glaube schon, dass getTime Millisekunden angibt. Es stimmt ja im Prinzip von der Zeit her, nach einer halben Sekunde ist die Funktion fertig und der Hintergrund schlagartig blau.

[M@tes]

Mal ohne RGB? Einfach mal red green blue z.B. um mal einen Fehler in der Rechnung (oder dem rgb selber?) auszuschliessen.

Ansonsten würd ich mir mal kurz andere Scripts angucken, wie dies gemacht haben.

[rotalever]

An einen Fehler in der Rechnung glaube ich nicht, wenn ich den String einfach ausgebe, der erzeugt wird, dann ergibt sich das:
rgb(255,0,0)rgb(243,0,11)rgb(243,0,11)rgb(242,0,12)rgb(242,0,12).....
Also sind es die richtigen Werte. Und das verrückte ist ja, dass es sich am Schluss dann ja wirklich rgb(0,0,255) färbt, aber alle Zwischenschritte nicht eingezeichnet werden.

Ich guck schon die ganze Zeit bei google, werd aber nicht schlau, warum das bei anderen geht und bei mir nicht. :mad:

[rotalever]

Wenn ich nach jedem Color-Change ein alert() mache, und die Zeit was höher stelle, damit man mehr Zeit hat, dann gibt es nach jedem alert() eine Farbänderung, das bestätigt meine Vermutung, dass der Browser einfach nicht refreshed.

[The_Invisible]

ich würde es mal mit setInterval() oder setTimeout() probieren.

mfg

[rotalever]

Also es geht jetzt begrenzt:

var color1 = [255,0,0];
var color2 = [0,0,255];
var fadeintime = 500;
var fadeouttime = 500;

function applycolor (element, fade)
{
window.setTimeout('document.getElementById("1").style.setProperty("background-color","rgb(" + \
(Math.floor (color1[0]*(1-'+fade+') + color2[0]*'+fade+')) + "," + \
(Math.floor (color1[1]*(1-'+fade+') + color2[1]*'+fade+')) + "," + \
(Math.floor (color1[2]*(1-'+fade+') + color2[2]*'+fade+')) +")",null)',fade*fadeintime);
}

function fadein (element)
{
var fade = 0.0;
var msec = 0;
var msec_start = new Date().getTime();
for (var i = 0; i < fadeintime; i++)
{
applycolor (element, 1.0*i/fadeintime)
}
}

Aber wie man sieht, musste ich dieses document.getElementById zeugs im setTimeout machen. Das wollte ich eigentlich auch vermeiden aber "element" kann ich ja nicht einfach so in den String schreiben, und das so ausklammern wie bei "fade" geht auch nicht. Was kann man da noch machen??

Hätte nciht gedacht, dass Javascript so ein Müll ist...

Außerdem gefällt mir nicht, dass jetzt die Funktion 500 mal aufgerufen wird, ich wollte das ja eigentlich mit einem normalen Frametimer machen, wie ich es vorher implementiert habe.

[rotalever]

Und sowas geht natürlich auch mal wieder nicht mehr:

var frames = fadeintime/1000.0*fps;
for (var i = 0; i < frames; i++)
{
applycolor (element, i/frames * fadeintime);
}


Mein Fehler (Funktion muss natürlich auch geändert werden)...

[DanMan]

Bei sowas würde ich das Rad nicht neu erfinden, sondern eine Library wie z.B. http://mootools.net/ heranziehen. Das sind ca. 15kB extra an JS - ob das zuviel ist musst du wissen.

[rotalever]

Danke... Scheint wohl alle meine Arbeit um sonst gewesen zu sein ;(

[DanMan]

Danke... Scheint wohl alle meine Arbeit um sonst gewesen zu sein ;(
Nicht wenn du es noch hinkriegst. Ich hab kaum Ahnung von JS, daher kann ich dir nicht anders weiterhelfen. Wenn du es selber löst kannst du immernoch einiges an Code sparen (ca 90%), da eine handgeklöppelte Programmierung immer schlanker ist als solch ein Framework.

[rotalever]

Joar, wärend ich dabei bin, ein Problem zu lösen, taucht auch schon wieder ein neues auf.. Man muss ja schließlich auch den aktuellen Wert aus dem Stylesheet auslesen können, damit es gut aussieht.

[rotalever]

Jetzt läuft es eigentlich ziemlich perfekt, sogar ohne die Benutzung von ids, man kann einfach fadein(this), oder fadeout(this) aufrufen :smile:

var color1 = [255,0,0];
var color2 = [0,0,255];
var fadeintime = 500.0;
var fadeouttime = 1000.0;
var fps = 60.0;

var fadestat;
var buttons = new Array();
function applycolor (i, colora, colorb, direc, time)
{
buttons[i][0].style.setProperty("background-color","rgb(" +
(Math.floor (colora[0]*(1-buttons[i][4]) + colorb[0]*buttons[i][4])) + "," +
(Math.floor (colora[1]*(1-buttons[i][4]) + colorb[1]*buttons[i][4])) + "," +
(Math.floor (colora[2]*(1-buttons[i][4]) + colorb[2]*buttons[i][4])) +")",null);
buttons[i][4] = buttons[i][4] + direc*(1000.0/fps) / time;
}

function getStyle(x,styleProp)
{
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}

function getColor (x)
{
style = getStyle (x, "background-color");
var color = new Array ();
color = style.substring(4,style.length-1).split (',')
return color;
}

function get_button (element)
{
for (var i=0;i<buttons.length;i++)
{
if (buttons[i][0] == element)
{
return i;
}
}
i = buttons.length;
buttons[i] = new Array (element, 0, 0, 0, 0);
return i;
}

function deactivatebutton (i) {
if (buttons[i][1] == 1)
{
buttons[i][1] = 0;
clearInterval (buttons[i][2]);
clearTimeout (buttons[i][3]);
}
}

function fade (element, colora, colorb, direc, time)
{
getColor (element);
var i = get_button (element);
if (buttons[i][1] == 1)
{
deactivatebutton (i);
}
if (direc == +1)
{
var rest = 1-buttons[i][4];
}
else
{
var rest = buttons[i][4];
}

buttons[i][1] = 1;
buttons[i][2] = window.setInterval (applycolor, 1000.0/fps, i, colora, colorb, direc, time);
buttons[i][3] = window.setTimeout (deactivatebutton, time*rest, i);
}


// called by user
function fadein (element)
{
fade (element, color1, color2, +1, fadeintime);
}

function fadeout (element)
{
fade (element, color1, color2, -1, fadeouttime);
}

Der code müsste nur mal ein bisschen aufgeräumt werden :biggrin:

[DanMan]

Jetzt läuft es eigentlich ziemlich perfekt, sogar ohne die Benutzung von ids, man kann einfach fadein(this), oder fadeout(this) aufrufen :smile:
Gut. Kann man das auch irgendwo im Einsatz sehen?

P.S.: Gleiche Überlegung wie im CSS Thread: du benutzt inline event handler ("onmouseover=" nehm ich mal an) anstatt das JS komplett in einer externen JS Datei abzuhandeln (eben über das DOM). Stichwort: Unobtrusive EcmaScript. ;)
Wobei es hier aber nicht wirklich ein Richtig oder Falsch gibt, im Gegensatz zum CSS. Also kein Handlungsbedarf hier, wollte es nur mal erwähnt haben.

[rotalever]

Gut. Kann man das auch irgendwo im Einsatz sehen?

P.S.: Gleiche Überlegung wie im CSS Thread: du benutzt inline event handler ("onmouseover=" nehm ich mal an) anstatt das JS komplett in einer externen JS Datei abzuhandeln (eben über das DOM). Stichwort: Unobtrusive EcmaScript. ;)
Wobei es hier aber nicht wirklich ein Richtig oder Falsch gibt, im Gegensatz zum CSS. Also kein Handlungsbedarf hier, wollte es nur mal erwähnt haben.
Ja, ich benutze onmouseover.. Wusste nicht, dass man es auch anders machen kann...
Vielleicht ist das auch der Grund, warum es nur im Firefox funktioniert? Bei IE und Opera passiert leider rein gar nix.

Hab grad keinen vernünftigen Webspace, aber man braucht ja nur 3 Dateien...
Also hab ich es mal in den Anhang gesteckt.

Änderung im JS: geht jetzt auch in Opera und ein kleiner bug beseitigt.

[DanMan]

Ja, ich benutze onmouseover.. Wusste nicht, dass man es auch anders machen kann...
Vielleicht ist das auch der Grund, warum es nur im Firefox funktioniert? Bei IE und Opera passiert leider rein gar nix.

Hab grad keinen vernünftigen Webspace, aber man braucht ja nur 3 Dateien...
Also hab ich es mal in den Anhang gesteckt.

Änderung im JS: geht jetzt auch in Opera und ein kleiner bug beseitigt.
Cool. Wie gesagt, wenns läuft und die Fehlerkonsole keine Meldungen ausspuckt gibts keinen Handlungsbedarf. Kommt mir aber vor, als wär es auch mit etwas weniger Code geglückt. Egal....

[rotalever]

Kommt mir aber vor, als wär es auch mit etwas weniger Code geglückt. Egal....
Ich muss mir ja für jeden Button merken, wie weit der z.B. schon eingeblendet ist, denn wenn er noch nicht vollständig eingeblendet ist und man mit der Maus wieder runtergeht, dann soll er ja ab diesem Zeitpunkt direkt ausblenden und nicht erst das Einblenden zu Ende bringen. Daher muss man sich für jeden Buchstaben den ganzen Kram in so einem Array merken..

Die Fehlerkonsole macht keine Fehler, es wundert mich halt nur, dass der IE irgendwie sagt "error on page" und die Links gar nicht reagieren.

[rotalever]

Irgendwann bringe ich den IE um...

Laut der MSDN, kann man bei Verwendung von setInterval & co. und Funktionspointern keine Variablen übergeben, alle anderen Browser können das natürlich :|
Also muss man das als String machen. Naja Ok, dauert halt bis man so einen Fehler findet, der Debugger vom IE ist ja auch ziemlich hilfreich.

Dann hat IE die Funktion setProperty nicht, hier muss man auf das Äquivalent in eckigen Klammern zurückgreifen.

Jetzt denkt man doch es sollte alles funktioniern? Firefox und Opera tun weiter ihren Dienst. Und wie siehtst bei IE aus? Tjoa, scheinbar kommt der mit meinen gewünschten 60fps nicht klar. Irgendwas stimmt da im Timer bei setInterval nicht => die Intervalle werden zu langsam aufgerufen aber der Timeout kommt zur richtigen Zeit, was bedeutet, dass es erst langsam größer wird und dann durch den Timeout ruckartig auf voller Größe ist. Vll. liegt das aber auch daran, dass mein IE unter Linux einfach zu langsam ist... Trotzdem ist das Müll.

[Tiamat]

Hi,
ich bin auf der Suche nach einem guten Javascript Tutorial.
Ich habe bisher nur den Einheitsbrei gefunden, der mir nicht wirklich weitergeholen hat, kann jemand ein gutes empfehlen ?
Gruß
Tiamat

[rotalever]

Hi,
ich bin auf der Suche nach einem guten Javascript Tutorial.
Ich habe bisher nur den Einheitsbrei gefunden, der mir nicht wirklich weitergeholen hat, kann jemand ein gutes empfehlen ?
Gruß
Tiamat
Also ich habe mein Script durch raten von Befehlen und Googlen erzeugt. Jedes mal wenn ich eine Funktion brauchte, die ich noch nicht kannte (und ich kann verdammt wenig javascript ;)), habe ich entweder geraten, wie sie heißen könnte, oder stundenlang gegoogelt. Sehr effizient war das natürlich bei weitem nicht. :usad:

PS: Für mein Menü hab ich übrigens noch einen "Generator" in PHP geschrieben, so dass man leicht ein solches Menü über eine Browser-GUI erstellen und anpassen kann. Werde ich wohl irgendwann mal online stellen.