Parallele Infoticker - Problem mit this

[Enibas]

Hallo,

ich stehe gerade ziemlich auf dem Schlauch. So ganz durchschaue ich das Konstrukt this.* immer noch nicht.

Mein Problem: Zwei verschiedene Infoticker (sliding div), die in unterschiedliche Richtungen "scrollen", sollen auf einer Seite eingebaut werden. (Ob das eine gute Idee ist, sei mal dahingestellt.) Dazu habe ich ein Script für einen browser-übergreifenden Ticker von Wolfgang Schwarz benutzt, die Funktionen dupliziert und Eigenschaften umbenannt. Allerdings behindern sich die verschiedenen Instanzen offensichtlich gegenseitig. Kommentiert man alle Anweisungen des einen Tickers aus, funktioniert der jeweils andere ohne Probleme. Beide gleichzeitig gehen nicht. Die Bewegung des divs wird teilweise an merkwürdigen, nicht nachzuvollziehenden Stellen abgebrochen.

Deshalb suche ich nach einer Möglichkeit, wenigstens bei einem der beiden Infoticker alle über this.* definierten Eigenschaften zu ersetzen. Geht das überhaupt? Und wenn ja, wie? Könnt Ihr mir helfen?

Gruß und danke,
Sabine

...
userAgent = navigator.userAgent.toLowerCase();
n4 = document.layers;
ie = (document.all && userAgent.indexOf("mac")<0);
w3c = document.documentElement;
dhtml = ((n4 || ie || w3c) &&  userAgent.indexOf("aol")<0);

function Ticker(name, parentId, id, hoehe){
     this.name = name;
     this.hoehe = hoehe;
     this.el_r = n4? document.layers[parentId] : ie? document.all[id] : document.getElementById(id);
     this.el = n4? document.layers[parentId].document.layers[id] : ie? document.all[id] : document.getElementById(id);
     this.css_r = n4? this.el_r : this.el_r.style;
     this.css = n4? this.el : this.el.style;
     this.inhaltHoehe = n4? this.el.document.height : this.el.offsetHeight;
     this.inhaltY = 106;
     this.speed = 1;
     this.hoch = TickerHoch;
     this.stop = TickerStop;
}

function TickerHoch() {
 this.stop();
 this.timer = setTimeout(this.name+".hoch()", 25);
 if (this.inhaltY>-this.inhaltHoehe)
  {
  if (this.inhaltY==15)
   {
   this.stop();
   this.timer = setTimeout(this.name+".hoch()", 3000)
   }
  n4? this.css.visibility = "show" : this.css.visibility = "visible";
  n4? this.css_r.visibility = "show" : this.css_r.visibility = "visible";
  this.inhaltY -= this.speed;
  this.css.top = this.inhaltY;
  }
 else
  {
  n4? this.css.visibility = "hide" : this.css.visibility = "hidden";
  n4? this.css_r.visibility = "hide" : this.css_r.visibility = "hidden";
  this.inhaltY = this.hoehe;
  this.stop();
  init();
  }
}

function TickerStop() {
     if (this.timer) clearTimeout(this.timer);
}

z_ticker=-1;

function init(){
 if (!dhtml) return;
 if (z_ticker<<?php echo $new_count-1 ?>) { z_ticker++; }
 else { z_ticker=0 }
 einTicker = new Ticker("einTicker", "tickerDiv"+z_ticker, "tickerText"+z_ticker, 106);
 einTicker.hoch();
}

[Andreas]

hallo!

bei javascript bezieht sich 'this' immer auf das aufrufende objekt.

function test()
{
   alert(this.testvalue);
}

var testvalue = 'testwert';
test();             // testvalue bezieht sich auf window-objekt ('testwert')
testobjekt.test();  // testvalue bezieht sich auf testobjekt (undefined)

unnötig zu erwähnen, dass hier noch kein 'testobjekt' erzeugt wurde :)

http://aktuell.de.selfhtml.org/artikel/javascript/oomodell/index.htm#einleitung

/andreas

[Enibas]

Hallo Andreas,

das habe ich nun schon ein paar Mal gelesen. Aber ich verstehe es immer noch nicht wirklich. Jedenfalls kann ich das nicht auf mein Problem anwenden.
Trotzdem danke.

Gruß, Sabine

[Andreas Dölling]

Hallo,

function init(){
if (!dhtml) return;
if (z_ticker<<?php echo $new_count-1 ?>) { z_ticker++; }
else { z_ticker=0 }
einTicker = new Ticker("einTicker", "tickerDiv"+z_ticker, "tickerText"+z_ticker, 106);
einTicker.hoch();
}

nach einem schnellen Blick auf den Code fällt mir auf, daß Du nur ein Ticker-Objekt erzeugst, obwohl Du doch gerne zwei Ticker haben möchtest:
einTicker = new Ticker(...)

Ich vermisse so etwas wie:
einZweiterTicker = new Ticker(...);
einZweiterTicker.hoch();

Ciao,
Andreas

[Enibas]

Hallo Andreas,

ja klar, Du hast Recht. Ich hatte nur den Code für einen Ticker gepostet, weil es mir eigentlich darum ging, die this.* Konstrukte irgendwie umzuschreiben. Den vollständigen Code für zwei Ticker findest Du unten. Ich habe allerdings sämtliche Funktionen dupliziert. Ist bestimmt viel zu umständlich, aber einfach mit einZweiterTicker.* geht es nicht, weil sich die beiden in unterschiedliche Richtungen mit unterschiedlichen Parametern (z.B. speed) bewegen sollten.

Inzwischen läuft es immerhin, nachdem ich die init-Funktion auch noch geteilt habe. Das scheint der Fehler gewesen zu sein. Aber das Ganze verhält sich noch sehr komisch. Wenn ich speed_a für Angebot erhöhe, wird dieser Ticker (Angebot) gleich gar nicht mehr angezeigt.

Gruß, Sabine

userAgent = navigator.userAgent.toLowerCase();
n4 = document.layers;
ie = (document.all && userAgent.indexOf("mac")<0);
w3c = document.documentElement;
dhtml = ((n4 || ie || w3c) &&  userAgent.indexOf("aol")<0);

function Ticker(name, parentId, id, hoehe){
     this.name_t = name;
     this.hoehe = hoehe;
     this.el_r_t = n4? document.layers[parentId] : ie? document.all[id] : document.getElementById(id);
     this.el_t = n4? document.layers[parentId].document.layers[id] : ie? document.all[id] : document.getElementById(id);
     this.css_r_t = n4? this.el_r_t : this.el_r_t.style;
     this.css_t = n4? this.el_t : this.el_t.style;
     this.inhaltHoehe = n4? this.el_t.document.height : this.el_t.offsetHeight;
     this.inhaltY = 106;
     this.speed_t = 1;
     this.hoch = TickerHoch;
     this.stop_t = TickerStop;
}

function Angebot(name, parentId, id, breite){
     this.name_a = name;
     this.breite = breite;
     this.el_r_a = n4? document.layers[parentId] : ie? document.all[id] : document.getElementById(id);
     this.el_a = n4? document.layers[parentId].document.layers[id] : ie? document.all[id] : document.getElementById(id);
     this.css_r_a = n4? this.el_r_a : this.el_r_a.style;
     this.css_a = n4? this.el_a : this.el_a.style;
     this.inhaltBreite = n4? this.el_a.document.width : this.el_a.offsetWidth;
     this.inhaltX = 146;
     this.speed_a = 1;
     this.breit = AngebotLinks;
     this.stop_a = AngebotStop;
}

function TickerHoch() {
 this.stop_t();
 this.timer_t = setTimeout(this.name_t+".hoch()", 25);
 if (this.inhaltY>-this.inhaltHoehe)
  {
  if (this.inhaltY==15)
   {
   this.stop_t();
   this.timer_t = setTimeout(this.name_t+".hoch()", 3000)
   }
  n4? this.css_t.visibility = "show" : this.css_t.visibility = "visible";
  n4? this.css_r_t.visibility = "show" : this.css_r_t.visibility = "visible";
  this.inhaltY -= this.speed_t;
  this.css_t.top = this.inhaltY;
  }
 else
  {
  n4? this.css_t.visibility = "hide" : this.css_t.visibility = "hidden";
  n4? this.css_r_t.visibility = "hide" : this.css_r_t.visibility = "hidden";
  this.inhaltY = this.hoehe;
  this.stop_t();
  init_t();
  }
}

function AngebotLinks() {
 this.stop_a();
 this.timer_a = setTimeout(this.name_a+".breit()", 1);
 if (this.inhaltX>-this.inhaltBreite)
  {
  if (this.inhaltX==0)
   {
   this.stop_a();
   this.timer_a= setTimeout(this.name_a+".breit()", 3000)
   }
  n4? this.css_a.visibility = "show" : this.css_a.visibility = "visible";
  n4? this.css_r_a.visibility = "show" : this.css_r_a.visibility = "visible";
  this.inhaltX -= this.speed_a;
  this.css_a.left = this.inhaltX;
  }
 else
  {
  n4? this.css_a.visibility = "hide" : this.css_a.visibility = "hidden";
  n4? this.css_r_a.visibility = "hide" : this.css_r_a.visibility = "hidden";
  this.inhaltX = this.breite;
  this.stop_a();
  init_a();
  }
}

function TickerStop() {
     if (this.timer_t) clearTimeout(this.timer_t);
}

function AngebotStop() {
     if (this.timer_a) clearTimeout(this.timer_a);
}

z_angebot=-1; // Anzeige beginnt mit Angebot 0
z_ticker=-1;

function init_a(){
 if (!dhtml) return;
 if (z_angebot<5) { z_angebot++; }
 else { z_angebot=0 }
 einAngebot = new Angebot("einAngebot", "angebotDiv"+z_angebot, "angebotText"+z_angebot, 146);
 einAngebot.breit();
}
function init_t(){
 if (!dhtml) return;
 if (z_ticker<10) { z_ticker++; }
 else { z_ticker=0 }
 einTicker = new Ticker("einTicker", "tickerDiv"+z_ticker, "tickerText"+z_ticker, 106);
 einTicker.hoch();
}

[Andreas Dölling]

Hallo,

sorry, daß ich erst jetzt wieder antworte und Dir leider auch nicht detailliert helfen kann - ich sitze halt im Büro.
Ich gebe Dir aber den Tipp, Dir ruhig die Zeit zu nehmen, Dich ein bißchen mit Objektorientierung in Javascript zu befassen.
Dann verstehst Du auch die Bedeutung und Funktionsweise des Schlüsselwortes this.
Und: Dir wird sicher eine elegantere Lösung einfallen, zwei Tickerobjekte zu erzeugen, die in unterschiedliche Richtungen laufen. Dafür alle Methoden zu duplizieren, ist jedenfalls völlig überflüssig.

Hier ein paar Link-Tipps:
http://de.selfhtml.org/javascript/sprache/objekte.htm
http://www.kevlindev.com/tutorials/javascript/inheritance/
http://phrogz.net/JS/Classes/OOPinJS.html

Ciao,
Andreas