Datenschutzerklärung

Doctype zerstört javascript?

Validome - Forum

Startseite Validome
RSS 2.0  
Sie sind nicht angemeldet. Atom 1.0  
Forum Home / Javascript-Forum /

Doctype zerstört javascript?

  Beitrag schreiben
Autor
Beitrag Seiten: 1
arcteryx
Mitglied

Registriert: 03.05.2007
Beiträge: 1
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:

Code:

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();
  }



03.05.2007 17:36:22
  Zitieren
Gurkenpapst
Gast



Das Problem düfte in der Zeile mit dem

Code:

this.sobj.top = top + 35;

liegen. Im Standardsmode verwerfen Gecko-Browser Werte ungleich Null, wenn die Einheit fehlt. Dies ist völlig konform zur Spezifikation, die dies ausdrücklich so vorsieht. Der IE interpretiert auch im Standardsmode  entgegen der Spezifikation Werte ohne Einheit als Wert in Pixeln.

In der Zeile darüber wird ja noch die Einheit px angehängt, die in der Variablen ext steht.  Das erklärt, warum es in der x-Richtung funktioniert. Wenn du die Zeile in

Code:

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

abwandelst, sollte es funktionieren.


05.05.2007 16:58:59
  Zitieren
Seiten: 1   Beitrag schreiben
Wechsel zu

Die letzten Beiträge aus diesen Forum

Valid HTML 4.01