Results 1 to 2 of 2

Thread: "this" operator error or "style.left" error not sure

  1. #1
    Join Date
    Feb 2009
    Posts
    0

    "this" operator error or "style.left" error not sure

    Hi,

    I am new to javascript and finding it a bit confusing right now.

    My problem:
    I have pasted two examples below. example1.html is written by me and not working as expected. example2.html is something i found on the net and is working.

    Try out the following: after opening example1.html, click on the red box. An alert displaying left top corner is shown. the output is not as expected.
    After opening example2.html. click on the green box. alert displaying the top left corner will be displayed.

    In both these cases I have used onclick and am passing "this" to the function called for onclick, but in example2 style.left gives expected output and not in example1. Why is this so? Thanks in advance.

    Thanks, GB

    example1.html:
    <html>
    <head>
    <title> example1 </title>
    <style type="text/css">
    #parentdiv {
    background-color : red;
    width: 75px;
    height: 75px;
    position: absolute;
    display: block;
    }
    </style>
    <script type="text/javascript">
    function displr(ob)
    {
    var obj = ob;
    var x = parseInt(obj.style.left);
    alert(x);
    }
    </script>

    </head>
    <body>
    <div id="parentdiv" onclick="displr(this)">
    </div>
    <body>





    example2.html:
    <html>
    <head>
    <title> draging using JS, from : http://www.thebroth.com/blog/113/how-to-drag-something </title>
    <style type="text/css">
    #outerdiv {
    background-color : red;
    width: 400px;
    height: 400px;
    position absolute;
    border: 2px solid;
    overflow: hidden;
    display: block;
    }
    #dragObject {
    border: 2px solid;
    border-color: #6c0 #170 #170 #6c0;
    background-color: #3a0;
    width: 25px;
    height: 25px;
    position: absolute;
    text-align: center;
    display: none;
    cursor: default;
    }
    </style>

    <script type="text/javascript">
    var dragObject, offsetX, offsetY, isDragging=false;
    window.onload = init;
    document.onmousemove = mM;
    document.onmouseup = mU;

    function init() {
    var ob = document.getElementById("dragObject");

    ob.ondrag=function(){return false;};
    ob.onselectstart=function(){return false;};

    ob.style.left="100px";
    ob.style.top="100px";
    ob.style.display="block";
    }

    function mD(ob1, e) {
    dragObject = ob1;

    if(window.event) e=window.event;

    var dragX = parseInt(dragObject.style.left);
    var dragY = parseInt(dragObject.style.top);

    var mouseX = e.clientX;
    var mouseY = e.clientY;

    offsetX = mouseX - dragX;
    offsetY = mouseY - dragY;
    alert(dragX);
    alert(dragY);
    isDragging = true;

    return false;
    }

    function mM(e) {
    if(!isDragging) return;

    if(window.event) e=window.event;

    var newX = e.clientX - offsetX;
    var newY = e.clientY - offsetY;

    dragObject.style.left = newX + "px";
    dragObject.style.top = newY + "px";

    return false;
    }

    function mU()
    {
    if(!isDragging) return;
    isDragging = false;
    return false;
    }
    </script>

    </head>
    <body>
    <div id="outerdiv">
    <div id="dragObject" onclick="mD(this,event)"></div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2009
    Location
    Scotland
    Posts
    15
    I can't see the problem myself.
    Can you please specify: what error do you get, exactly?
    Do you have a live copy of this somewhere? That way we can be sure that it isn't a transcription error or caused by other code.

Posting Permissions

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