Animation vor Ablauf der Zeit per onclick starten

[Malan]

Hallo

folegendes Script startet nach 10sek.

  
var pixel = 48;  
  
function startAnimation() {  
 starte = window.setInterval("animation()", 20);  
}  
  
function animation() {  
 var elem = document.getElementById("ani").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 1;  
  
 if ( pixel == 232 ) {  
  clearInterval(starte);  
 }  
}  
  
window.onload = function() { neu = window.setTimeout("startAnimation()", 10000) }; 

Nun will ich dem User auch die Möglichkeit geben früher die Animation zu starten. Ich habe das eingestezt.

  
<a href="" onclick="startAnimation()">Klick</a>

Leider funktioniert das nicht ganz so. Es springt nur ein Stk. nach oben und geht wieder in die Ausgangsposition.

Was mache ich da falsch

lG

[Struppi]

Leider funktioniert das nicht ganz so. Es springt nur ein Stk. nach oben und geht wieder in die Ausgangsposition.

und? mal einen Blick in die Fehlerkonsole geworfen?

Struppi.

[wucher wichtel]

Hallo!

  
var clicked = false; // speichert, ob die Animation schon gestartet  
                     // wurde.  
  
document.getElementById("menu").onclick = function() { startAnimation(); clicked = true; }  
                                    // startet bei onclick die Funktion  
                                    // und speichert, dass die Animation  
                                    // gestartet wurde  
window.onload = function() { checkClicked() };  
  
function checkClicked() {  
 if( clicked == false ) { // wenn nicht geklickt, dann...  
  neu = window.setTimeout("startAnimation()", 10000)  
 }  
 else{  
  alert("Menü schon ausgefahren");  
 }  
}  

ciao, ww

[Malan]

Hallo

Die beiden scripte müssen doch zusammen oder?

  
 var pixel = 48;  
  
function startAnimation() {  
 starte = window.setInterval("animation()", 20);  
}  
  
function animation() {  
 var elem = document.getElementById("ani").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 1;  
  
 if ( pixel == 232 ) {  
  clearInterval(starte);  
 }  
}  
  
  
var clicked = false; // speichert, ob die Animation schon gestartet  
                     // wurde.  
  
document.getElementById("ani").onclick = function() { startAnimation(); clicked = true; }  
                                    // startet bei onclick die Funktion  
                                    // und speichert, dass die Animation  
                                    // gestartet wurde  
window.onload = function() { checkClicked() };  
  
function checkClicked() {  
 if( clicked == false ) { // wenn nicht geklickt, dann...  
  neu = window.setTimeout("startAnimation()", 10000)  
 }  
 else{  
  alert("Menü schon ausgefahren");  
 }  
}

Es springt immer noch und er meldet Fehler in der Zeile // startet bei onclick die Funktion

Animation geht nur noch im IE :(

[wucher wichtel]

Hallo!

document.getElementById("ani").onclick = function() { startAnimation(); clicked = true; };
                                    // startet bei onclick die Funktion

Es springt immer noch und er meldet Fehler in der Zeile // startet bei onclick die Funktion

Stimmt. Da ist der Strichpunkt verloren gegangen. Jetzt stimmts. Wenn es jetzt immer noch nicht klappt, dann verlinke mal bitte auf deine Testseite.

ciao, ww

[Malan]

Hallo Leider keine änderung :/

http://ferien.code-malan.com/neu

JS http://ferien.code-malan.com/neu/rysen.js

Vielen dank

Malan

[Struppi]

http://ferien.code-malan.com/neu

Schau mal in die Fehlerkonsole.

Struppi.

[Malan]

http://ferien.code-malan.com/neu

Schau mal in die Fehlerkonsole.

Ja leider sagt mir der Fehler garnichts? :/

Malan

Struppi.

[Genie]

Hi

Ja leider sagt mir der Fehler garnichts? :/

Du uns auch nicht

mfg
Genie

[wucher wichtel]

Hallo!

Schreib das JavaScript hinter das Element mit der ID "ani". Der Browser muss zuerst das Element mit der ID ("ani") rendern, bevor JavaScript einen Zugriff darauf haben kann. Außerdem solltest du wirklich darauf achten, dass dein CSS fehlerfrei ist. Die Fehlerkonsole platzt ja schier.

ciao, ww

[Malan]

Hallo

Ok nun fährt sie per klick aus aber geht nach 10 sek wieder in Ausgangsstellung und dann kommt der selbe Fehler :/

Ähm keine Ahnung wieso da soviele Fehler drin sind aber das sind nicht meine CSS Dateien die kommen von strato!

lG

[wucher wichtel]

Hallo!

Ok nun fährt sie per klick aus aber geht nach 10 sek wieder in Ausgangsstellung und dann kommt der selbe Fehler :/

Ich sehe hier keinen Unterschied zu vorher.

Ähm keine Ahnung wieso da soviele Fehler drin sind aber das sind nicht meine CSS Dateien die kommen von strato!

Ich meine diese Datei: http://ferien.code-malan.com/neu/css/rysen.css. Ich könnte wetten, dass die Datei von dir ist und nicht von Strato. Und wenn doch, dann wechsel sofort deinen Anbieter :)

ciao, ww

[Malan]

Hallo!

Ok nun fährt sie per klick aus aber geht nach 10 sek wieder in Ausgangsstellung und dann kommt der selbe Fehler :/

Ich sehe hier keinen Unterschied zu vorher.

Sorry da wa ich wohl etwas zu voreilig :( Nun ist es zu sehen! FF geht es garnicht springt nur 1 px hoch! IE Macht was er will :)

lG Malan

Ähm keine Ahnung wieso da soviele Fehler drin sind aber das sind nicht meine CSS Dateien die kommen von strato!

Ich meine diese Datei: http://ferien.code-malan.com/neu/css/rysen.css. Ich könnte wetten, dass die Datei von dir ist und nicht von Strato. Und wenn doch, dann wechsel sofort deinen Anbieter :)

das ist meine :) Schau da noch mal drüber :)

ciao, ww

[wucher wichtel]

Hallo!

Ich hab den Quellcode von ihm genommen und überprüft. Einen kleinen Fehler war drin (auf jeden Fall kleiner als bei meinem ;-)), aber so funktioniert's:

  
var pixel = 48;  
var gestartet = false;  
function startAnimation()  
{  
 if(!gestartet)  
 {  
  ani = window.setInterval("animation()", 20);  
  gestartet = true;  
 }  
}  
  
function animation()  
{  
 var elem = document.getElementById("ani").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 1;  
 if ( pixel == 232 ) {  
 clearInterval(ani);  
 }  
}  
  
window.onload = function() { neu = window.setTimeout("startAnimation()", 3000) };  

Bin heute zu sehr in den Welten von MySQL und PHP :)

ciao, ww

[Malan]

Hallo!

Ich hab den Quellcode von ihm genommen und überprüft. Einen kleinen Fehler war drin (auf jeden Fall kleiner als bei meinem ;-)), aber so funktioniert's:

Leider nein es springt immer noch 20 Pixel nach oben und geht in die Ausgangstellung.

Aber die Fehlerkonsole gibt nun kein scriptfehler aus.

Malan

var pixel = 48;
var gestartet = false;
function startAnimation()
{
if(!gestartet)
{
  ani = window.setInterval("animation()", 20);
  gestartet = true;
}
}

function animation()
{
var elem = document.getElementById("ani").style;
elem.height = pixel + "px";
pixel = pixel + 1;
if ( pixel == 232 ) {
clearInterval(ani);
}
}

window.onload = function() { neu = window.setTimeout("startAnimation()", 3000) };

> Bin heute zu sehr in den Welten von MySQL und PHP :)  
>   
> ciao, ww

[wucher wichtel]

Hallo!

Bitte zitiere sinnvoll und poste nicht den ganzen Text deines Vorgängers.

Leider nein es springt immer noch 20 Pixel nach oben und geht in die Ausgangstellung.

Mit welchem Browser hast du getestet? Im Firefox läuft es. Im IE nicht. Warum weiß kein Mensch. Anscheinend mag er

  
  ani = window.setInterval("animation()", 20);  

nicht. Warum das so ist, muss dir jemand anderes sagen. Das weiß ich nicht.

ciao, ww

[Malan]

Mit welchem Browser hast du getestet? Im Firefox läuft es. Im IE nicht. Warum weiß kein Mensch. Anscheinend mag er

ani = window.setInterval("animation()", 20);

> nicht. Warum das so ist, muss dir jemand anderes sagen. Das weiß ich nicht.  
  
Ich habe es auch mit IE und FF getestet und es läuft auch im FF nicht sondern springt nur! Aber wenn es eh nicht im IE läuft lass ich es lieber raus denn das verwirrt sonst wenn im IE ein Link ist der nicht geht! Schade eigentlich  
  
Malan

[Genie]

Hi

Wenn setInterval nicht klappt, vielleicht macht es dann ein setTimeout

  
var pixel = 48;  
var gestartet = false;  
function startAnimation()  
{  
 if(!gestartet)  
 {  
  window.stopTimeout(ani);  
  ani = window.setTimeout("animation()", 20);  
  gestartet = true;  
 }  
}  
  
function animation()  
{  
 var elem = document.getElementById("ani").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 1;  
 if ( pixel < 232 ) {  
  ani = window.setTimeout("animation()", 20);  
 }  
}  
  
window.onload = function() { ani = window.setInterval("startAnimation()", 10000) };  
  

mfg
Genie

[Malan]

Hallo

Da passiert nun garnix mehr werder bei Klick noch per Zeit! Komische Sache

lG Malan

[Genie]

Hi

Ungetestet:

  
var pixel = 48;  
var gestartet = false;  
function startAnimation()  
{  
 if(!gestartet)  
 {  
  animation = window.setInterval("animation()", 20);  
  gestartet = true;  
 }  
}  
  
function animation()  
{  
 var elem = document.getElementById("ani").style;  
 elem.height = pixel + "px";  
 pixel = pixel + 1;  
 if ( pixel == 232 ) {  
 clearInterval(animation);  
 }  
}  
  
window.onload = function() { neu = window.setTimeout("startAnimation()", 10000) }; 

[/code]

  
<a href="" onclick="startAnimation()">Klick</a>

mfg
Genie