IE5 und event.clientY
Wolfgang Eisenzopf
- javascript
Sehr geehrte Damen und Herren!
Nach der Installation von IE5 und routinemäßigem Testen, was nun so alles noch funktioniert . . .
mußte ich folgendes feststellen:
Die Adressierung via window.event.clientY bzw. via window.event.y funktioniert nicht mehr wie unter IE4. Sowie man scrollt, wird nicht mehr korrekt plaziert.
Anbei ein kleines Bsp. (aus SELFHTML zusammengestoppelt)
<html><head><title>Test</title>
<script for=document event="onmousedown()" language="JavaScript">
{
document.all.Springer.style.left = window.event.clientX;
document.all.Springer.style.top = window.event.clientY;
}
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute; op:100px; left:100px; width:100px; height:100px;"></div>
<script language="JavaScript">
<!--
for(i = 1; i <= 100; i++)
{
var x = i * i;
document.write("<br>Das Quadrat von " + i + " ist " + x);
}
// --!>
</script>
</body></html>
Weiß da jemand, wie man trotzdem noch die korrekten Versetzungen vornehmen kann?
Mit freundlichen Grüßen und Bitte um Unterstützung
W.E.
Hallo,
Einfach einmal folgendes versuchen:
document.all.Springer.style.left = window.event.offsetX;
document.all.Springer.style.top = window.event.offsetY;
Sollte es nicht klappen, bleibt noch der Weg über das Elternelement.
Viele Grüße
Antje
Beim dargestellten Problem klappt der Vorschlag bestens -
Das folgende Beispiel funktioniert unter IE4 einwandfrei: wenn man mit der Maus über das Farbfeld fährt, erscheint ein Informationsfenster. Nun ist es zwar auch noch da - aber um die gescrollte Pixellänge versetzt
<html><head><title>Test</title>
<script language="JavaScript">
function MakeVisible()
{
document.all.InfoFenster.style.left = window.event.x;
document.all.InfoFenster.style.top = window.event.y;
document.all.InfoFenster.style.display= "inline";
}
function MakeInvisible()
{
document.all.InfoFenster.style.display = "none";
}
</script>
</head>
<body>
<div id="InfoFenster" style="position:absolute; top:0px; left:0px; width:100px; height:50px; font-size:10pt; background-color:#E0E0E0; color:black; padding:5px; border:#EFEFEF 2px inset; display:none">
Das ist eine Information.
</div>
<script language="JavaScript">
<!--
for(i = 1; i <= 40; i++)
{
var x = i * i;
document.write("<br>Das Quadrat von " + i + " ist " + x);
}
// --!>
</script>
<span id="Springer" style="background-color:#FFE0FF; position:absolute; top:600px; left:100px; width:100px; height:100px;" onMouseOver="MakeVisible()" onMouseOut="MakeInvisible()">
Einfach mal drüberfahren
</span>
</body>
</html>
DAS ist der eigentliche Hintergrund meines Problems!
Mit Bitte um Hilfe
Wolfgang Eisenzopf
Hallo Wofgang Eisenzopf
<span id="Springer" style="background-color:#FFE0FF; position:absolute; top:600px; left:100px; width:100px; height:100px;" onMouseOver="MakeVisible()" onMouseOut="MakeInvisible()">
Einfach mal drüberfahren
Ich tippe mal darauf, dass es ein Tooltip werden soll.
In diesem Fall arbeite ich immer mit den aufrufenden Element.
ich würde die Positionierung so angegeben:
<script language="JavaScript">
function MakeVisible()
{
document.all.InfoFenster.style.left =document.all.Springer.offsetLeft+window.event.offsetX;
document.all.InfoFenster.style.top =document.all.Springer.offsetTop+window.event.offsetY;
document.all.InfoFenster.style.display= "inline";
}
function MakeInvisible()
{
document.all.InfoFenster.style.display = "none";
}
</script>
Viele Grüße
Antje
Hallo Antje!
Danke für Deine erneute Hilfe!
Unglücklicherweise ist mir gerade dieser Ausweg VERWEHRT: ich habe extrem viele Positionierungen vorzunehmen (bzw. vorgenommen) - und genau aus DIESEM GRUND auf die Adressierung über eigene id's a la 'Springer' (- wie Du es vorgeschlagen hast -) verzichtet.
Schau Dir - wenn Du es nicht als Zumutung empfindest - folgendes kleine Beispiel aus SELFHTML an:
<html><head><title>Test</title>
<script language="JavaScript">
function Coords()
{
alert("x = " + window.event.x + "/ y = " + window.event.y);
}
</script>
</head>
<body>
<div style="position:absolute; left:10px; top:1400px; background-color:#FFFFE0" onClick="Coords()">
<p >Klick mich</p>
</div>
</body>
</html>
Ich habe die Positionierung auf top:1400px gesetzt (in Abänderung des Originals). IE4 gibt die korrekten Koordinaten für window.event.y - IE5 gibt die Bildschirmkoordinaten aus.
Das nervt!
Weißt Du, was da passiert ist?
Mit freundlichen Grüßen und Segenswünschen
Wolfgang
Hallo Wolfgang :-)
Danke für Deine erneute Hilfe!
Unglücklicherweise ist mir gerade dieser Ausweg VERWEHRT: ich habe extrem viele Positionierungen vorzunehmen (bzw. vorgenommen) - und genau aus DIESEM GRUND auf die Adressierung über eigene id's a la 'Springer' (- wie Du es vorgeschlagen hast -) verzichtet.
Weißt Du, was da passiert ist?
Mittlerweile ja, lt. MS-Doku zum event.x:
Retrieves the x-coordinate of the mouse pointer's position relative to the parent element.
In browser versions earlier than Microsoft® Internet Explorer 5, the x property retrieves a coordinate relative to the client.
If the mouse is outside the window when the event is called, this property returns -1. If an element is absolutely positioned and fires a mouse event, or is not the child of an absolutely positioned element, the x property returns a coordinate relative to the BODY element.
Soweit ich überblicke gibt es sicher eine Methode den beabsichtigten Effekt zu erreichen.
Irgendwo in der Doku http://msdn.microsoft.com/default.asp steht was dazu.
Ansonsten handhabe ich es selbst so, daß ich den Parameter "Springer" jeweils dynamisch übergebe und so eine Funktion an beliebiger Stelle einsetze und im Aufruf dann eben die id des Bereiches mit übergebe.
Viele Grüße
Antje
Mit freundlichen Grüßen und Segenswünschen
Wolfgang
Hallo Wolfgang :-)
Soweit ich überblicke gibt es sicher eine Methode den beabsichtigten Effekt zu erreichen.
Irgendwo in der Doku http://msdn.microsoft.com/default.asp steht was dazu.
Die Lösung:
function MakeVisible(test)
{
document.all.InfoFenster.style.left =window.event.srcElement.offsetLeft-40;
document.all.InfoFenster.style.top =window.event.srcElement.offsetTop-40;
document.all.InfoFenster.style.display= "inline";
}
Klappt sowohl im IE 4 und IE 5.
Du mußt nur darauf achten, daß sich die Bereiche nicht überlagern. Deshalb auch die -40 in der Funktion.
Viele Grüße
Antje