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 9 of 9

Thread: Who is higher?

  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Who is higher?

    Hi All,

    Given any two HTML elements, how do I find out who is higher up in the hierarchy?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not sure what you are asking. Can you rephrase your question better?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rephrasing question

    This is my scenario:

    Consider any two elements from a sample HTML page. Let them be <div> and <span>. Also let the <div> contain the <span>. Consider that the user clicks on the span, and keeping the mouse clicked, moves the pointer into the <div> and releases the mouse. I want to 'select' the <div>, since that is the highest possible parent for both <div> and <span>.

    So now my question is this: given any two elements from a HTML page, how do I know who is higher up in the hierarchy? If I know this, I can move up from the lower hierarchy element and find out if the higher hierarchy element is in any way a parent. If yes, I'll 'select' the higher hierarchy element.

    Hope my explanation is clear.

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    if(parseFloat(document.getElementById('span_id1').offsetTop) < parseFloat(documengt.getElementById('span_id2').offsetTop)){
    //span 1 is higher than span 2
    }

    like that??
    Last edited by boeing747fp; 08-01-2006 at 09:13 AM.

  • #5
    New Coder
    Join Date
    Jun 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Oops...

    Thanx, boeing747fp!! offsetTop returns me the position of the element on the screen from the top. But dats not what i want. What I want is this:

    Consider two elements, span1 and span2 in this document.

    <html>
    <body>
    <span1>
    <span2></span2>
    </span1>
    </body>
    </html>

    Now span2 is supposed to return 4. This is because span2 is present 4 levels down the HTML document. Likewise, span1 is supposed to return 3, body should return 2 and html should return 1.

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So use the parentNode property of each element to go up the tree until you find <body>.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function MseD(){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var obj=zxcEventObj(zxcevt)
     var els=document.getElementsByTagName('BODY')[0].getElementsByTagName('*');
     for (var zxc0=0;zxc0<els.length;zxc0++){
      if (els[zxc0]==obj){
       alert(obj.tagName+' '+zxc0+'\n'+obj.title);
      }
     }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    document.onmousedown=MseD;
    //-->
    </script>
    </head>
    
    <body>
    <span title="S1" >
    Test 1
    <br>
    <br>
    <br>
    <span title="S2" >Test 2</span>
    <br>
    <br>
    </span>
    </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/

  • #8
    New Coder
    Join Date
    Jun 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ok thanx but

    ... is there no property in Javascript for getting this?

  • #9
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, there is no property that indicates the hierarchical level an element is at.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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