[JavaScript] Bildbewegung Kombatibilität Firefox

**mheppie** · 27-02-2013, 00:43

Hallo Zusammen,

ich grübel jetzt schon ne ganze Weile, warum der Firefox mein Bild weder anzeigt, noch bewegt, während der Internet Explorer das tadellos tut.
Verschiedene Varianten habe ich nun schon ausprobiert und bin jetzt bei nachfolgendem Stand, aber irgendwas will der Firefox gar nicht.

Zum Code:
Ein Bild bewegt sich von rechts nach links und beschreibt dabei eine kleine Kurve, während es sich vergrößert. An einer bestimmten Position soll das Bild stehen bleiben.

Code:

<div id="myLayer" style="position:absolute; left:1160px; top:670px; width:32px; height:20px; z-index:9; border: 1px none #000000; display:block"><img id="avo" src="../pics/avocado.png" width="1px" height="1px"></div>


<script type="text/javascript">  

                var a = 1200; 
	  var b = 670;
	  var c = 2;
	  var ac = 10;
	  var hw = 2; 
	  var h = 0;
	  var w = 32;
       
      function wandern() 
      { 
         if ( document.all ) // für den alten MSIE 
         { 
            document.all.myLayer.style.left = a + "px"; 
            document.all.myLayer.style.top = b + "px"; 
            document.all.avo.style.height = h + "px"; 
            document.all.avo.style.width = w + "px"; 
         } 
         else if ( document.layers ) // für Netscape 
         { 
            document.myLayer.left = a + "px"; 
            document.myLayer.top = b + "px"; 
            document.avo.height = h + "px"; 
            document.avo.width = w + "px"; 
         } 
         else if ( document.getElementById ) // für moderne Browser 
         { 
            document.getElementById("myLayer").style.left = a + "px"; 
            document.getElementById("myLayer").style.top = b + "px";
            document.getElementById("avo").offsetHeight = h + "px";
            document.getElementById("avo").offsetWidth = w + "px";
         } 
          
         
		/* b = b + c;*/ 
		 a = a - ac;
		 h = h + hw;
		 w = w + hw;
		 
	     timer = window.setTimeout( 'wandern()', 50 );
		 
		 if ( a <= 680 )
		 {
		              if ( b >= 550 )
			{
			     b = b - c;
			}
		
		}
		 
		 
          
                           if ( a <= 165 )
                           { 
		 	a = 165;
                                          b = 553; 
			h = 194;
			w = 228;

 			wait(); 
   			clearTimeout(timer);
                            } 
		 
      }
</script>

Ich tippe auf eine falsche Syntax, sehe aber aktuell den Wald vor lauter Bäumen nicht.

Freue mich über jede Anregung.

LG

MHeppie

**ein schlauer** · 27-02-2013, 09:21

Zitat von mheppie

Ich tippe auf eine falsche Syntax, sehe aber aktuell den Wald vor lauter Bäumen nicht.

Dann schau doch in die Fehlerkonsole, dort werden dir Syntaxfehler angezeigt
http://forum.jswelt.de/javascript-fa...erkonsole.html (Wo finde ich die Fehlerkonsole?)

Dein Code ist aber hoffnungslos veraltet, niemand unterstützt mehr Browser der 4.Generation. Die gibt es nicht mehr in "freier Wildbahn"

**mheppie** · 27-02-2013, 09:56

Die Fehlerkonsole ist leider leer. Sonst wärs vielleicht einfacher

Meinst Du, dass diese Weiche so stören kann?

Kann erst heute abend wieder testen, nehme diesen Hinweis aber gern auf.

**ein schlauer** · 27-02-2013, 10:16

Wann rufst du denn den Code auf?

Nachtrag: bei mir funktioniert der Code im Firefox.

**mheppie** · 27-02-2013, 10:25

Ich starte das Script beim Laden der Seite.

Dass das bei Dir funktioniert, läßt mich noch mehr grübeln ...

**mheppie** · 27-02-2013, 22:18

Guten Abend,

es doch verrückt! Wenn Du mir schreibst, dass mein Script bei Dir im Firefox funktioniert, dann verstehe ich es echt nicht mehr.

Ich habe jetzt diesen Code in eine HMTL-Seite gepresst:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script type="text/javascript">  

                var a = 1200; 
	  var b = 670;
	  var c = 2;
	  var ac = 10;
	  var hw = 2; 
	  var h = 0;
	  var w = 32;
       
      function wandern() 
      { 
         if ( document.all ) // für den alten MSIE 
         { 
            document.all.myLayer.style.left = a + "px"; 
            document.all.myLayer.style.top = b + "px"; 
            document.all.avo.style.height = h + "px"; 
            document.all.avo.style.width = w + "px"; 
         } 
         else if ( document.layers ) // für Netscape 
         { 
            document.myLayer.left = a + "px"; 
            document.myLayer.top = b + "px"; 
            document.avo.height = h + "px"; 
            document.avo.width = w + "px"; 
         } 
         else if ( document.getElementById ) // für moderne Browser 
         { 
            document.getElementById("myLayer").style.left = a + "px"; 
            document.getElementById("myLayer").style.top = b + "px";
            document.getElementById("avo").offsetHeight = h + "px";
            document.getElementById("avo").offsetWidth = w + "px";
         } 
          
         
		/* b = b + c;*/ 
		 a = a - ac;
		 h = h + hw;
		 w = w + hw;
		 
	     timer = window.setTimeout( 'wandern()', 50 );
		 
		 if ( a <= 680 )
		 {
		              if ( b >= 550 )
			{
			     b = b - c;
			}
		
		}
		 
		 
          
                           if ( a <= 165 )
                           { 
		 	a = 165;
                                          b = 553; 
			h = 194;
			w = 228;

 			
   			clearTimeout(timer);
                            } 
		 
      }
</script>


</head>

<body onLoad="wandern();">

<div id="myLayer" style="position:absolute; left:1160px; top:670px; width:32px; height:20px; z-index:9; border: 1px none #000000; display:block"><img id="avo" src="avocado.png" width="1px" height="1px"></div>





</body>
</html>

Wenn ich diese Datei im IE öffne, sehe ich ein sich bewegendes Bild. Im Firefox sehe ich nichts. Die Fehlerkonsole gibt mir nichts aus.
Noch eine Idee?

**ein schlauer** · 27-02-2013, 22:26

Das Bild sehen ist relativ, da du es auf einen Pixel verkleinert hast ist es fast unsichtbar.

Nachtrag: Wobei man aber dazu sagen muss, dass die Einheit an der Stelle falsch ist, anscheinend mal wieder etwas wo der IE sich vernünftiger verhält und die Angabe ignoriert.

**mheppie** · 27-02-2013, 22:41

Vielen Dank!!!
Endlich ein Hinweis, der auf fruchtbaren boden viel.

Das Bild war tatsächlich nicht zu sehen, weil es so klein war. Das ist ja schon mal ein Ansatz.
Allerdings soll das Script das Bild während der Flugphase ja auch vergrößern. Das mag er nun wieder nicht. (nicht mit dem Script

)
IE gehts, FF nicht

(Die Einheit habe ich wegen dem Firefox hineingebaut. Normaler Weise habe ich noch mehr Grafiken auf der Seite und der Firefox hat immer über das Attribut 'height' geschimpft. und da habe ich pauschal überall die Einheiten eingebaut und der Browser war beruhigt.)

**ein schlauer** · 28-02-2013, 00:48

Zitat von mheppie

(Die Einheit habe ich wegen dem Firefox hineingebaut. Normaler Weise habe ich noch mehr Grafiken auf der Seite und der Firefox hat immer über das Attribut 'height' geschimpft. und da habe ich pauschal überall die Einheiten eingebaut und der Browser war beruhigt.)

Du hast da viel durcheinander. Das HTML Attribut height ist etwas anderes als das height Attribut von style und offsetWidth ist nur ein lesbarer Wert. Das HTML Attribut height/width darf keine Einheit haben, die style Attribute height/width/left/top müssen eine haben.

Bei dir funktoniert es, weil der IE den Code der eigentlich für den IE 4 gedacht ist ausführt. Schmeiss mal document.all und document.layers aus deinem Code raus! Es gibt keine Browser mehr, die das brauchen.

Und dann ändere die Größe über den Wert der dafür gedacht ist: style.height
wobei bei Bildern kannst du auch einfach nur height verwenden.

**mheppie** · 28-02-2013, 22:50

Hallo Schlauer,

das hat gepasst.
Dieses style.height war anfangs meine erste Wahl. Sicher waren damals noch andere Kleinigkeiten ausschlaggebend, dass der FF nicht wollte. Und so habe ich vieles genau an dieser Stelle/diesen Stellen ausprobiert. Diverse Foren schrieben dann, man muss es mit offset oder client versehen, damit es richtig funktioniert. War wohl eine Fehlinformation. Danke, dass du mir die richtige Bedeutung zu diesem Attribut erklärt hast.

Nebenbei: nur mit height/width wollte er aber auch nicht.

Es ist schon erstaunlich, was man dem IE alles vorwerfen kann und er macht trotzdem genau das, was man sich vorgestellt hat. Während des ganzen Herumprobierens liefen alle Versionen einwandfrei auf dem IE. Und ohne Fehlermeldungen in der Konsole ist man schon aufgeschmissen. Da ist es gut, wenn dann ein zweites Augenpaar aus einem anderen Winkel mal draufschaut.

Ich habe die Einheiten natürlich wieder herausgenommen. Die Weiche habe ich trotzdem gelassen. Ich bin abwärtskombatibel erzogen worden und das kriegt man nicht so leicht los

Vielen Dank nochmals.

---------

Von meiner Seite wäre dieser Thread abgeschlossen.

---------

**ein schlauer** · 28-02-2013, 23:49

Zitat von mheppie

Dieses style.height war anfangs meine erste Wahl. Sicher waren damals noch andere Kleinigkeiten ausschlaggebend, dass der FF nicht wollte. Und so habe ich vieles genau an dieser Stelle/diesen Stellen ausprobiert. Diverse Foren schrieben dann, man muss es mit offset oder client versehen, damit es richtig funktioniert. War wohl eine Fehlinformation. Danke, dass du mir die richtige Bedeutung zu diesem Attribut erklärt hast.

offsetWidth/Height brauchst du, wennn du die Maße ermitteln willst.

Zitat von mheppie

Es ist schon erstaunlich, was man dem IE alles vorwerfen kann und er macht trotzdem genau das, was man sich vorgestellt hat. Während des ganzen Herumprobierens liefen alle Versionen einwandfrei auf dem IE.

Weil du in der Weiche etwas anderes machst, als dort wo du alle anderen Browser bedienst. Du hast vorhewr halt nur dem IE den richitgen Code gegeben, allen anderen den falschen. Insofern ist es kein Leistung das er funktioniert.

Zitat von mheppie

Die Weiche habe ich trotzdem gelassen. Ich bin abwärtskombatibel erzogen worden und das kriegt man nicht so leicht los

Wie gesagt, das ist für 4'er Browser. Mit denen kannst du deine Seite vermutlich gar nicht mehr anschauen. Als ich noch den IE 4 benutzt hatte - so gegen 2002 - stürzte er bei jeder 2. Seite ab und den Netscape konntest du so gut wie gar nicht mehr benutzen, zumal er mit CSS kaum zurecht kam.

Insofern ist das vergebliche Liebesmühe und wie gesagt, es hat dazu geführt, dass du falschen Code benutzt hast. Hättest du den Code, den du im IE 4 Block verwendet hast, im DOM Block verwendet, wäre das Skript in allen Browsern gelaufen.

j-l-n · 13-09-2013, 14:25

Zitat von mheppie

Es ist schon erstaunlich, was man dem IE alles vorwerfen kann und er macht trotzdem genau das, was man sich vorgestellt hat. Während des ganzen Herumprobierens liefen alle Versionen einwandfrei auf dem IE.

Das stimmt. IE hat Probleme, aber an Stellen, an denen andere Browser scheitern, schafft er's auf einmal wieder...

Zitat von mheppie

Ich bin abwärtskombatibel erzogen worden und das kriegt man nicht so leicht los...

*schmunzel* Nicht schlecht, der Spruch

Thema: [JavaScript] Bildbewegung Kombatibilität Firefox

LinkBack

Themen-Optionen

Anzeige

[JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

AW: [JavaScript] Bildbewegung Kombatibilität Firefox

Ähnliche Themen

Navigation mit Bildbewegung/Maskierung?

Javascript und Firefox

Javascript mit firefox

Javascript mit firefox

JavaScript im FF (Firefox)

Lesezeichen

Lesezeichen

Berechtigungen

PHP Mehrdimensionales Array...

Anordnung von Boxen und...

SSL/HTTPS Node.js/Socket.io Server

SSL/HTTPS Node.js/Socket.io Server

SSL/HTTPS Node.js/Socket.io Server

PHP Mehrdimensionales Array...

Anordnung von Boxen und...