SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    finding the position of an element on the screen

    Is it possible to do this? Say I want to find out where on the screen a specific div is, and i want to know the values of the left and top properties. Can i find this out? If so, how?

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course you can, it's the style object's properties you should look at...
    http://www.webreference.com/js/column73/6.html

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried using that code, but it keeps giving me NaN. heres the code i used:

    PHP Code:
    var obj document.getElementById('scroll_hold');
        var 
    xlocation parseInt(obj.style.left);
        
    alert(xlocation); 

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by pixil.magic
    I tried using that code, but it keeps giving me NaN.
    Try using obj.pixelLeft if the browser is IE
    IE = (document.all) ? 1 : 0;
    obj = document.getElementById("scroll_hold");
    if(IE)
    {
    alert(obj.pixelLeft);
    }
    else
    {
    alert(obj.style.left);
    }

  5. #5
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i got that to work, but its giving me the position relative to its container, which i dont want. I want its exact position on the page, and the element is gonna be nested inside a few tables.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    obj.offsetLeft;
    obj.offsetTop;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    obj.offsetLeft;
    obj.offsetTop;
    Thank you SO much! That worked beautifully

  8. #8
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a question; why use tables, when you can use divs?
    Code:
    <html>
      <head>
        <style>
        #div1
        {
          position: relative;
          left: 0px;
          top: 0px;
          width: 100px;
          height: 50px;
          background-color: #ff0000;
        }
        #div2
        {
          position: absolute;
          left: 0px;
          top: 100px;
          width: 100px;
          height: 50px;
          background-color: #00ff00;
        }
        #div3
        {
          position: absolute;
          left: 150px;
          top: 0px;
          width: 100px;
          height: 50px;
          background-color: #0000ff;
        }
        </style>
        <script language="javascript">
          function handleClick() 
          {
            var obj = document.getElementById("div1");
            var x = obj.offsetLeft;
            var y = obj.offsetTop;
            alert(x + ", " + y);
            var obj = document.getElementById("div2");
            obj.style.left = x;        
            var obj = document.getElementById("div3");
            obj.style.top = y;                
          }
        </script>
      </head>
      <body>
        <table id="tb1">
          <tr>
            <td>
              <table id="tb2">
                <tr>
                  <td>
                     <div id="div1" onclick="handleClick()">Div 1<br/>Click on me</div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <div id="div2">Div 2</div>
        <div id="div3">Div 3</div>
      </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its not my layout, its for a client, i just have to develop some javascript stuff for them, and stick it into their layout.

  10. #10
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, one more question. is there a similar method for NS4 instead of .offsetXX ? It doesnt seem to be working in that browser.

  11. #11
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I remember correct, NS4 had properties x & y (only for <a> tags)

  12. #12
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem in NS4 is that it just infinately reloads the page before it ever gets finished loading. So basically its just a flashing screen that never gets loaded. Heres the code:
    PHP Code:
    function positionScroll() {

        if (
    n4) { 
            var 
    obj document.layers['scroll_hold'];
            var 
    div document.layers['div_container'];
            var 
    up document.layers['scroll_up'];
            var 
    down document.layers['scroll_down'];
        }
        else if (
    ie) {
            var 
    obj document.all.scroll_hold;
            var 
    div document.all.divContainer;
            var 
    up document.all.scrollUp;
            var 
    down document.all.scrollDown;
        }
        else if (
    n6) {
              var 
    obj document.getElementById('scroll_hold');
            var 
    div document.getElementById('divContainer');
            var 
    up document.getElementById('scrollUp');
            var 
    down document.getElementById('scrollDown');
        }
        
        if (
    n4) {
            var 
    xlocation parseInt(obj.pageX);
            var 
    ylocation parseInt(obj.pageY);
            
    div.pageX xlocation 24 "px";
            
    div.pageY ylocation "px";
            
    up.pageX xlocation "px";
            
    up.pageY ylocation 70 "px";
            
    down.pageX xlocation "px";
            
    down.pageY ylocation 160 "px";
        }
        else
        {
            var 
    xlocation parseInt(obj.offsetLeft);
            var 
    ylocation parseInt(obj.offsetTop);
            
    div.style.left xlocation 24 "px";
            
    div.style.top ylocation "px";
            
    up.style.left xlocation "px";
            
    up.style.top ylocation 70 "px";
            
    down.style.left xlocation "px";
            
    down.style.top ylocation 160 "px";
        }


    Im calling the function from the body onload event.

  13. #13
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ********************

    "Why oh why do these people torture themselves with NS4??"

    ********************
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  14. #14
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its not me, its for a client. He HAS to have all this cool javascript, BUT it has to work in pretty much every browser since the 4's. His navigation and content are ONLY javascript. I wonder what hes gonna do when someone comes along that has it turned off.......

    Anyways, if anyone could help me with this, it would be greatly appreciated.

  15. #15
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, I wish I could find people that wanted to pay me twice the $$$ for 2% more result. I'd have it made in the shade.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •