Doctype zerstört Javascript ?!?

[Arcteryx]

Hallo Leute,

ich komme nicht weiter, ich habe mir einen Tooltip zusammengeschustert, der hat auch wunderbar funktioniert...nur wenn ich jetzt ein Doctype festlege, reagiert der Tooltip anders. Sprich es wird nicht mehr an der richtigen Stelle dargestellt. Im FF folgt er zwar der Maus, liegt jedoch ganz oben am Browserrand, bei y=0px. Im IE ändert sich der y-Wert je nachdem, wo man gerade hinscrollt. Kann mir jemand helfen bzw. mir sagen, wo der Fehler liegt? Vielen Dank!

Hier mein Javascript:

var OP = (navigator.userAgent.indexOf('Opera') != -1) ? true : false;
  var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP) ? true : false;
  var GK = (navigator.userAgent.indexOf('Gecko') != -1) ? true : false;
  var NN4 = document.layers;
  var DOM = document.getElementById;

function TOOLTIP() {

this.width = 150;                     // width (pixels)
    this.bgColor = '#FFFFFF';             // background color
    this.textColor = '#2f2f2f';           // text color
    this.borderColor = '#5d5d5d';         // border color
    this.opacity = 100;                    // opacity (percent) - doesn't work with all browsers
    this.cursorDistance = -70;              // distance from cursor (pixels)

// don't change
    this.text = '';
    this.height = 0;
    this.obj = 0;
    this.sobj = 0;
    this.active = false;

this.create = function() {
      if(!this.sobj) this.init();

var t = '<div id="datumhover">' + this.text + '</div>';

if(NN4) {
        t = '<div id="datumhover">' + this.text + '</div>';
        this.sobj.document.write(t);
        this.sobj.document.close();
      }
      else {
        this.sobj.border = '0px' + this.borderColor;
        this.setOpacity();
        if(document.getElementById) document.getElementById('ToolTip').innerHTML = t;
        else document.all.ToolTip.innerHTML = t;
      }
      if(DOM) this.height = this.obj.offsetHeight;
      else if(IE) this.height = this.sobj.pixelHeight;
      else if(NN4) this.height = this.obj.clip.bottom;

this.show();
    }

this.init = function() {
      if(DOM) {
        this.obj = document.getElementById('ToolTip');
        this.sobj = this.obj.style;
      }
      else if(IE) {
        this.obj = document.all.ToolTip;
        this.sobj = this.obj.style;
      }
      else if(NN4) {
        this.obj = document.ToolTip;
        this.sobj = this.obj;
      }
    }

this.show = function() {
      var ext = (document.layers ? '' : 'px');
      var left = mouseX;
      var top = mouseY;

if(left + this.width + this.cursorDistance > winX) left -= this.width + this.cursorDistance;
      else left += this.cursorDistance;

if(top + this.height + this.cursorDistance - scrTop > winY) top -= this.height;
      else top += this.cursorDistance;

this.sobj.left = left + ext;
      this.sobj.top = top + 35;

if(!this.active) {
        this.sobj.visibility = 'visible';
        this.active = true;
      }
    }

this.hide = function() {
      if(this.sobj) this.sobj.visibility = 'hidden';
      this.active = false;
    }

this.setOpacity = function() {
      this.sobj.filter = 'alpha(opacity=' + this.opacity + ')';
      this.sobj.mozOpacity = '.1';
      if(this.obj.filters) this.obj.filters.alpha.opacity = this.opacity;
      if(!document.all && this.sobj.setProperty) this.sobj.setProperty('-moz-opacity', this.opacity / 100, '');
    }
  }

var tooltip = mouseX = mouseY = winX = winY = scrTop = 0;

if(document.layers) {
    document.write('<layer id="ToolTip"></layer>');
    document.captureEvents(Event.MOUSEMOVE);
  }
  else document.write('<div id="ToolTip" style="position:absolute; z-index:69;"></div>');
  document.onmousemove = getMouseXY;

function getMouseXY(e) {
    if(document.body && document.body.scrollTop >= 0) scrTop = document.body.scrollTop;
    else if(window.pageYOffset >= 0) scrTop = window.pageYOffset;

if(IE) {
      mouseX = event.clientX + document.body.scrollLeft;
      mouseY = event.clientY + document.body.scrollTop;
    }
    else {
      mouseX = e.pageX;
      mouseY = e.pageY;
    }

if(mouseX < 0) mouseX = 0;
    if(mouseY < 0) mouseY = 0;

if(GK || NN4) {
      winX = window.innerWidth - 25;
      winY = window.innerHeight;
    }
    else if(DOM) {
      winX = document.body.offsetWidth - 25;
      winY = document.body.offsetHeight;
    }
    else {
      winX = screen.width - 25;
      winY = screen.height;
    }
    if(tooltip && tooltip.active) tooltip.show();
  }

function toolTip(text, width, opacity) {
    if(text) {
      tooltip = new TOOLTIP();
      tooltip.text = text;
      if(width) tooltip.width = width;
      if(opacity) tooltip.opacity = opacity;
      tooltip.create();
    }
    else if(tooltip) tooltip.hide();
  }

[Jeena Paradies]

Hallo,

Ohne Doctype wird der Browser in den Quirksmode geschickt und einige verwenden dann das kaputte Box-Model des IE 5.x. Das kann dazu führen dass positionen falsch berechnet werden.

Jeena

[wucher wichtel]

Hallo!

ich komme nicht weiter, ich habe mir einen Tooltip zusammengeschustert, der hat auch wunderbar funktioniert...

Du kennst die Infobox? Das gibt's auch ein bisschen anders auf SELFHTML.

if(NN4) {

Gib's zu. Du hast das Script auf irgendeiner vergammelten JavaScript-Müllhalde gefunden!?

;-) Im Ernst: Den Netscape 4 musst du wirklich nicht berücksichtigen. Schmeiß am besten dein ganzes Script in den Müll und mache es mit CSS. Das funktioniert auch ohne JavaScript und du kommst mit weniger Code aus.

ciao, ww

[Christoph Schnauß]

hallo,

if(NN4) {
Gib's zu. Du hast das Script auf irgendeiner vergammelten JavaScript-Müllhalde gefunden

Möglich, aber nicht nachweisbar. Und wenn du schon an dieser Stelle zu kritisieren anfängst, solltest du dir den gesamten Kram

var OP = (navigator.userAgent.indexOf('Opera') != -1) ? true : false;
  var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP) ? true : false;
  var GK = (navigator.userAgent.indexOf('Gecko') != -1) ? true : false;
  var NN4 = document.layers;
  var DOM = document.getElementById;

anschauen. Darin gäbe es deutlich genauere Ansatzpunkte für eine Scriptkritik.

Du kennst die Infobox? Das gibt's auch ein bisschen anders auf SELFHTML.

Du hast das Script mal ausprobiert? Man kann allenfalls über den Begriff "Toolbox" streiten - das geht eh noch wesentlich einfacher ganz ohne Script und ohne CSS mit dem title-Attribut. Aber hier ist noch ein bißchen "mehr" beabsichtigt, und man kann allenfalls fragen, ob denn die Wahl von Javascript die einzig mögliche Wahl ist.

Grüße aus Berlin

Christoph S.

[wucher wichtel]

Hallo!

if(NN4) {
Gib's zu. Du hast das Script auf irgendeiner vergammelten JavaScript-Müllhalde gefunden

Möglich, aber nicht nachweisbar. Und wenn du schon an dieser Stelle zu kritisieren anfängst,

Ich wollte ihm nur zeigen, dass das Script veraltet ist.

solltest du dir den gesamten Kram

var OP = (navigator.userAgent.indexOf('Opera') != -1) ? true : false;
  var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP) ? true : false;
  var GK = (navigator.userAgent.indexOf('Gecko') != -1) ? true : false;
  var NN4 = document.layers;
  var DOM = document.getElementById;
anschauen. Darin gäbe es deutlich genauere Ansatzpunkte für eine Scriptkritik.

Naja. document.all hättest du auch noch kritisieren sollen. Das ist auch nicht so toll...

Du kennst die Infobox? Das gibt's auch ein bisschen anders auf SELFHTML.

Du hast das Script mal ausprobiert?

Nö. Ich hab besseres zu tun.

ciao, ww

[Marc]

Hallo zusammen,

Du hast das Script mal ausprobiert?

Nö. Ich hab besseres zu tun.

Das ist interessant. Du hast Zeit, ein wenig hilfreiches Posting abzuschicken, aber keine Zeit für ein sinnvolles Posting?

Wenn Deine Zeit zu knapp für eine ordentliche Antwort ist: man muss nicht zu jedem Thread was schreiben. Die Beantwortung von Fragen ist vollkommen freiwillig...

Viele Grüße,
Marc.

[wucher wichtel]

Hallo!

Das ist interessant. Du hast Zeit, ein wenig hilfreiches Posting abzuschicken, aber keine Zeit für ein sinnvolles Posting?

Ich finde es ebenfalls sehr interessant, dass der Hinweis auf eine IMHO bessere Lösung als nicht sinnvoll gewertet wird. Oder hängt die Qualität eines Postings mit der Zeit, die es gekostet hat, zusammen? Muss ich mir seitenweise den Quelltext rauskopieren, dass du das Gefühl hast, ich habe eine sinnvolle Antwort gegeben?

Wenn Deine Zeit zu knapp für eine ordentliche Antwort ist:

Du entscheidest was eine "ordentliche" Antwort ist? Findest du "hey, guck mal, du kannst das ganze viel einfacher machen" nicht ordentlich? Findest du "dein Script ist veraltet, mach es lieber anders" nicht sinnvoll? Aber du findest dein Posting warscheinlich sehr ordentlich und sonnvoll, oder? Na dann...

man muss nicht zu jedem Thread was schreiben.

Das würde mir auch nicht einfallen.

Die Beantwortung von Fragen ist vollkommen freiwillig...

Ja ne, is klar.

ciao, ww

[arcteryx]

Also ich bins nochmal, der Threadstarter...ich bin eigentlich der Meinung, das mir bis jetzt nur sinnvolle Antworten gegeben worden, Danke bis dahin...

Kann mir jemand sagen woran es noch liegen könnte, ich vermute es ist eine fehlende 'px' Angabe, aber ich bin mir da nicht sicher, da ich mit Javascript nicht sehr viel am Hut habe. Wäre wirklich wichtig für mich, vielen Dank!

[Der Martin]

Hallo,

ich komme nicht weiter, ich habe mir einen Tooltip zusammengeschustert, der hat auch wunderbar funktioniert...nur wenn ich jetzt ein Doctype festlege, reagiert der Tooltip anders.

also enthält das Script fehlerhafte Angaben, bei denen der Browser im Quirks Mode zufällig richtig rät, was es *wirklich* heißen soll.

var OP = (navigator.userAgent.indexOf('Opera') != -1) ? true : false;

Das kann man eleganter einkürzen: Der Ausdruck
   (navigator.userAgent.indexOf('Opera') != -1)
ergibt bereits true oder false, der Fragezeichen-Operator ist hier also überflüssig. Die Formulierung
   var OP = (navigator.userAgent.indexOf('Opera') != -1);
ergibt exakt dasselbe Ergebnis. Die nächsten zwei Zeilen entsprechend.

Wobei der Sinn solcher Browserweichen, die nach dem Namen und nicht nach Fähigkeiten unterscheiden, eher zweifelhaft ist.

this.sobj.left = left + ext;
      this.sobj.top = top + 35;

Für die y-Koordinate (top) fehlt hier eindeutig eine Einheit. Der IE fängt auch in Standards Mode an zu raten und nimmt px an, der Firefox macht Dienst nach Vorschrift und ignoriert die fehlerhafte Angabe. Das sollte dir aber auch die Fehlerkonsole verraten.

Ich bin nicht sicher, ob das der einzige Fehler war, aber er würde deine Beobachtung

Im FF folgt er zwar der Maus, liegt jedoch ganz oben am Browserrand, bei y=0px. Im IE ändert sich der y-Wert je nachdem, wo man gerade hinscrollt.

zumindest erklären. Insgesamt finde ich: Verdammt viel Javascript für ein bisschen Tooltip (der mir persönlich außerdem lästig wäre). Das kann man mit CSS bestimmt eleganter lösen.

So long,
 Martin

[arcteryx]

Vielen Dank erstmal für eure Hilfestellungen, hat mir sehr geholfen. Im FF wird es jetzt schon korrekt dargestellt, nur der IE macht noch Faxen...wieso ist die Position hier davon abhängig, wohin man gescrollt hat? Hab doch style="position:absolute; beim document.write festgelegt?
Oder woran liegt das? Danke