sqoo: firefox+javascript+doctype=>problem

SELF-Forum

firefox+javascript+doctype=>problem

sqoo
– Informationen zu den Bewertungsregeln

ich möchte/muss einen weihnachtlichen mausschweif auf eine seite zaubern, habe ein entsprechendes script im internet gefunden und eingebaut. funktioniert im ie jedoch nicht in firefox, mit oben eingesetztem doctype. könnt ihr mir weiterhelfen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mausschweif</title>
<script type="text/javascript">
var y = 0;  //Die Koordinaten des ersten Quadrats des Schweifs
var x = 0;
ie = (document.all != null);  //Browsererkennung

function Mouse(e) {
  y = (ie) ? event.y + 4 : e.pageY + 4;
  x = (ie) ? event.x + 1 : e.pageX + 1;
}

document.onmousemove = Mouse;

function animate() {
  for (i = 1; i < 10; i++) {
    var temp1 = document.getElementById("dots" + i).style;
    var temp2 = document.getElementById("dots" + (i + 1)).style;
    temp1.top = parseInt(temp2.top);
    temp1.left = parseInt(temp2.left);
  }
  document.getElementById("dots10").style.top = y+ "px";
  document.getElementById("dots10").style.left = x+ "px";
  setTimeout("animate()", 10);
}

// -->
</script>
</head>
<body onload='setTimeout("animate()", 10);'>
<div id="dots1" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern04.gif"></div>
<div id="dots2" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern04.gif"></div>
<div id="dots3" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern04.gif"></div>
<div id="dots4" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern03.gif"></div>
<div id="dots5" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern03.gif"></div>
<div id="dots6" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern03.gif"></div>
<div id="dots7" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern02.gif"></div>
<div id="dots8" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern02.gif"></div>
<div id="dots9" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern01.gif"></div>
<div id="dots10" style="position:absolute;top:0px;left:0px;"><img src="sterne/stern01.gif"></div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. firefox+javascript+doctype=>problem

    Bork von Cork
    – Informationen zu den Bewertungsregeln

    function animate() {
      for (i = 1; i < 10; i++) {
        var temp1 = document.getElementById("dots" + i).style;
        var temp2 = document.getElementById("dots" + (i + 1)).style;
        temp1.top = parseInt(temp2.top);
        temp1.left = parseInt(temp2.left);
      }
      document.getElementById("dots10").style.top = y+ "px";
      document.getElementById("dots10").style.left = x+ "px";
      setTimeout("animate()", 10);
    }

    funktioniert im ie jedoch nicht in firefox

    Schalte beim Firefox im Menü Extras die Javascript-Konsole ein, Du erhältst dort die Fehlermeldung. Konkret stört er sich an einem Wert für top und left, gibt als Ort nur dummerweise "Zeile 0" an.
    Der Fehler kann aber nur in den vier Zeilen liegen, in denen Du mit top und left hantierst. Wirfst Du in die for-Schleife ein alert(temp2.top);, wirst Du feststellen, dass das Problem auftritt, sobald der Wert ungleich Null ist.

    Mit etwas Glück hast Du irgendwann eine göttliche Eingebung und Dir fällt auf, dass Du dots10 immer 'y + "px"' zuweist, temp1.top aber nur eine Zahl (jene aus parseInt()), ohne Einheit.
    Und da liegt dann auch der Hund begraben: Bei einer Zuweisung à la 'top = 123' fragt sich der Browser "Was '123', Pixel, Punkt, Zentimeter, Hühner, Kartoffeln?". Es fehlt schlicht die Maßeinheit.

    Dass es mit 0 auch ohne Einheit funktioniert, liegt in der Besonderheit des Wertes 0. Die Definition dazu findest Du im CSS2-Standard, Abschnitt 4.3.2. Speziell zur 0 steht dort "After the '0' length, the unit identifier is optional."

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. firefox+javascript+doctype=>problem

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hello out there!

    ie = (document.all != null);  //Browsererkennung
    function Mouse(e) {
      y = (ie) ? event.y + 4 : e.pageY + 4;
      x = (ie) ? event.x + 1 : e.pageX + 1;
    }

    Sehr abenteuerlicher Versuch! Dich interessiert nicht die Bohne, was ein Browser von 'document.all' hält, sondern was er von 'window.event.x' bzw. 'e.pageX' hält. Eben _dieses_ ist abzufragen; nicht etwas völlig anderes und hoffen, dass es da irgendeinen Zusammenhang gäbe. Solch ein Versuch einer Browserweiche ist zum Scheitern verurteilt.

    Also weg mit der unnützen Zeile
    ie = (document.all != null); //Browsererkennung

    und deine Funktion sieht dann so aus:

    function Mouse(e) {  
  y = (window.event) ? window.event.y + 4 : e.pageY + 4;  
  x = (window.event) ? window.event.x + 1 : e.pageX + 1;  
}

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln