PDA

Click to See Complete Forum and Search --> : layer moving script for MOZILLA ...

vegeta
07-15-2003, 02:16 PM
I want to make my layer moving script (for IE) compatible with Mozilla, but I can't get it to work properly. My layer moves, but very shaky. It seems to me that there is a problem with the onmouseup event ... After several times clicking and draging the layer it seems to work a bit better, but not yet the way it has to. This is what I've got :

thx in advance

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> testMZ </title>

<STYLE>
.drag
{
CURSOR: hand; POSITION: relative
}
</STYLE>

<SCRIPT>

var dragapproved=false
var eventTarget
var layerY
var eventY

function move(capturedEvent)
{
if (dragapproved == true)
{
eventTarget.style.top = layerY+capturedEvent.layerY-eventY
}
}

function drags(capturedEvent)
{
if (document.getElementById && capturedEvent.target.className == "drag")
{
dragapproved=true
eventTarget=capturedEvent.target
layerY=eventTarget.y
eventY=capturedEvent.layerY
window.onmousemove=move
}
}

document.onmousedown = drags
document.onmouseup = new Function("dragapproved=false")

</SCRIPT>

</head>

<body>
<DIV style="position:absolute; left:300px; top:37px; visibility:visible;"><IMG id="scrollUnit" name="scrollUnit" class="drag" src="item_scrollunit.gif"></DIV>
</body>
</html>

Note that I wrote this script for Mozilla, so you can't try it out in IE
gil davis
07-16-2003, 07:45 AM
You are assigning the mousemove event each time the mousedown fires. You really don't need to do that. Perhaps that is causing the jerky movement. Try my demo page at http://gil.davis.home.att.net/followmouse.htm . It was designed for NS 4.x, but it also works in NS 6+, Mozilla and IE 5+, but there are some minor differences.
vegeta
07-19-2003, 04:58 AM
many thanks for your script !
I changed a bit for myself but I also noticed you used event.x and event.y for mozilla... This must be event.layerX and event.layerY (see below)

<html>
<head>

<style type="text/css">
body {overflow: hidden}
</style>

<script>

<!--
var moveIt = false;
var currX = 0;
var currY = 0;

if (!document.getElementById)
{
document.getElementById = function(strID)
{
if (document.layers) return document[strID];
if (document.all) return document.all[strID];
return null; // expect the unexpected
}
}

function followMouse(evt)
{
if (moveIt)
{
if (document.all)
{
document.getElementById("d1").style.left = event.x - currX;
document.getElementById("d1").style.top = event.y - currY;
}
else
{
document.getElementById("d1").style.left = evt.pageX - currX;
document.getElementById("d1").style.top = evt.pageY - currY;
}
}
}

function myMouseUp(evt)
{
moveIt = false;

return false;
}

function myMouseDn(evt)
{
moveIt = true;

if (document.all)
{
currX = event.x - event.srcElement.offsetLeft;
currY = event.y - event.srcElement.offsetTop;
followMouse();
}
else
{
currX = evt.layerX;
currY = evt.layerY;
followMouse(evt);
}
return false;
}

function init()
{
if(document.layers) //ns4
{
document.d1.document.captureEvents(Event.MOUSEMOVE || Event.MOUSEDOWN || Event.MOUSEUP);
document.d1.document.onmousemove = followMouse;
document.d1.document.onmousedown = myMouseDn;
document.d1.document.onmouseup = myMouseUp;
}
}


document.onmousemove = followMouse;
document.onmousedown = myMouseDn;
document.onmouseup = myMouseUp;
//-->

</script>

</head>
vegeta
07-19-2003, 05:02 AM
ah yeah, I forgot to mention that I replaced 'document.onmousedown = myMouseDn;' to let the script work right under mozilla.
The script now acts the same under mozilla as under IE, ie. the layer topleft isn't shifted to the mousepointer on mouseDown, like it did before (under Mozilla).