sidmeyers: [problem mit javascript in IE und Mozilla]

hi,

ich hab hier ein kleines problem mit der umsetzung eines javascipt im mozilla. es funktioniert einwandfrei in IE, es soll aber auch, wie gesagt, in mozilla tun. habe schon an einigen dingen rumgespielt (wie z.b. anstatt event.clientX, event.pageX usw), aber ich komme mit dem debuggen einfach nicht weiter. wenn jemand vielleicht mehr ahnung (was nicht schwer ist) von mozilla und dessen event handling hat als ich, wäre es nett, wenn mir dieser jenige unter die arme greifen könnte...

btw. es geht um ein kleines fenster (besteht aus spans), welches man nun am oberen balken dragen, und mit dem untereren button resizen kann...

danke schonmal im vorraus...

gruss, sid

der code :

/*

<HTML>
<title>spanmenu</title>

<head>
<style>
a {
position:absolute;
left:5;
top:;
font-size:x-small;
font-family:arial;
font-weight:bold;
text-decoration:none;
color:#5D5D5D;
}
.span {
position:absolute;
top:100;
left:100;
z-index:0;
background-color:#D6D6D6;
width:100px;
height:150px;
}
.move {
position:absolute;
overflow:hidden;
z-index:1;
background-color:gray;
width:100px;
height:10px;
cursor:hand;
}
.scale {
position:absolute;
top:140;
left:85;
overflow:hidden;
z-index:1;
width:15px;
height:10px;
cursor:hand;
}
</style>

<script language="JavaScript1.2">
<!--

var ampel = false // die ampelvariable, mit der man prüft ob mousebutton gedrückt bleibt

function move() // funktion zur bewegung des fensters auf der oberfläche
{
if (event.button == 1 && ampel)
{
id.style.pixelLeft = tempL + event.clientX - mx; // neue x position des fensters
id.style.pixelTop = tempT + event.clientY - my; // neue y position des fensters
return false
}
}

function scale() // funktion zum scalieren des fensters
{
if (event.button == 1 && ampel)
{
newx = tempW + event.clientX - mx; // neue breite des fensters
newy = tempH + event.clientY - my; // neue höhe des fensters
if (newx > 50 && newy > 100) // minimale grösse des fensters
{
doc2.style.width = newx; // breite der bediehnungspalte wird angepasst
doc1.style.pixelLeft = stempL + event.clientX - mx; // neue x position des scalierobjektes
doc1.style.pixelTop = stempT + event.clientY - my; // neue y position des skalierobjektes
id.style.width = newx; // breite des fensters wird angepasst
id.style.height = newy; // höhe des fensters wird angepasst
return false
}
return false
}
}

function over(name1, name2, name3) // funktion zum abhandeln des events mousedown des jeweiligen objekts dann => move()||scale()
{
ampel = true;
mx = event.clientX;
my = event.clientY;
if (event.srcElement.className == ("move")) // prüft obs bewegt wird (durch klassennamen)
{
id = document.getElementById(name1);
tempL = id.offsetLeft; // momentane x position des fensters
tempT = id.offsetTop; // momentane y position des fensters
document.onmousemove = move;
}
if (event.srcElement.className == ("scale")) // prüft ob scaliert wird (durch klassennamen)
{
doc1 = document.getElementById(name1);
doc2 = document.getElementById(name2); // die drei objekte werden geholt
id = document.getElementById(name3);
tempW = id.offsetWidth; // momentane breite des fensters
tempH = id.offsetHeight; // momentane höhe des fensters
stempL = doc1.offsetLeft; // momentane x position des scalierobjektes (im fenster)
stempT = doc1.offsetTop; // momentane y position des skalierobjektes (im fenster)
document.onmousemove = scale;
}
}

document.onmouseup = new Function("ampel=false")
//-->
</script>

</HEAD>
<BODY bgcolor="Silver">
<span id="span" class="span">
<span id="move" class="move" onmousedown="over('span')"></span><br>
<a href="#">link1</a><br>
<a href="#">link2</a><br>
<a href="#">link3</a><br>
<a href="#">link4</a><br>
<span><img onmousedown="over('scale', 'move', 'span')" id="scale" class="scale" src="resize.gif"></span>
</span>
</BODY>
</HTML>

*/

  1. hi!
    Ich habs nur kurz überflogen und vermute ein Fehler beim mouseevent.
    Für NS/Mozilla muss Du ein Eventhandler setzen,und zwar in der Art:

    window.captureEvents(Event.MOUSEMOVE);
    window.onMouseMove = navMove;

    anstatt nur:
    document.onmousemove = move;

    Alles in Allem mit Prüfung, ob IE oder sonst ein Browser:

    if (document.all)
             document.onmousemove = move;
    else
    {
             window.captureEvents(Event.MOUSEMOVE);
             window.onMouseMove = move;
    }

    Oben geht der IE rein, in den Elsezweig geht der NS/Mozilla.

    Grüße, Buergle