✔ Bilder bewegen lassen

[Quaese]

Hi,

wenn ich mich nicht völlig irre, kann offsetHeight erst ermittelt werden, nachdem das Element ins Dokument eingebunden wurde.

Versuch mal die Reihenfolge zu ändern:

  // Erst das Element einbinden
  bild[bilderAnzahl].innerHTML = '<a><img src=\"'+s+'\"></a>';
  // Dimension ermitteln und an style-Objekt zuweisen
  bildHoehenSumme[bilderAnzahl] = bild[bilderAnzahl].height+bildHoehenSumme[bilderAnzahl-1]; 
  bild[bilderAnzahl].style.top = bildHoehenSumme[bilderAnzahl-1]+"px";

Ciao
Quaese

 

[Pius Hermit]

T´schuldigung, das hatte ich schon geändert:

	var laufBalkenHoehe = 600;
	var laufBalkenBreite = 157;
	var schrittWeite = 1; 
	var bildHintergrund = "#000000";
	var bilderAnzahl = 0; 
	var bild = new Array();
	var bildHoehenSumme = new Array();
	bildHoehenSumme[0] = 0;
	bildHoehenSumme[1] = 157;
	var geschwindigkeit = schrittWeite;
	
	
	function pushBildOben(s) {
		bilderAnzahl++;
		bild[bilderAnzahl] = document.getElementById("Bild"+bilderAnzahl);
		bild[bilderAnzahl].style.top = bildHoehenSumme[bilderAnzahl-1]+"px";
		bild[bilderAnzahl].innerHTML = '<a><img src=\"'+s+'\"></a>';
		bildHoehenSumme[bilderAnzahl] = bild[bilderAnzahl].offsetHeight+bildHoehenSumme[bilderAnzahl-1]; 
	}

Das Problem mit dem Firefox besteht aber weiterhin...?

 

[Quaese]

Hi,

hast du dir mal meine Reihenfolge angesehen? Habs damit gerade mal getestet und es scheint zu funktionieren.

Ciao
Quaese

 

[Pius Hermit]

Ach ja, Du hast vollkommen Recht:

1:   bild[bilderAnzahl].style.top = bildHoehenSumme[bilderAnzahl-1]+"px";
2:   bild[bilderAnzahl].innerHTML = '<a><img src=\"'+s+'\"></a>';

2: überschreibt 1: :-(

Da es sich aber nur um eine vorübergehende Version handelt, bin ich
nun schon einen Schritt weitergegangen, und möchte auch die <img>
dynamisch erzeugen:

	var laufBalkenHoehe = 600;
	var laufBalkenBreite = 157;
	var xAbstand = 200;
	var schrittWeite = 1; 
	var bildHintergrund = "#000000";
	var bilderAnzahl = 0; 
	var bild = new Array();
	var bildHoehenSumme = new Array();
	bildHoehenSumme[0] = 0;
	var geschwindigkeit = schrittWeite;
	
	
	function pushBildOben(s) {
		var tagText = "";
		bilderAnzahl++;
		tagText = tagText + "<img ";
		tagText = tagText + "id =  \"bild"+bilderAnzahl+"\" ";
		tagText = tagText + "src=  \""+s+"\" ";
		tagText = tagText + "style=\"position:absolute;";
		tagText = tagText + "        left:"+xAbstand+"px;";
		tagText = tagText + "        top:"+bildHoehenSumme[bilderAnzahl-1]+"px;\">";
		tagText = tagText + "<\/img>";
		bild[bilderAnzahl] = document.createElement(tagText);
		document.getElementsByTagName('body')[0].appendChild(bild[bilderAnzahl]);
		bildHoehenSumme[bilderAnzahl] = bild[bilderAnzahl].height+bildHoehenSumme[bilderAnzahl-1]; 
	}
	
	function popBildUnten(i) {
		bilderAnzahl--;
	}

	function starteLaufBalken() {
		pushBildOben('xHuhn.gif');	
		pushBildOben('xHuhn.gif');	
		pushBildOben('xHuhn.gif');	
	}

Wieder ein Problem mit Firefox! Es wird überhaupt Nichts angezeigt!
Der IE funktioniert prima, aber ich wüsste auch nicht, welche Befehle ich
verwendet hätte, die von Mozilla nicht erkannt würden?

p.s.: Vielen Dank übrigens, Quaese!

Nachtrag: Laut ErrorConsole liegt der Fehler an einem illegalen Zeichen im String...

		tagText = tagText + "<img ";
		tagText = tagText + "id =  \"bild"+bilderAnzahl+"\" ";
		tagText = tagText + "src=  \""+s+"\" ";
		tagText = tagText + "style=\"position:absolute;";
		tagText = tagText + "        left:"+xAbstand+"px;";
		tagText = tagText + "        top:"+bildHoehenSumme[bilderAnzahl-1]+"px;\">";
		tagText = tagText + "<\/img>";
		bild[bilderAnzahl] = document.createElement(tagText);

Laut Zeilenangebe ist "tagText" nicht korrekt

Nachtrag2:
Habe inzwischen eine Version ausprobiert, die im IE spitzenmäßig läuft, im Mozilla wohl nur noch 2 Fehler hat:

1:	function pushBildUnten(s) {
2:		var tagText = "";
3:		bilderAnzahl++;
4:		bild[bilderAnzahl] = document.createElement("img");
5:		bild[bilderAnzahl].id = "bild"+bilderAnzahl;
6:		bild[bilderAnzahl].src = s;
7:		bild[bilderAnzahl].style.position = "absolute";
8:		bild[bilderAnzahl].style.left = xAbstand;
9:		bild[bilderAnzahl].style.top = bildHoehenSumme[bilderAnzahl-1];
10:		document.getElementsByTagName("body")[0].appendChild(bild[bilderAnzahl]);
11:		bildHoehenSumme[bilderAnzahl] = bild[bilderAnzahl].height+bildHoehenSumme[bilderAnzahl-1]; 
12:	}

Offenbar hat der Firefox mit den Zeilen 8: und 9: Schwierigkeiten....Es werden/wird ein Bild an der Stelle (0;0) angezeigt. Im IE klappt es dagegen...

 

[Quaese]

Hi,

gib mal die Einheiten mit an.

bild[bilderAnzahl].style.left = xAbstand + "px";
bild[bilderAnzahl].style.top = bildHoehenSumme[bilderAnzahl-1] + "px";

Ciao
Quaese

 

[Pius Hermit]

Super, bin ich gerade vor 2 Minuten auch drauf gekommen!
Aber dennoch vielen Dank für die Hilfe!
Die jetzige Version funktioniert nun, ich hatte allerdings Schwierigkeiten mit
"APTANA": die Browser werden (zumindest Firefox) nicht korrekt umgesetzt.
Vielen Dank noch einmal!
Ich schließe das Thema, sobald die letzte Version erreicht ist. Vielleicht schaffe ich das noch dieses Wochenende.

Nachtrag: Obwohl es nicht direkt zum Thema gehört, ist mir bei der Entwicklung des vertikalen Laufbalkens, die fast abgeschlossen ist,
ein Problem unterlaufen:
Sowohl Mozilla, als auch IE7 zeigen perfekte Ergebnisse, wenn ich auf "Seite aktualisieren" beim Browser klicke,
vorher gibt es jedoch viel Müll: Merkt sich der Browser vielleicht, welche Daten beim letzten Schließen aktuell waren? *zweifel*
Ein Initialisierungsproblem kann es IMO eigentlich nicht sein. Ich bin nun ziemlich ratlos, da die Browser in APTANA auch nur Müll anzeigen!
Den timer habe ich auch beim "onunload" per "clearInterval" zurückgesetzt. An XP Prof wird es wohl auch nicht liegen...
Hat jemand soetwas schon einmal auch erlebt?

Nachtrag 2 (14.12.08):
Habe alle Probleme in diesem Zusammenhang gelöst!
Ich weiß nicht mehr wie (habe dieses Wochenende ca. 30 Stunden programmiert!), aber es klappt.
Grobes Konzept:
Eine "push"- und "pop"-Methode für die Queue der Einzelbilder.
Verläßt ein Bild den sichtbaren Bereich, so zündet "pop",
droht eine Lücke im sichtbaren Bereich, so zündet "push".
Der sichtbare Bereich wird durch "div"´s mit entsprechender Farbe des Hintergrundes und höherem z-Index eingegrenzt.
Vielen Dank noch Euch Allen,
bis bald,
Ulrich