<div>-Position ermitteln?

[Chriz]

Hi!

Ich habe ein kleines Script gefunden, mit dem ich die Position eines <div> auslesen lassen kann. Im Mozilla klappt das wunderbar, aber im IE  bekomme ich immer den Wert "-1" zurück. Kann mir jemand sagen, wie ich das auch für den IE schaffe?!?

Hier das Script:

function getX(el) {
x = el.offsetLeft;
if (!el.offsetParent) return x;
else return (x+getX(el.offsetParent));
}

function getY (el) {
y = el.offsetTop;
if (!el.offsetParent) return y;
else return (y+getY(el.offsetParent));
}

function setpic(id){

var x= getX(document.getElementById(id));
var y = getY(document.getElementById (id));
document.getElementById(id+"_div").style.top = y;
document.getElementById(id+"_div").style.left=(x-120);
}

Am Ende der Seite wird setpic mit

<script>setpic('123')</script>

aufgerufen, um ein weiteres DIV 120px links neben dem eigentlichen DIV zu setzen.

Weiß jemand Rat?

Chriz...

[Andreas Dölling]

Hallo,

also, nach einem ersten (zugegebenermaßen flüchtigen) Blick scheint mir die rekursive Funktion getX() ebenso wie getY() soweit OK zu sein.

Problematisch sind auf jeden Fall diese Zeilen:
document.getElementById(id+"_div").style.top = y;
document.getElementById(id+"_div").style.left=(x-120);

Da solltest Du schreiben:
document.getElementById(id+"_div").style.top = y + 'px';
document.getElementById(id+"_div").style.left=(x-120) + 'px';

Evtl. hilft auch noch:
x = parseInr(el.offsetLeft);
und
y = parseInt(el.offsetTop);

Ein Surftipp noch zum Thema: http://www.quirksmode.org/js/findpos.html

Ciao,
Andreas

[Chriz]

Danke Euch erst einmal für die Hilfe.
Ich habe die Änderungen soweit vorgenommen und im Mozilla klappt das Script immer noch. Nur im IE werden mir als x/y-Werte immer '-1' ausgegeben.

Habt Ihr noch weitere Ideen?!?

Chriz!

[Andreas Dölling]

Danke Euch erst einmal für die Hilfe.
Ich habe die Änderungen soweit vorgenommen und im Mozilla klappt das Script immer noch. Nur im IE werden mir als x/y-Werte immer '-1' ausgegeben.

Habt Ihr noch weitere Ideen?!?

Chriz!

Wenn alles nix hilft (auch der Link nicht), dann versuche es doch einmal mit Testausgaben:

function getX(el) {
   alert("typeof el: " + (typeof el) + "nodeType el: " + el.nodeType);
   alert(el.offsetLeft);
   x = el.offsetLeft;
   if (!el.offsetParent) return x;
   else return (x+getX(el.offsetParent));
}

Das könnte sehr aufschlußreich sein.

Ciao,
Andreas

[Chriz]

also,

typeof el: object
nodeType el: 1

und was sagt mir das jetzt genau?
vielleicht hilft es Euch, wenn Ihr Euch die dazugehörige Seite
mal anschaut:

www.film-db.info

links neben den kleinen Coverabbildungen sollen die Gleichen noch einmal onMouseOver in groß erscheinen.

Gruß,

Chriz!

[wahsaga]

hi,

www.film-db.info

links neben den kleinen Coverabbildungen sollen die Gleichen noch einmal onMouseOver in groß erscheinen.

warum du dafür dieses javascript-gewurstel veranstaltest, anstatt dich näher mit techniken wie "pure css popups" zu beschäftigen, muss man wohl nicht verstehen?

gruß,
wahsaga

[Chriz]

Sorry, aber das klingt ein wenig herablassend und das finde ich ziemlich unpassend. Ich habe ein Problem und wenn Du denkst, dass Du eine Lösung hast, dann kannst Du gerne erklärende Links und Beispiele posten, anstatt nur so einen Kommentar in den Raum zu schmeissen.

Gruß,

Chriz!

[wahsaga]

hi,

Sorry, aber das klingt ein wenig herablassend und das finde ich ziemlich unpassend.

falls ich es falsch eingeschätzt haben sollte, und du _nicht_ der typische noob bist, der erst mal jede aufgabe sofort mit javascript anzugehen versucht, bevor er alternativen in betracht zieht, täte es mir leid :-)

Ich habe ein Problem und wenn Du denkst, dass Du eine Lösung hast, dann kannst Du gerne erklärende Links und Beispiele posten,

und wenn du ein problem hast, darfst du dich, wenn dir ein stichwort genannt wird, gerne über die suchfunktion hier oder per google über dieses informieren,

anstatt nur so einen Kommentar in den Raum zu schmeissen.

anstatt mit dieser schnorrerhaften "gib mir gefälligst was fertiges"-einstellung anzukommen.

gruß,
wahsaga

[Andreas Dölling]

also,

typeof el: object
nodeType el: 1

und was sagt mir das jetzt genau?

Wenn der IE das nur einmal ausgibt, dann sagt Dir das schon einmal, daß die Funktion nur einmal aufgerufen wird, was wiederum bedeuten würde, daß für den IE Dein referenziertes Element direkt unterhalb des BODY-Elements sitzt (was es ja laut Quellcode nicht tut).

Was liefert denn alert(el.tagName)?

Was ich mit diesen alert-Ausgaben feststellen möchte, das ist, wie der DOM-Baum Deiner HTML-Seite für den IE aussieht.
Anscheinend ja anders als für Mozilla.

Erwartungsgemäß müßte alert(el.tagName); in Deiner Funktion ja etwa Folgendes ausgeben:
TD
TR
TABLE
BODY.
Denn das Bild, auf das Du Dich beziehst sitzt ja innerhalb einer Tabelle.

Ciao,
Andreas

P.S.: Der Hinweis von wahsaga, die Sache vielleicht grundsätzlich anzugehen, ist aber auch zu bedenken.

[Chriz]

ich glaube, ich werde dieses Gimmick erst einmal nicht verwenden. Es wäre (wie bei der Einfachheit im Mozilla) eine nette Sache geworden, aber so ist der Aufwand doch zu hoch.

wahsagas Idee ist zwar ok, aber zum Einen habe ich keine Zeit, mich in eine neue Technik einzuarbeiten (schon gar nicht für so ein kleines Dingelchen) und zum Anderen halte ich konstruktive Hilfe für sinnvoller, als diese "da!! rtfm!"-Mentalität.

[Struppi]

ich glaube, ich werde dieses Gimmick erst einmal nicht verwenden. Es wäre (wie bei der Einfachheit im Mozilla) eine nette Sache geworden, aber so ist der Aufwand doch zu hoch.

Ich bha keine Ahnung warum es bei dir nicht funktioniert, bei mir hat's bis jetzt immer funktioniert. ich hab aber momentan keine Zeit um das genauer anzuschauen.

Wegen den CSS popups, die sind wesentlich einfacher umzusetzen als das was du probierst und wenn du einfach mal mit wahsaga's Hinweis google bemüht hättest wärst du schnell auf eine Sete gekommen die es einfach zeigt.

Ich hatte auch mal eins gebastelt:
http://javascript.jstruebig.de/exp/test/css-mouseover.html

Es ist wirklich simpel.

Struppi.

[wahsaga]

hi,

Ich hatte auch mal eins gebastelt:
http://javascript.jstruebig.de/exp/test/css-mouseover.html

hm, seltsam, da mag der opera 8 die popups nicht anzeigen ...

gruß,
wahsaga

[Struppi]

Ich hatte auch mal eins gebastelt:
http://javascript.jstruebig.de/exp/test/css-mouseover.html

hm, seltsam, da mag der opera 8 die popups nicht anzeigen ...

dieser Opera ist wirklich seltsam. Mit dem 7'er klappts. aber letzlich gibt es noch andere Seiten die das besser erklären.

Struppi.

[Struppi]

Hier das Script:

function getX(el) {
x = el.offsetLeft;
if (!el.offsetParent) return x;
else return (x+getX(el.offsetParent));
}

function getY (el) {
y = el.offsetTop;
if (!el.offsetParent) return y;
else return (y+getY(el.offsetParent));
}

Vielleicht hilft hier noch: parseInt( )
außerdem würde ich keine globalen Variabeln verwenden.

function getY (el) {
  var y = parseInt( el.offsetTop );
  if (!el.offsetParent) return y;
  else return y + getY(el.offsetParent);
}

Struppi.