Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Netherlands
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layer moving script for MOZILLA ...

    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>

  • #2
    New Coder
    Join Date
    Oct 2002
    Location
    Netherlands
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Note that I wrote this script for Mozilla, so you can't try it out in IE

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    Netherlands
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up update

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •