Solved

How can you find what HTML elements are at a specific pixel coordinate?

Posted on 2007-11-14
5
553 Views
Last Modified: 2009-12-16
I am looking for a JavaScript function that will take the X & Y Axis screen position, and return any HTML elements that display at that point.

Thanks for any help!
0
Comment
Question by:jshallard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 20284206
I know you can do this with .Net,

http://msdn2.microsoft.com/en-us/library/system.windows.forms.htmldocument.getelementfrompoint.aspx

To find position of element  with Javascript , I do have script.

How the X and Y co-ordinates are entered .. are these picked by mouse click ?

Let me know. I could suggest a way to get Element given the event object.

0
 
LVL 17

Expert Comment

by:gops1
ID: 20285982
Have a look at this example:

<html>
      <head>
            <title>Script Demo Gops</title>
            <style>body, table,input, select,span, textarea{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">


                  function getObjPosition(obName) {
                        // This function will return an Object with x and y properties
                        var useWindow=false;
                        var coordinates=new Object();
                        var x=0,y=0;
                        // Browser capability sniffing
                        var use_gebi=false, use_css=false, use_layers=false;
                        if (document.getElementById) { use_gebi=true; }
                        else if (document.all) { use_css=true; }
                        else if (document.layers) { use_layers=true; }
                        // Logic to find position

                        if (use_gebi) {
                              var o=obName;
                              x=AnchorPosition_getPageOffsetLeft(o);
                              y=AnchorPosition_getPageOffsetTop(o);
                        }else if (use_css) {
                              x=AnchorPosition_getPageOffsetLeft(obName);
                              y=AnchorPosition_getPageOffsetTop(obName);
                        }else if (use_layers) {
                              var found=0;
                              for (var i=0; i<document.anchors.length; i++) {
                                    if (document.anchors[i].name==obName) { found=1; break; }
                              }
                              if (found==0) {
                                    coordinates.x=0; coordinates.y=0; return coordinates;
                              }
                              x=document.anchors[i].x;
                              y=document.anchors[i].y;
                        }else {
                              coordinates.x=0; coordinates.y=0; return coordinates;
                        }
                        coordinates.x=x;
                        coordinates.y=y;
                        return coordinates;
                  }

                  function AnchorPosition_getPageOffsetTop (el) {
                        var ot=el.offsetTop;
                        while((el=el.offsetParent) != null) { ot += el.offsetTop; }
                        return ot;
                  }

                  function AnchorPosition_getPageOffsetLeft (el) {
                        var ol=el.offsetLeft;
                        while ((el=el.offsetParent) != null) { ol += el.offsetLeft;}
                        return ol;
                  }


                  window.onload=function(){
                        if (document.addEventListener){
                              document.addEventListener("mouseover", clickHandler, true);
                        }else if(document.attachEvent){
                              document.attachEvent("onmouseover", clickHandler);
                        }
                  }

                  function clickHandler(evt){
                        var msg="";
                        var obj = (typeof event != 'undefined')?event.srcElement: evt.target;
                        var o=getObjPosition(obj);
                        var t=document.getElementById('textarea');
                        msg+="Object Details";
                        msg+="\nObject Type: "+obj.tagName;
                        msg+="\nObject X pos: "+o.x;
                        msg+="\nObject Y pos: "+o.y;
                        t.value=msg;
                  }

          </script>
     </head>
<body>
      <table cellpadding="0" cellspacing="0" border="1" width="600">
            <tr>
                  <td colspan="3">The below image is from the main table</td>
            </tr>
            <tr>
                  <td colspan="3"><img src="1.jpg" width="86" height="120" border="1"></td>
            </tr>
            <tr>
                  <td><input type="text" name="textbox1"></td>
                  <td><input type="checkbox" name="checkbox1"></td>
                  <td>
                        <select name="testselect">
                              <option>Opt 1</option>
                              <option>Opt 1</option>
                        </select>
                  </td>
            </tr>
            <tr>
                  <td colspan="3"><textarea rows="10" cols="100" id="textarea" name="textarea"></textarea></td>
            </tr>
      </table>
</body>
</html>
0
 

Author Comment

by:jshallard
ID: 20289206
Hi

Thanks for both your prompt responses.  What i am after is something like the "GetElementFromPoint" method that pravinasar posted - but that is in javascript.

Gosp1 - thanks for posting that code - but that is really coming at it from the opposite end that i need.  I want to supply the x & y, and be given the element.

Thanks again for any input
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 20290227
0
 

Author Comment

by:jshallard
ID: 20292713
Thanks pravinasar

The link you gave is only for HTML rendered in the java "webrenderer browser"... however, it did lead me on to discover the following, which was what i was after:

http://www.codingforums.com/archive/index.php?t-21674.html
http://msdn2.microsoft.com/en-us/library/ms536417.aspx

So thanks for your help!
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint and CAML query help 4 26
Diff of the day 2 43
object method as an event handler 8 77
Submit button if clicked twice submits twice 1 24
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question