SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detecting Position of DIV

    I need to get the position of a div I am putting on the screen any chance someone can point me in the right direction, im just learning Javascript but im not expecting the code written for me

    Thanks in advance
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It might be helpful to look at the source of these functions: xLeft, xTop.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for that, although i dont really understand it and how to implement it :/
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's something to experiment with:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    #d1 {
      position: absolute;
      overflow: hidden;
      background: #ccc;
      border: 1px solid #009;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var ele = document.getElementById('d1');
      ele.style.width = '200px';
      ele.style.height = '200px';
      ele.style.left = '300px';
      ele.style.top = '300px';
    }
    </script>
    </head>
    <body>
    
    <div id='d1'>d1</div>
    
    </body>
    </html>
    Feel free to ask any questions you may have.


  5. #5
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code So i take it that javascript sets the position of the div,

    What i am trying to do is have some buttons on the page up, down, left, right, ans when i click one the image on the page moves accordingly, if i can get the image position then i i can add so many pixels on to move it.

    Is this getting to complicated?
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Here's a snippet from my library.js that shoud do what you want - it's older (wrote it like two to three years ago) so it works all the way back to NS4, but still works fine on modern browsers.

    You may also find it's getObject function handy since it gives you a 'getElementById' workalike that calls getElementById if available, but throws back to all the 'old fashioned' ways of doing it if it isn't.

    Code:
    function getObject(name) {
      if (document.getElementById) {
        return document.getElementById(name);
      } else if (document.all) {
        return document.all[name];
      } else if (document.layers) {
        if (document.layers[name]) {
          return document.layers[name];
        } else {
          return document.layers.testP.layers[name];
        }
      }
    }
    
    function findX(obj) {
      var curtop=0;
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          curtop+=obj.offsetLeft
          obj=obj.offsetParent;
        }
      } else if (obj.x) {
        curtop+=obj.x;
      }
      return curtop;
    }
    
    function findY(obj) {
      var curtop=0;
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          curtop+=obj.offsetTop
          obj=obj.offsetParent;
        }
      } else if (obj.y) {
        curtop+=obj.y;
      }
      return curtop;
    }
    So, to find the position of:

    <div id="divid">

    you just do:

    obj=getObject('divid');
    obj_x=findX(obj);
    obj_y=findY(obj);

    That help?

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    webnoob, here's something else to experiment with:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    #mover {
      position: absolute;
      overflow: hidden;
      width: 100px;
      height: 100px;
      background: #9cc;
      border: 1px solid #900;
    }
    #panel {
      position: relative;
      width: 100px;
      height: 100px;
      padding: 0;
      background: #cc9;
      border: 1px solid #009;
    }
    .btn {
      position: absolute;
      overflow: hidden;
      left: 0;
      width: 96px;
      height: 24px;
      padding: 0 2px;
      cursor: pointer;
      font-size: 18px;
      color: #000;
    }
    #btnU {
      top: 0;
      text-align: center;
    }
    #btnR {
      left: 48px;
      top: 38px;
      width: 48px;
      text-align: right;
    }
    #btnD{
      top: 76px;
      text-align: center;
    }
    #btnL {
      top: 38px;
      width: 48px;
      text-align: left;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var mvr = document.getElementById('mover');
      mvr.style.left = '400px';
      mvr.style.top = '300px';
      var i, panel = document.getElementById('panel');
      var btns = panel.getElementsByTagName('div');
      for (i = 0; i < btns.length; i++) {
        btns[i].onclick = btnOnClick;
      }
    }
    function btnOnClick()
    {
      var delta = 25;
      var mvr = document.getElementById('mover');
      var x = parseInt(mvr.style.left);
      var y = parseInt(mvr.style.top);
      switch (this.id) {
        case 'btnU':
          y -= delta;
          break;
        case 'btnR':
          x += delta;
          break;
        case 'btnD':
          y += delta;
          break;
        case 'btnL':
          x -= delta;
          break;
      } // end switch
      mvr.style.left = x + 'px';
      mvr.style.top = y + 'px';
    }
    </script>
    </head>
    <body>
    
    <div id='panel'>
      <div id='btnU' class='btn'>Up</div>
      <div id='btnR' class='btn'>Right</div>
      <div id='btnD' class='btn'>Down</div>
      <div id='btnL' class='btn'>Left</div>
    </div>
    
    <div id='mover'><img src=''></div>
    
    </body>
    </html>

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does thanks, although im having trouble getting some values to display. For instance i try to alert the obj_y variable but it comes back undefined. Any ideas?

    Heres the code i have,
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    #divid {
      position: absolute;
      overflow: hidden;
      background: #ccc;
      border: 1px solid #009;
      width: 100px;
      height: 100px;
      top: 100px;
      left: 100px;
    }
    </style>
    <script type='text/javascript'>
    function getObject(name) {
      if (document.getElementById) {
        return document.getElementById(name);
      } else if (document.all) {
        return document.all[name];
      } else if (document.layers) {
        if (document.layers[name]) {
          return document.layers[name];
        } else {
          return document.layers.testP.layers[name];
        }
      }
    }
    
    function findX(obj) {
      var curtop=0;
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          curtop+=obj.offsetLeft
          obj=obj.offsetParent;
        }
      } else if (obj.x) {
        curtop+=obj.x;
      }
      return curtop;
    }
    
    function findY(obj) {
      var curtop=0;
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          curtop+=obj.offsetTop
          obj=obj.offsetParent;
        }
      } else if (obj.y) {
        curtop+=obj.y;
      }
      return curtop;
    }
    	
    var obj=getObject('divid');
    var obj_x=findX(obj);
    var obj_y=findY(obj);
    	
    </script>
    </head>
    <body>
    
    <div id='divid'>d1</div>
    
    <input type="button" name="test" value="getimage" onclick="alert(obj_y)">
    
    </body>
    </html>
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  9. #9
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, you need to understand something about javascript AND about HTML...

    THAT code is going to generate an error, because when you run the getObject, the DIV doesn't EXIST yet in the source code.

    Script runs inside the html in source order - if you call it before the item you are checking for even exists in the source code, it's not going to find it.

    Here's a version showing it working:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    #divid {
      position: absolute;
      overflow: hidden;
      background: #ccc;
      border: 1px solid #009;
      width: 100px;
      height: 100px;
      top: 100px;
      left: 120px;
    }
    </style>
    <script type='text/javascript'>
    function getObject(name) {
      if (document.getElementById) {
        return document.getElementById(name);
      } else if (document.all) {
        return document.all[name];
      } else if (document.layers) {
        if (document.layers[name]) {
          return document.layers[name];
        } else {
          return document.layers.testP.layers[name];
        }
      }
    }
    
    function findX(obj) {
      var curtop=0;
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          curtop+=obj.offsetLeft
          obj=obj.offsetParent;
        }
      } else if (obj.x) {
        curtop+=obj.x;
      }
      return curtop;
    }
    
    function findY(obj) {
      var curtop=0;
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          curtop+=obj.offsetTop
          obj=obj.offsetParent;
        }
      } else if (obj.y) {
        curtop+=obj.y;
      }
      return curtop;
    }
    
    function alert_position(name) {
    	var obj=getObject(name);
     	obj_x=findX(obj);
     	obj_y=findY(obj);
     	alert("X position: "+obj_x+"\nY Position: "+obj_y);
    }
    	
    </script>
    </head>
    <body>
    
    <div id='divid'>d1</div>
    
    <input type="button" name="test" value="getimage" onclick="alert_position('divid')">
    
    </body>
    </html>
    Generally it's not a good idea to try and calculate the position of an object until AFTER the page has finished loading - doing it during page-load can lead to innacuracies as things like CSS and images that don't have sizes specified can move the content around.

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for the code, when i get back home ill take a crack at it

    Deathshadow: lol, thanks for the explanation, had a dumb moment and forgot the fundamentals
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mike, just tried the code out and its fantastic, cant believe it was so simple to do . I can understand all teh functions and stuff aswell

    Thanks again for that, i can use this and adapt it to move diagonal

    Just another question, ive been reading the Javascript Bible which im really enjoying and im learning alot (i think) the thingh is i want to start learning from some good online tutorials as they teach you how to do "something" not just teach u a load of functions. Any ideas on some good starting places?
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sry im back again can someone please explain this line please, i see its setting a variable but what is with the comma and then the panel bit?

    HTML Code:
    var i, panel = document.getElementById('panel');
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi webnoob,

    You're welcome! I hope you had fun with the demo .

    I'm not too good on recommending tutorials. But you have a good point. I also think I learn more by working on a project that is "almost" too hard for me. It forces me to seek out resources. I think it is very important also to get very comfortable with your references - especially the W3C site. Always be able to go quickly to a reference instead of sitting there and guessing. Also, always use the W3C validator.

    Try to seek out info on what is considered "best practices":
    - separation of structure/style/behavior,
    - "unobtrusive" Js behaviors.

    Search for the hot bloggers in this field and consider what they say.

    There is no end to it!

    In the code you posted, if it were like the following it would simply declare two variables having function-scope (they don't exist outside that function):

    var i, panel;

    The following does the same except that it also initializes 'panel' with an object reference.

    var i, panel = document.getElementById('panel');

    I think you are on the right track. Search the web and learn from what others have written - but then come up with a project that challenges you, and go for it. Even if you reinvent wheels, don't worry about it - just keep it fun!

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw... deathshadow has provided some good code too. be sure to look at it closely. It would be instructive to compare my xLeft and xTop (links in my first post in this thread) to deathshadow's findX and findY. I have similar functions which I call xPageX and xPageY. Ask yourself why we need these different functions.

    In the demo I posted there are some more points that could be brought out. Ask yourself...

    Why does 'panel' have "position:relative"? What happens if you comment-out that line?

    'mover' has "position:absolute". What happens if you change it to "relative"? It may still appear to work, but what's different now?

    In the onload function, 'mover' is given explicit left and top values. What happens if you comment-out those two lines?

    In the onload function I registered an event listener on each of the btn elements. The DOM2 (standard) way of doing this is element.addEventListener(). The way I did it in that demo is called the DOM0 model. Why did I do it that way and what's the difference?


  15. #15
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike for the posts, i will look into it all closely, im pretty much ok with stylesheets/css as i use them everyday at work alongside php, its mainly the javascript functions that baffles me at the mo
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"


Bookmarks

Posting Permissions

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