style.top / left & Firefox

Hallo,

ich habe ein wenig "Sorgen" mit einem Javascript-Kalender und dessen
Position. Hintergrund ist, das der Kalender an der Position erscheinen
soll, an der das zugehörige Kalender-Icon steht.

Das funktioniert bestens mit IE, leider aber nicht mit Firefox (3.x)

Hier erstmal der Code (ist nicht von mir sondern von Tan Ling Wee, also
nicht gleich hauen :-)

Die Schleife ermittelt erstmal die Position des Kalender-Icons:

aTag = ctl
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");

Das scheint soweit zu funktionieren, leftpos und toppos sind bezogen auf
das Browserfenster korrekt.

Irgendwie klemmt es aber hier:

crossobj.left = ctl.offsetLeft + leftpos
crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight

crossobj ist so belegt:

crossobj=document.getElementById("calendar").style

"calendar" ist ein div das mittels document.write() beim Laden in die Seite
geschrieben wird:

<div id='calendar' style='z-index:+999;position:absolute;visibility:hidden;'>

Nach den beiden Zeilen ist left und top trotzdem leer, der Kalender
erscheint links oben im Browserfenster.

Auch nach Recherche auf diversen Seiten komm ich nicht drauf wo der Fehler
liegen könnte.

Grüße
Thomas

Thomas Braun wrote:

[Zitat repariert]

ich habe ein wenig "Sorgen" mit einem Javascript-Kalender und dessen
Position. Hintergrund ist, das der Kalender an der Position erscheinen
soll, an der das zugehörige Kalender-Icon steht.

Das funktioniert bestens mit IE, leider aber nicht mit Firefox (3.x)

Hier erstmal der Code (ist nicht von mir sondern von Tan Ling Wee, also
nicht gleich hauen :-)

Dein primärer Ansprechpartner wäre demnach Tan Ling Wee gewesen. Es ist
nämlich nicht Sinn und Zweck dieser Diskussionsgruppe, anderer Leuts'
kapotte Copy-und-Pray-Scripts kostenlos zu reparieren.

Die Schleife ermittelt erstmal die Position des Kalender-Icons:

aTag = ctl

Da sollte ein Semikolon am Zeichenende ergänzt werden (Code Style).

do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");

1. Bitte beim Posten hier

1.1. nicht Zitatzeichen zur Kennzeichnung von eigenem Quelltext
verwenden, sondern Einrückungen. Sonst weiss nachher niemand
mehr, wer was geschrieben hat.

1.2. nicht Tabulator-Zeichen verwenden, sondern Leerzeichen.
Tabulator-Zeichen werden überall anders dargestellt und
erschweren die Wiederverwendung des Codes für
Verbesserungsvorschläge.

2. Die Iteration über offsetParent ist unzuverlässig und in den meisten
Fällen nicht nötig. Wenn man es doch macht, sind Ränder, Rahmen und
Innenabstände (Paddings) zu berücksichtigen.

Das scheint soweit zu funktionieren, leftpos und toppos sind bezogen auf
das Browserfenster korrekt.

Für geeignete Werte von "korrekt".

Irgendwie klemmt es aber hier:

crossobj.left = ctl.offsetLeft + leftpos
crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight

crossobj ist so belegt:

crossobj=document.getElementById("calendar").style

Das dürfte im IE auch nur im Kompatibilitätsmodus funktionieren.
Wahrscheinlich ist Dein Markup nicht gültig; insbesondere fe lt
wahrscheinlich die DOCTYPE-Deklaration oder ist falsch, was den
Wechsel in den Kompatibilitätsmodus auslöst: <http://validator.w3.org/>

Syntaktisch korrekt und daher auch in Firefox funktionierend, ist:

crossobj.left = (ctl.offsetLeft + leftpos) + "px";
crossobj.top = (ctl.offsetTop + toppos + ctl.offsetHeight) + "px";

Denn die style-Eigenschaft implementiert das CSSStyleDeclaration-Interface,
und in CSS benötigen Längenangaben != 0 eine Einheit (hier: Pixel = "px").

Aufgrund schlechter Erfahrungen mit Opera referenziere ich ausserdem das
entsprechende Objekt immer direkt, d.h.

var crossobj = document.getElementById("calendar");
crossobj.style.left = ...;

usw. Mag jedoch sein, dass das inzwischen keine Rolle mehr spielt.

"calendar" ist ein div das mittels document.write() beim Laden in die
Seite geschrieben wird:

div id='calendar'
style='z-index:+999;position:absolute;visibility:hidden;'

`z-index:+999' ist zwar syntaktisch korrekt, ich würde jedoch das unübliche
`+' weglassen.


PointedEars

Thomas Braun wrote:

Hallo,

ich habe ein wenig "Sorgen" mit einem Javascript-Kalender und dessen
Position. Hintergrund ist, das der Kalender an der Position erscheinen
soll, an der das zugehörige Kalender-Icon steht.

Das funktioniert bestens mit IE, leider aber nicht mit Firefox (3.x)

Hier erstmal der Code (ist nicht von mir sondern von Tan Ling Wee, also
nicht gleich hauen :-)

Die Schleife ermittelt erstmal die Position des Kalender-Icons:

aTag = ctl
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");

Besser ist es, die offsetLeft/Top Werte zu addieren, bis offsetParent
null ist.

Das scheint soweit zu funktionieren, leftpos und toppos sind bezogen auf
das Browserfenster korrekt.

Irgendwie klemmt es aber hier:

crossobj.left = ctl.offsetLeft + leftpos
crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight

element.style.left/top erwartet einen CSS-Wert für diese Eigenschaften,
der aus einer Zahl _und_ einer Einheit besteht. Also etwa
crossobj.left = ctl.offsetLeft + leftpos + 'px';

--

Martin Honnen
http://msmvps.com/blogs/martin_honnen/

Martin Honnen wrote:

element.style.left/top erwartet einen CSS-Wert für diese Eigenschaften,
der aus einer Zahl _und_ einer Einheit besteht. Also etwa
crossobj.left = ctl.offsetLeft + leftpos + 'px';

Danke, daran liegt es... wieder was dazugelernt.

Grüße
Thomas

Thomas 'PointedEars' Lahn wrote:

Thomas Braun wrote:

[Zitat repariert]

Welches Zitat?

Dein primärer Ansprechpartner wäre demnach Tan Ling Wee gewesen. Es ist
nämlich nicht Sinn und Zweck dieser Diskussionsgruppe, anderer Leuts'
kapotte Copy-und-Pray-Scripts kostenlos zu reparieren.

Keiner hier wird zu irgendwas gezwungen.

1. Bitte beim Posten hier

1.1. nicht Zitatzeichen zur Kennzeichnung von eigenem Quelltext
verwenden, sondern Einrückungen. Sonst weiss nachher niemand
mehr, wer was geschrieben hat.

Werd ich fürderhin beachten.

1.2. nicht Tabulator-Zeichen verwenden, sondern Leerzeichen.

Mist, cut and paste - hatte ich nicht bemerkt.

2. Die Iteration über offsetParent ist unzuverlässig und in den meisten
Fällen nicht nötig.

Die alternative wäre?

Wenn man es doch macht, sind Ränder, Rahmen und
Innenabstände (Paddings) zu berücksichtigen.

hmmm... obiges funktioniert für meine Zwecke hinreichend gut, daher
verzichte ich auf zusätzliceh Komplexität.

Denn die style-Eigenschaft implementiert das CSSStyleDeclaration-Interface,
und in CSS benötigen Längenangaben != 0 eine Einheit (hier: Pixel = "px").

Mann, bin ich doof - aber jetzt geht es ;-)

`z-index:+999' ist zwar syntaktisch korrekt, ich würde jedoch das unübliche
`+' weglassen.

Du gehst mir oft zu sehr ins Detail und beantwortest vor allem zu viele
garnicht gestellte Fragen, trotzdem Danke :-)

Grüße
Thomas

Thomas Braun wrote:

Thomas 'PointedEars' Lahn wrote:
Thomas Braun wrote:
[Zitat repariert]

Welches Zitat?

Deins.

Dein primärer Ansprechpartner wäre demnach Tan Ling Wee gewesen. Es ist
nämlich nicht Sinn und Zweck dieser Diskussionsgruppe, anderer Leuts'
kapotte Copy-und-Pray-Scripts kostenlos zu reparieren.

Keiner hier wird zu irgendwas gezwungen.

Stimmt. Ich hätte Dein Posting auch ignorieren können. Merkst Du was?

1.2. nicht Tabulator-Zeichen verwenden, sondern Leerzeichen.

Mist, cut and paste - hatte ich nicht bemerkt.

2. Die Iteration über offsetParent ist unzuverlässig und in den meisten
Fällen nicht nötig.

Die alternative wäre?

Relative Positionierung.

`z-index:+999' ist zwar syntaktisch korrekt, ich würde jedoch das
unübliche `+' weglassen.

Du gehst mir oft zu sehr ins Detail und beantwortest vor allem zu viele
garnicht gestellte Fragen,

Usenet ist kein Wunschkonzert.

<http://dcljs.de/>

trotzdem Danke :-)

Gern geschehen.


PointedEars

Thomas 'PointedEars' Lahn wrote:

Thomas Braun wrote:

Thomas 'PointedEars' Lahn wrote:
Thomas Braun wrote:
[Zitat repariert]

Welches Zitat?

Deins.

Da ich nichts zitiert habe, gab es auch nix zu reparieren.

Stimmt. Ich hätte Dein Posting auch ignorieren können. Merkst Du was?

Ja - du hast zu viel freie Zeit - so wie ich auch ;-)

2. Die Iteration über offsetParent ist unzuverlässig und in den meisten
Fällen nicht nötig.

Die alternative wäre?

Relative Positionierung.

Für diesen Anwendungsfall denke ich eher ungeeignet.

Der Kalender steht neben einem (oder mehreren) Datums-Eingabefeld(ern), bei
relativer Positionierung müßte man also das <div> mehrfach statisch in die
Seite einbauen (-> zusätzlicher Traffic), bzw. mehrfach dynamisch an den
richtigen Stellen der Seite (versteckt) plazieren.

Da nehme ich lieber ein paar Pixel Fehlpositionierung in Kauf

Usenet ist kein Wunschkonzert.

http://dcljs.de/

Auch nett finde ich in dem Zusammenhang das Wort "Satzung", gibt es denn
auch eine dcljs Jahreshauptversammlung und einen Vorstand?

Dabei fällt mir noch eins auf:

Es ist nämlich nicht Sinn und Zweck dieser Diskussionsgruppe, anderer Leuts'
kapotte Copy-und-Pray-Scripts kostenlos zu reparieren.

Bitte lies dazu nochmal zum Vergleich hier http://dcljs.de/#satzung

Thomas

Thomas Braun wrote:

Thomas 'PointedEars' Lahn wrote:
Thomas Braun wrote:
Thomas 'PointedEars' Lahn wrote:
Thomas Braun wrote:
[Zitat repariert]

Welches Zitat?
Deins.

Da ich nichts zitiert habe, gab es auch nix zu reparieren.

Du hast den von Dir verwendeten Quelltext *zitiert* --
unpassender-/unsinnigerweise, wie ich bereits anmerkte. Die
unnötigen/störenden Zitatzeichen habe ich entfernt und fand es höflich,
darauf hinzuweisen, dass ich Deinen Text (den zitierten) geändert habe.

2. Die Iteration über offsetParent ist unzuverlässig und in den meisten
Fällen nicht nötig.

Die alternative wäre?

Relative Positionierung.

Für diesen Anwendungsfall denke ich eher ungeeignet.

Der Kalender steht neben einem (oder mehreren) Datums-Eingabefeld(ern),
bei relativer Positionierung müßte man also das <div> mehrfach statisch in
die Seite einbauen (-> zusätzlicher Traffic), bzw. mehrfach dynamisch an
den richtigen Stellen der Seite (versteckt) plazieren.

Nein.

Da nehme ich lieber ein paar Pixel Fehlpositionierung in Kauf

Non sequitur.

Usenet ist kein Wunschkonzert.

http://dcljs.de/

Auch nett finde ich in dem Zusammenhang das Wort "Satzung", gibt es denn
auch eine dcljs Jahreshauptversammlung und einen Vorstand?

Nein, "Satzung" ist eine missglückte Eindeutschung von "Charta". Jede
Newsgroup hat eine. Sie wird üblicherweise bei der Einrichtung der
Newsgroup definiert (in de.ALL: zur Abstimmung gestellt) und nur noch
in Ausnahmefällen geändert.

Daher:

Dabei fällt mir noch eins auf:

Es ist nämlich nicht Sinn und Zweck dieser Diskussionsgruppe, anderer
Leuts' kapotte Copy-und-Pray-Scripts kostenlos zu reparieren.

Bitte lies dazu nochmal zum Vergleich hier http://dcljs.de/#satzung

Vgl. <http://praast.de/ffq/scriptsuche/>. Entsprechend war meine Bemerkung
zu verstehen.


F'up2 poster

PointedEars