Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)
0 
Felix Riesterer
0
1
Probleme mit offsetLeft (falsche Werte, FF3.5, FF4...)
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;
}
-
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:)-
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-
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:)-
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;-)
-
-
-
-
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#L1190Das 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
-
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#L1190Das 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! :)
-