...

View Full Version : layer moving script for MOZILLA ...



vegeta
07-14-2003, 09:59 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>

vegeta
07-14-2003, 10:04 PM
Note that I wrote this script for Mozilla, so you can't try it out in IE

vegeta
07-19-2003, 11:03 AM
I modified someone else's script and it now works under IE and Mozilla:

<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>


<body>

<div id="d1" style="border: 4pt ridge gray; position: absolute; background-color: rgb(255, 255, 204); left: 42px; top: 84px;" onmousedown="myMouseDn()" onmouseup="myMouseUp()"></div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum