www.webdeveloper.com
Results 1 to 8 of 8

Thread: x/y position of nested div - IE?

  1. #1
    Join Date
    Aug 2008
    Posts
    15

    x/y position of nested div - IE?

    I have a tabbed environment.
    Parent div with a div for each tab.
    Inside one tab are a set of options - each a div.
    On selecting one of the options a greyed-out div is laid over the other divs rendering them inoperable so only one option can be fed to the form.

    This code works well - but IE doesn't like it (the nested divs?).
    It gets the size right but not x or y pos.
    I wonder about using jquery - ?
    I generally wonder: confused:
    Any suggestions would be most welcome.

    Code:
    function disableDivs() {
    d = document.getElementsByTagName("BODY")[0];
    for(x=0;x<arguments.length;x++) { if (document.getElementById(arguments[x])) {
        xPos = document.getElementById(arguments[x]).offsetLeft; 
        yPos = document.getElementById(arguments[x]).offsetTop;
        oWidth = document.getElementById(arguments[x]).offsetWidth;    
        oHeight = document.getElementById(arguments[x]).offsetHeight;
        cDivs[cDivs.length] = document.createElement("DIV");
        cDivs[cDivs.length-1].style.width = oWidth+"px";
        cDivs[cDivs.length-1].style.height = oHeight+"px";
        cDivs[cDivs.length-1].style.position = "absolute";
        cDivs[cDivs.length-1].style.left = xPos+"px";
        cDivs[cDivs.length-1].style.top = yPos+"px";
        cDivs[cDivs.length-1].style.backgroundColor = "#999999";
        cDivs[cDivs.length-1].style.opacity = .5;
        cDivs[cDivs.length-1].style.filter = "alpha(opacity=50)";
        d.appendChild(cDivs[cDivs.length-1]); }}}
    function hideCDivs() { for (hippopotamus=0;hippopotamus<cDivs.length;hippopotamus++) {
    document.getElementsByTagName("BODY")[0].removeChild(cDivs[hippopotamus]); }
    cDivs = []; }

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Use jQuery to develop a cross-browser solution.
    $(selector).offset() will return an object with absolute position (left, top) of the element relative to the document.
    $(selector).position() will return another object with relative position to the element's parent container.

    var elt=arguments[x];
    var offsets=$(elt).offset();
    xPos=offsets.left;
    yPos=offsets.top;

    oWidth = $(elt).width();
    oHeight = $(elt).height();

    The oWidth and oHeight would be the width and height of the element without the padding, border and margin.

    You could use innerWidth() and innerHeight() is you would like the width and height to include the padding,
    outerWidth() and outerHeight() to include both padding and borders.

    All you have to do is use the jquery library to take advantage of its cross-browser methods.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    There is no need of jQuery with a function like this (see findPosition from Peter-Paul Koch)
    Code:
    function getPos(obj){var curleft=curtop=0; 
    	if (obj.offsetParent) 
    		do {curleft+=obj.offsetLeft;curtop += obj.offsetTop;} 
    			while (obj=obj.offsetParent);
    	return [curleft,curtop];
    }

  4. #4
    Join Date
    Aug 2008
    Posts
    15

    almost there

    @007Julien
    I like the idea of extending my js knowledge - currently very weak.

    To the extent that, while I follow your code, I am not sure how to implement it

    I presume (obj) is the element id - yes?
    How do I get curleft set instead of xpos? [yes, very weak !]

    I really like the effect but if doesn't work in IE then... sigh -

    merci

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    The argument obj is rather an object than a string !

  6. #6
    Join Date
    Aug 2008
    Posts
    15

    object

    julien
    You will probably need to give me a code example so I can see how to get curleft into the code (not written by me) that I already have.

    Sorry to be such a noob

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    With any HTML code and, for example, an element identified by myElm, like the following span
    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=utf-8">
    <title>Use of function getPos</title>
    <style type="text/css">
    #page {display:block;margin:30px auto;text-align:center}
    </style>
    </head>
    
    </body>
    	<div id="page">
    		<p>Hello <span id="myElm">Arfa !</span></p>
    	</div>
      
    <script type="text/javascript">
    
    // The function in a script
    function getPos(obj){var curleft=curtop=0; 
    	if (obj.offsetParent) 
    		do {curleft+=obj.offsetLeft;curtop += obj.offsetTop;} 
    			while (obj=obj.offsetParent);
    	return [curleft,curtop];
    }
    // The corresponding element (the span tag a DOM object which exists)
    var objElm=document.getElementById('myElm');
    // We call this function with this element as argument  
    var xy=getPos(objElm);
    // To get this coordinates
    alert('Span tag coordinates\n'+xy[0]+' pixels left\n'+xy[1]+' pixels top');
    </script>
    </body>
    </html>

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    var cDivs = [];
    
    function disableDivs() {
     var d = document.getElementsByTagName("BODY")[0];
     for(var obj,xy,x=0;x<arguments.length;x++) {
      obj=document.getElementById(arguments[x]);
      if (obj) {
        xy=pos(obj);
        cDivs[cDivs.length] = document.createElement("DIV");
        cDivs[cDivs.length-1].style.width = obj.offsetWidth+"px";
        cDivs[cDivs.length-1].style.height = obj.offsetHeight+"px";
        cDivs[cDivs.length-1].style.position = "absolute";
        cDivs[cDivs.length-1].style.left = xy[0]+"px";
        cDivs[cDivs.length-1].style.top = xy[1]+"px";
        cDivs[cDivs.length-1].style.backgroundColor = "#999999";
        cDivs[cDivs.length-1].style.opacity = .5;
        cDivs[cDivs.length-1].style.filter = "alpha(opacity=50)";
        d.appendChild(cDivs[cDivs.length-1]);
      }
     }
    }
    
    function pos(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    
    function hideCDivs() {
     for (hippopotamus=0;hippopotamus<cDivs.length;hippopotamus++) {
      document.getElementsByTagName("BODY")[0].removeChild(cDivs[hippopotamus]);
     }
     cDivs = [];
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <div style=position:absolute;left:100px;top:100px;width:400px;height:400px;background-Color:red;" >
    <div id="tst" style=position:relative;left:10px;top:50px;width:200px;height:200px;background-Color:red;" >
    </div>
    </div>
    <script  type="text/javascript">
    /*<![CDATA[*/
    disableDivs('tst');
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles