Elementposition herausfinden.

[Mätes]

Hi,

kann man mittels JS die Position (x und y-koordinaten) eines
HTML-Elements (z.B. eines Links) herausfinden, um z.B.
nachträglich ein weiteres Element in der nähe zu platzieren?

hab schon einiges probiert, aber das bisher leider nicht hinbekommen.

danke,

ma

[Marc Reichelt]

Hallo Mätes,

kann man mittels JS die Position (x und y-koordinaten) eines
HTML-Elements (z.B. eines Links) herausfinden, um z.B.
nachträglich ein weiteres Element in der nähe zu platzieren?

Das geht, ist aber für deinen Zweck sehr umständlich.

hab schon einiges probiert, aber das bisher leider nicht hinbekommen.

Du kannst es ja mal so probieren, du schreibst einfach an der Stelle wo dein Element auftauchen soll folgendes hin:

<div id="mynewelement"></div>

In JavaScript kannst du nun auf den Inhalt des div-Tags zugreifen und ihn verändern, also z.B. einen Link einfügen:

document.getElementById("mynewelement").innerHTML = '<a href="webseite.html">Webseite</a>';

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[Julian]

Hallo Mätes,

kann man mittels JS die Position (x und y-koordinaten) eines
HTML-Elements (z.B. eines Links) herausfinden, um z.B.
nachträglich ein weiteres Element in der nähe zu platzieren?

schau mal unter http://de.selfhtml.org/javascript/objekte/links.htm#x nach

mfg Julian

[Gunnar Bittersmann]

Julian,

schau mal unter http://de.selfhtml.org/javascript/objekte/links.htm#x nach

Und was steht da?

Also was soll das bringen?
Gunnar

[molily]

Hi,

kann man mittels JS die Position (x und y-koordinaten) eines
HTML-Elements (z.B. eines Links) herausfinden, um z.B.
nachträglich ein weiteres Element in der nähe zu platzieren?

Höchstens mit http://de.selfhtml.org/javascript/objekte/all.htm#offset_top@title=offsetTop] und offsetLeft.
offsetParent muss allerdings identisch mit dem body-Element des Dokuments sein, damit diese Eigenschaften sinnvolle Werte liefern. Bei verschachtelten Elementen mit gewissen CSS-position-Eigenschaftswerten (AFAIK) ist das nicht immer der Fall, insofern sind die Eigenschaften nur eingeschränkt nutzbar.

Mathias

[wahsaga]

hi,

Höchstens mit offsetTop und offsetLeft.
offsetParent muss allerdings identisch mit dem body-Element des Dokuments sein, damit diese Eigenschaften sinnvolle Werte liefern.

danke für den tipp!

habe nämlich etwas ähnliches vor, und dabei lieferte mir der IE bisher immer "falsche" werte, wo opera und geckos richtige lieferten.

Bei verschachtelten Elementen mit gewissen CSS-position-Eigenschaftswerten (AFAIK) ist das nicht immer der Fall, insofern sind die Eigenschaften nur eingeschränkt nutzbar.

dass relative positionierung von vorfahrenelementen hineinspielen könnte - nein eigentlich sogar sollte - hatte ich mir eigentlich schon gedacht.
allerdings hatte ich einen testfall ohne positionierung der vorfahrenelemente - reine textlinks im fließtext in einem container, der mittels margin:auto und fester breite zentriert wird.
und in genau diesem falle liefert der IE "falsche" werte, nämlich auf den rand des containers bezogen - wo opera und geckos auf den viewport bezogene koordinaten liefern.

jetzt werde ich, dank deines hinweises, mal testen, ob mir der IE bei diesem testfall dann den container als offsetParent liefert.
das wäre dann erklärung und zugleich auch möglicher workaround für meinen problemfall.

gruß,
wahsaga

[Detlef G.]

Hallo wahsaga

habe nämlich etwas ähnliches vor, und dabei lieferte mir der IE bisher immer "falsche" werte, wo opera und geckos richtige lieferten.

Kennst du http://forum.de.selfhtml.org/archiv/2004/4/t79429/#m460179?

Auf Wiederlesen
Detlef

[wahsaga]

hi,

Kennst du http://forum.de.selfhtml.org/archiv/2004/4/t79429/#m460179?

danke für den hinweis.
dass man sich im IE rekursiv über offsetParent nach oben hangeln könnte, um die werte für top und left aufzusummieren, der gedanke kam mir beim lesen von molilys posting natürlich auch schon.

allerdings werde ich es vermutlich eh nur als workaround für den opera brauchen, weil der bei der absoluten positionierung teilweise immer noch bockt (bzw. bugt), wenn diese sich auf relativ positionierte elemente im fließtext beziehen soll.

gruß,
wahsaga

[Cybaer]

Hi,

kann man mittels JS die Position (x und y-koordinaten) eines
HTML-Elements (z.B. eines Links) herausfinden,

Ja.

  
function getX(obj,relative) { var x=0; if(typeof(obj)=="object" && document.getElementById) { x=obj.offsetLeft; if(obj.offsetParent && !relative) { x+=getX(obj.offsetParent); } return x; } else  { return false; } }  
function getY(obj,relative) { var y=0; if(typeof(obj)=="object" && document.getElementById) { y=obj.offsetTop; if(obj.offsetParent && !relative) { y+=getY(obj.offsetParent); } return y; } else  { return false; } }  

Ermittelt absolutes X & Y des Objekts obj (wenn relativ erwünscht ist, muß der zweite Parameter true sein). Browser vor JS 1.5 liefern ein false zurück.

Bei

<span>A <span id="example">B</span></span>

wäre die Position von "A" (erstes SPAN im Quelltext):

alert("X/Y: "+getX(getObject("span",0))+"/"+getY(getObject("span",0)));

die Position von "B" (ID ist "example"):

alert("X/Y: "+getX(getObject("example"))+"/"+getY(getObject("example")));

wobei getObject() so aussieht:

  
function getObject(element,number) {  
 var obj=false;  
 if(element) {  
  if(typeof(element)=="object") { obj=element; }  
  else if(document.getElementById) {  
   number=(number)?number:0;  
   if (document.getElementById(element)) { obj=document.getElementById(element); }  
   else if (document.getElementsByName(element) && document.getElementsByName(element)[number]) { obj=document.getElementsByName(element)[number]; }  
   else if (document.getElementsByTagName && document.getElementsByTagName(element) && document.getElementsByTagName(element)[number]) { obj=document.getElementsByTagName(element)[number]; }  
  }  
 }  
 return obj;  
}  

um z.B.
nachträglich ein weiteres Element in der nähe zu platzieren?

16 "Schatten-Bs" mit fließendem Helligkeitsübergang:

  
 obj=getObject("example"); char="B";  
 if(getX(obj)!==false) {  
  for(i=1;i<=16;i++) {  
   c=i*16;  
   document.write('<span id="example'+i+'" style="color:rgb('+c+','+c+','+c+');">'+char+'<\/span>');  
   posElement("example"+i,i,i/2,-(i+1),obj)  
  }  
 }  

wobei posElement() so aussieht:

  
// Positioniere HTML-Element element absolut im Dokument  
// ausgehend vom Nullpunkt (links oben) oder vom Element base  
// posElement(Object/ID/NAME/TagName,X,Y[,Z][,Object/ID/NAME/TagName]  
function posElement(element,x,y,z,base) {  
 var obj, baseX=0, baseY=0, result=false;  
  
 if(element && document.getElementById) {  
  x=(typeof(x)=="number")?x:0;  
  y=(typeof(y)=="number")?y:0;  
  if(typeof(z)!="number" && !base) { base=z; }  
  
  if(base) {  
   obj=getObject(base);  
   if(obj) {  
    baseX=getX(obj);  
    baseY=getY(obj);  
   }  
  }  
  
  obj=getObject(element);  
  if(obj) { with(obj.style) {  
   position="absolute";  
   top=baseY+y+"px";  
   left=baseX+x+"px";  
   if(typeof(z)=="number") { zIndex=z; }  
  } result=true; }  
 }  
  
 return result;  
}  

Allerdings werden die "Schatten-Bs" falsch positioniert, wenn dies außerhalb des im Browser sichtbaren Bereichs geschieht. Und mangels echtem Bedarf, habe ich es deswegen auch erstmal so gelassen ... ;)

Gruß, Cybaer