PoWl89: Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

SELF-Forum

Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

PoWl89 Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi,

um für meine Webapplikation bei der ich Drag'n'Drop verwende muss ich eine Kollisionserkennung für vorgegebene Flächen programmieren, um zu erkennen, ob gerade gedraggte Objekte sich über ihr befinden. Dazu brauche ich für die entsprechenden Flächen die genauen Koordinaten und deren Maße. Jetzt ist mir aufgefallen, dass bei meiner dynamisch erzeugten Tabelle die Left-Werte überhaupt nicht stimmen. Irgendwie scheint er das alignment des calendar-divs völlig zu ignorieren. Noch dazu können die Top-Werte auch nicht so ganz stimmen, denn die obere Zelle ist sicher weiter als 3px vom oberen Rand Fensterrand entfernt.

Was mach ich falsch?

Im IE gehts garnicht! Da sagt er nur: nicht implementiert, Zeile 3 !?!?

lg PoWl

<html>  
<head>  
</head>  
<body>  
  
<div id="calendar" align="center"></div>  
  
</body>  
</html>

unterhalb des calendar-divs steht das script:

var temp = "<table border=1>";  
  
for(var i=0; i<6; i++)  
{  
  temp += "<tr>";  
  
  for(var j=0; j<7; j++)  
  {  
    temp += '<td id="calendar_cell'+(i*7+j)+'"></td>';  
  }  
  
  temp += "</tr>";  
}  
  
temp += "</table>";  
document.getElementById('calendar').innerHTML = temp;  
  
  
for(var i=0; i<42; i++)  
{  
  var htmlObj = document.getElementById('calendar_cell'+i);  
  
  left = htmlObj.offsetLeft;  
  top = htmlObj.offsetTop;  
  
  width = htmlObj.offsetWidth;  
  height = htmlObj.offsetHeight;  
  
  htmlObj.innerHTML = "left: " + left + "<br>top: " + top + "<br>width: " + width + "<br>height: " + height;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Liebe(r) PoWl89,

    Was mach ich falsch?
    [...]

    <html>

    <head>

      
ohne Doctype dürfen die Browser raten, nach welchen Kriterien sie Dein Dokument darstellen sollen. Damit handelst Du Dir Darstellungsprobleme ein, die sich dann in Inkonsistenzen bei Layout-Werten wie den diversen Offsets zeigen.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

      PoWl89 Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Liebe(r) PoWl89,

      Was mach ich falsch?
      [...]

      <html>

      <head>

      
>   
> ohne Doctype dürfen die Browser raten, nach welchen Kriterien sie Dein Dokument darstellen sollen. Damit handelst Du Dir Darstellungsprobleme ein, die sich dann in Inkonsistenzen bei Layout-Werten wie den diversen Offsets zeigen.  
>   
> Liebe Grüße,  
>   
> Felix Riesterer.  
  
Danke für die schnelle Antwort!  
Habe den Doctype nachgerüstet. Der FireFox ist jetzt nicht mehr im Quirks-Modus, dennoch hat sich nichts am Problem Verändert.  
  
lg, Paul
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber PoWl89,

        bitte zitiere nur das, worauf Du Dich auch tatsächlich beziehst. TOFU (oder von mir aus auch FOTU) ist hier sehr unerwünscht. Danke.

        Habe den Doctype nachgerüstet. Der FireFox ist jetzt nicht mehr im Quirks-Modus, dennoch hat sich nichts am Problem Verändert.

        Kann man sich das online anschauen? Ich misstraue Deinem geposteten Code. Du hast sicher etwas verheimlicht. Nein, bitte poste keinen weiteren Code, lieber einen Link zu einer Beispielseite.

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

          PoWl89
          – Informationen zu den Bewertungsregeln

          Lieber PoWl89,

          bitte zitiere nur das, worauf Du Dich auch tatsächlich beziehst. TOFU (oder von mir aus auch FOTU) ist hier sehr unerwünscht. Danke.

          Habe den Doctype nachgerüstet. Der FireFox ist jetzt nicht mehr im Quirks-Modus, dennoch hat sich nichts am Problem Verändert.

          Kann man sich das online anschauen? Ich misstraue Deinem geposteten Code. Du hast sicher etwas verheimlicht. Nein, bitte poste keinen weiteren Code, lieber einen Link zu einer Beispielseite.

          Liebe Grüße,

          Felix Riesterer.

          Lieber Felix,
          denk Link habe ich doch bei jedem meiner Postings extra angefügt http://powl.dyndns.org/jskalender.html

          ;-)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

    molily
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    du unterliegst wohl einem Missverständnis. http://de.selfhtml.org/javascript/objekte/all.htm#offset_top@title=offsetLeft/Top liefern dir den Abstand lediglich zu dem Element, welches in http://de.selfhtml.org/javascript/objekte/all.htm#offset_parent@title=offsetParent gespeichert ist.

    offsetParent ist hier das table-Element. Du müsstest dich zumindest durch alle offsetParents durchhangelt, um die Koordinaten relativ zu den Dokumentgrenzen zu bekommen. Wenn du noch mit Positionierung oder sonstiger Verschiebung arbeitest, dann wird das ganze noch komplizierter.

    Einfache Variante:
    http://www.quirksmode.org/js/findpos.html
    Bessere Varianten aus größeren Bibliotheken, vor allem mit getBoundingClientRect:
    https://github.com/jquery/jquery/blob/master/src/offset.js
    https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/layout.js#L1011
    https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/layout.js#L1190

    Das ist auf die eine oder andere Art die Hölle. Wenn du das wirklich robust haben willst, schreib es lieber nicht selber, sondern verwende existierende Umsetzungen.

    var htmlObj = document.getElementById('calendar_cell'+i);

    left = htmlObj.offsetLeft;
      top = htmlObj.offsetTop;

    width = htmlObj.offsetWidth;
      height = htmlObj.offsetHeight;

    Verwende unbedingt lokale Variablen! Vergesse nicht das »var« vor der Variablendeklaration.
    Du versuchst hier die globale Variable window.top zu überschreiben. Kein Wunder, das sich manche Browser darüber beschweren. Andere ignorieren es einfach.

    Mathias

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)

      Powl89
      – Informationen zu den Bewertungsregeln

      Hallo,

      du unterliegst wohl einem Missverständnis. http://de.selfhtml.org/javascript/objekte/all.htm#offset_top@title=offsetLeft/Top liefern dir den Abstand lediglich zu dem Element, welches in http://de.selfhtml.org/javascript/objekte/all.htm#offset_parent@title=offsetParent gespeichert ist.

      offsetParent ist hier das table-Element. Du müsstest dich zumindest durch alle offsetParents durchhangelt, um die Koordinaten relativ zu den Dokumentgrenzen zu bekommen. Wenn du noch mit Positionierung oder sonstiger Verschiebung arbeitest, dann wird das ganze noch komplizierter.

      Einfache Variante:
      http://www.quirksmode.org/js/findpos.html
      Bessere Varianten aus größeren Bibliotheken, vor allem mit getBoundingClientRect:
      https://github.com/jquery/jquery/blob/master/src/offset.js
      https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/layout.js#L1011
      https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/layout.js#L1190

      Das ist auf die eine oder andere Art die Hölle. Wenn du das wirklich robust haben willst, schreib es lieber nicht selber, sondern verwende existierende Umsetzungen.

      var htmlObj = document.getElementById('calendar_cell'+i);

      left = htmlObj.offsetLeft;
        top = htmlObj.offsetTop;

      width = htmlObj.offsetWidth;
        height = htmlObj.offsetHeight;

      Verwende unbedingt lokale Variablen! Vergesse nicht das »var« vor der Variablendeklaration.
      Du versuchst hier die globale Variable window.top zu überschreiben. Kein Wunder, das sich manche Browser darüber beschweren. Andere ignorieren es einfach.

      Mathias

      Danke!
      Das hat geholfen! :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln