Altes Menu-Script aktualisieren (Doctype)
tjfo
- javascript
0 Gunnar Bittersmann0 tjfo
0 ChrisB
Hallo,
ich bin im Begriff ein Script aus dem Jahr 2001 zu aktualisieren. Sobald ich es mit Doctype strict (oder auch Transit.) ausstatte funktioniert es nicht mehr. Hier auch komplett zu finden: Dotmenu
Ich habe nun bei der Style-Definition im head die ersten drei Punkte ".dot", ".dotoff" und ".dotempty" bzgl. width und height um "px" ergänzt und den Doctype auf strict gesetzt. Ergebnis: Der Punkt landet oben links in der Ecke und das Menü funktioniert nicht mehr. Sobald die Doctype-Zeile gelöscht wird, geht es wieder wie es soll.
Die erste Problem-Hürde ist die sechste Funktion von oben: "function moveMe(name,x,y)" . Für x und y, bzw. parseInt(x) und parseInt(y) wird NaN zurückgegeben. Dito wenn Radix 10 dazugesetzt wird (was ohne Doctype richtig ist). Hier komme ich nicht weiter und wäre dankbar, wenn mir jemand an der Stelle weiterhelfen könnte. Ich habe auch testweise mal den div konkretisiert:
div { position:relative; left:500px; top:450px; width:1000px; height:800px; padding:0px; background-color:#FFFFE0; } ...
Dank und Gruß
Thomas
Hier der Problembereich:
function getObjectRef(name) {
if(document.getElementById) return document.getElementById(name);
else if(document.all) return document.all[name];
else return null;
}
function show(name) {
var el = getObjectRef(name);
if(el) el.style.visibility = "visible";
}
function hide(name) {
var el = getObjectRef(name);
if(el) el.style.visibility = "hidden";
}
function getWidth(name) {
var el = getObjectRef(name);
return el.offsetWidth;
}
function getHeight(name) {
var el = getObjectRef(name);
return el.offsetHeight;
}
function moveMe(name,x,y) {
var el = getObjectRef(name);
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
}
function moveBy(name,x,y) {
var el = getObjectRef(name);
if(el) { el.style.top = parseInt(el.style.top) + parseInt(y); el.style.left = parseInt(el.style.left) + parseInt(x); }
}
@@tjfo:
nuqneH
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
Du weist 'top' einen ungültigen Wert zu. [CSS21 §9.3.2]
Click auf <length> … Auf gut deutsch: [CSS2 §4.3.2]
if(el) { el.style.top = parseInt(el.style.top) + parseInt(y); el.style.left = parseInt(el.style.left) + parseInt(x); }
Dito.
Qapla'
Du meinst die Einheit 'px', wenn ich Dich recht verstehe. Es gibt aber vorher das Problem, dass vor der Zeile
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
für alert(parseInt(y)) auch schon NaN ausgegeben wird... wie für y alleine auch.
Hi,
Die erste Problem-Hürde ist die sechste Funktion von oben: "function moveMe(name,x,y)" . Für x und y, bzw. parseInt(x) und parseInt(y) wird NaN zurückgegeben.
Und wie sehen diese Werte aus, die du in Integer umzuwandeln versuchst ...?
MfG ChrisB
Hallo,
diese hier. Geht seit Einsetzen von Doctype nicht mehr:
http://de.selfhtml.org/javascript/objekte/event.htm#x_y@title=Mauszeiger-Koordinaten
Gruß
Thomas
Hi,
diese hier.
Ich wollte von dir wissen, was deine Debugging-Anstrengungen für konkrete Erkenntnisse gebracht haben - nicht die Wiederholung einer „funzt nich“-Aussage.
MfG ChrisB
Hallo,
sie haben mir keine neuen Erkenntnisse gebracht. Es wird NaN zurück gegeben. Warum das so ist, weiß offensichtlich niemand. Das ist der Grund warum ich hier frage. Sobald der Doctype rausgenommen wird, funktioniert es, d.h. es wird ein Integer zurück gegeben - was denn auch sonst?
Die konkrete Frage ist, ob jemand weiss, warum wegen des Einsetzens von Doctype strict kein Wert (x, y, parseInt(x), parseInt(y)) mehr zurück gegeben wird. Es gibt erst Ausgabe von Werten, wenn man eine Wurzel zwischen 24 und 36 in parseInt() einsetzt, was nicht wirklich weiterhilft...
Für sachdienliche Hinweise bin ich dankbar.
Dank und Gruß
Thomas
Hi,
sie haben mir keine neuen Erkenntnisse gebracht. Es wird NaN zurück gegeben.
Das ist aber nach dem Anwenden von parseInt, oder?
MfG ChrisB
Hallo,
Das ist aber nach dem Anwenden von parseInt, oder?
Nein. Das hier gibt NaN zurück:
function moveMe(name,x,y) {
var el = getObjectRef(name);
alert(x);
alert(parseInt(y)); // oder das hier...
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
}
Ohne Doctype wird der korrekte Pixelwert (bei mir) von "436" zurückgegeben.
Dank und Gruß
Thomas
Nein. Das hier gibt NaN zurück:
[code lang=javascript]
function moveMe(name,x,y) {
var el = getObjectRef(name);
alert(x);
Wo kommt denn x her?
Ohne Doctype wird der korrekte Pixelwert (bei mir) von "436" zurückgegeben.
Dann machst du etwas falsch, aber nicht in dem Code, den du uns gezeigt hast.
Struppi.
@@Struppi:
nuqneH
function moveMe(name,x,y) {
var el = getObjectRef(name);
alert(x);Wo kommt denn x her?
Parameter.
Dann machst du etwas falsch, aber nicht in dem Code, den du uns gezeigt hast.
Ja. Wie wird denn moveMe() aufgerufen?
Qapla'
Hallo,
Ja. Wie wird denn moveMe() aufgerufen?
Siehe Link zum Script in meinem ersten Beitrag.
this.moveMe = function(x,y) { if(this.parent) { x += this.parent.x(); y += this.parent.y(); } moveMe(this.ref,x,y); }
Dank und Gruß
Thomas
Ja. Wie wird denn moveMe() aufgerufen?
Siehe Link zum Script in meinem ersten Beitrag.
Ich hatte nicht den Link angeklickt (ehrlich gesagt ich hatte den gar nicht gesehen, da ich dein Posting nur nach einem Aufruf von moveMe durchsucht hatte), sondern auf das von dir gezeigte. Für dein Problem wäre aber genau der Aufruf das entscheidene gewesen.
this.moveMe = function(x,y) { if(this.parent) { x += this.parent.x(); y += this.parent.y(); } moveMe(this.ref,x,y); }
Hier Wissen wir immer noch nicht woher x und y kommt.
Struppi.
Hallo,
Hier Wissen wir immer noch nicht woher x und y kommt.
Doch: http://de.selfhtml.org/javascript/objekte/event.htm#x_y@title=Link
Gruß
Thomas
Mahlzeit tjfo,
Hier Wissen wir immer noch nicht woher x und y kommt.
Doch: http://de.selfhtml.org/javascript/objekte/event.htm#x_y@title=Link
Den verwendeten Browser und dessen Version (und, falls es sich um den IE > 6 handelt, ob dieser in irgendeinem Kompatibilitätsmodus läuft) hast Du aber in allen Deinen 7 Beiträgen bisher mit keinem Wort erwähnt.
Vielleicht solltest Du Dir angewöhnen, die Tipps für Fragende ernstzunehmen und zu beherzigen. Dann hättest Du nämlich schon längst alle für eine sinnvolle und zielführende Analyse und Hilfe notwendigen Informationen genannt.
MfG,
EKKi
Hallo,
danke für die Belehrung. Dein Beitrag ist nur leider völlig irrelevant. Das Script läuft ohne Doctype auf allen gängigen Browsern.
Gruß
Thomas
danke für die Belehrung. Dein Beitrag ist nur leider völlig irrelevant. Das Script läuft ohne Doctype auf allen gängigen Browsern.
Danke für diese Aussage. Ich schau mir das nicht mehr länger an.
Struppi.
Mahlzeit tjfo,
danke für die Belehrung. Dein Beitrag ist nur leider völlig irrelevant.
Ist er nicht, dann diese Aussage ...
Das Script läuft ohne Doctype auf allen gängigen Browsern.
... sollte sehr wohl Teil einer vernünftigen, vollständigen Problembeschreibung sein (woher sollten Deine Leser das sonst wissen?).
Das Skript geht also davon aus, dass sich jeder Browser sein Parsing- und Rendering-Verhalten selbst aussuchen und wild herumraten kann, da es - sobald man dem Browser vorschreibt, dass er W3C-konforme Standards einhalten soll - seinen Dienst quittiert ... habe ich das jetzt richtig verstanden?
MfG,
EKKi
Hier Wissen wir immer noch nicht woher x und y kommt.
Doch: http://de.selfhtml.org/javascript/objekte/event.htm#x_y@title=Link
von einer selfhtml Seite????
Du willst Hilfe, nicht wir. Deshalb wäre es in deinem Interesse, an dem Problem mitzuhelfen und nicht uns mit irgendwelchen Bruchstücken zu abzuspeisen.
Wenn dir das zu viel ist, sag' es und ich blende den Thread aus.
Struppi.
Lieber tjfo,
Hier Wissen wir immer noch nicht woher x und y kommt.
Doch: http://de.selfhtml.org/javascript/objekte/event.htm#x_y@title=Link
Irrtum. Nach einem ersten Überfliegen des Quelltextes hat event.x bzw. event.y nichts mit Deinem Problem zu tun. In dem von Dir verwendeten Script gibt es eine Methode Deines menuObject namens this.moveMe:
this.moveMe = function(x,y) {
if(this.parent) {
x += this.parent.x();
y += this.parent.y();
}
moveMe(this.ref,x,y);
}
Jetzt ist die Frage: Welches Objekt ist jeweils "this.parent" und wie kommt es zu den Eigenschaften "x" und "y"? Dazu müsste man sich jetzt anschauen, wie ein menuObject erzeugt wird, denn da wird ein Parameter "parent" mit übertragen. Offensichtlich ist das auch ein MenuObject, welches seine eigenen Eigenschaften "x" und "y" hat.
Ein weiterer Hinweis ist, dass das event-Objekt nur an zwei Stellen vorkommt, und zwar bei den Methoden this.toggle() und this.doAction(). Dort wird das jeweils angeklickte bzw. gehoverte Element ermittelt (<event>.srcElement, bzw. <event>.target). Aber von den Event-Eigenschaften "x" und "y" ist nirgendwo die Rede!
Dein Problem scheint also absolut nichts mit event.x oder event.y zu tun zu haben.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
vielen Dank! Allerdings hat
moveMe(this.ref,x,y);
seinen Ursprung hier am Beginn des Scripts:
function moveMe(name,x,y) {
var el = getObjectRef(name);
// alert(x);
// alert(y);
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
}
Irrtum.
x und y gibt genau den Koordinaten-Abstand zur linken oberen Bildschirm-Ecke aus.
Dank und Gruß
Thomas
Mahlzeit tjfo,
x und y gibt genau den Koordinaten-Abstand zur linken oberen Bildschirm-Ecke aus.
Das ist schon klar ... meine Güte: *woher* kommen die *Werte*, die dort als Parameter an die Funktion "moveMe()" *übergeben* werden? Wann und wo wird diese Funktion denn mal *aufgerufen*?
Ist das eigentlich *so* schwer zu verstehen?
MfG,
EKKi
Hallo Felix,
this.moveMe = function(x,y) {
if(this.parent) {
x += this.parent.x();
y += this.parent.y();
}moveMe(this.ref,x,y);
}
> Jetzt ist die Frage: Welches Objekt ist jeweils "this.parent" und wie kommt es zu den Eigenschaften "x" und "y"? Dazu müsste man sich jetzt anschauen, wie ein menuObject erzeugt wird, denn da wird ein Parameter "parent" mit übertragen. Offensichtlich ist das auch ein MenuObject, welches seine eigenen Eigenschaften "x" und "y" hat.
"this.parent" dürfte der Eltern-Dot sein mit den jeweiligen relativen Koordinaten zum Child.
Ich denke nur, dass das erste Problem schon viel früher, nämlich an der besagten Funktion (mit den von mir eingetragenen alerts) hängt. Ist der Doctype eingetragen wird für den Eltern-Dot kein top und kein left-Wert mehr geschrieben (für "x" und "y" wird ohne Doctype der Pixelabstand zur linken oberen Bildschirmecke ausgegeben. Mit Doctype nur noch "NaN").
~~~javascript
function moveMe(name,x,y) {
var el = getObjectRef(name);
// alert(x);
// alert(y);
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
}
Dank und Gruß
Thomas
Lieber tjfo,
meinst Du nicht, dass es spätestens jetzt an der Zeit ist, dieses Script restlos zu entsorgen? Es verweigert den Dienst, wenn ein Browser standardkonform anzeigen soll, unterstützt aber so uralten Quark wie document.all!?
Wenn Du die Funktionalität tatsächlich benötigst, dann ist Neuschreiben angesagt, aber diesesmal vernünftig!
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
da magst Du vielleicht recht haben. Auf jeden Fall vielen Dank für Deinen letzten Beitrag! Das hat mir doch einen guten Denk-Anstoß gegeben. Mir geht es auch darum zu verstehen, wo es hier zur modernen Funktionalität fehlt.
Der Grund scheint wohl u.U. im Zeichnen des ersten Parent-Dots zu liegen (den auch die besagte Funktion bedingt). Dieser Dot bekommt keinen top und left-Wert (-> document.write...) und es fehlt nicht nur an den "px" ...
Dank und Gruß
Thomas
Lieber tjfo,
Der Grund scheint wohl u.U. im Zeichnen des ersten Parent-Dots zu liegen
absolut korrekt.
Dieser Dot bekommt keinen top und left-Wert (-> document.write...) und es fehlt nicht nur an den "px" ...
Richtig, es fehlt nicht nur an den "px", es fehlt auch an vernünftigen http://de.selfhtml.org/javascript/objekte/node.htm@title=DOM-Methoden. Dieses document.write() ist sehr zu meiden. In meinem Artikel kann man sehen, wie man es besser macht.
Liebe Grüße,
Felix Riesterer.