title: How can we find the coordinates or position of element using jquery mobile/Jquery?
body: <p>The code i am using is this for  a mobile app. I want to find  out the position of the current selected object on our mobile screen>here I have two paragraph element id "#first" and "#second" whose position i am trying to find.But it always return me <code>HTML coords (0,0)</code>   in result. I guess this is becoz i am using jquery function .postion() instead of jquery mobile function. Please help </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=320; user-scalable=no" /&gt;
  
      &lt;link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"&gt;
  
      &lt;script type="text/javascript" charset="utf-8" src="main.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
       $("*", document.body).click(function (e) {
       var offset = $(this).position();
       e.stopPropagation();
       $("#result").text(this.tagName + " coords ( " + offset.left + ", " +
                                    offset.top + " )");
       });
  
      &lt;/script&gt;
  
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;div data-role="page"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;My Title&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
       &lt;div data-role="content" id="objects"&gt;
          &lt;p id="first"&gt;1st object&lt;/p&gt;
          &lt;p id="second"&gt;2nd object&lt;/p&gt;
          &lt;p id="result"&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;&lt;!-- /page --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>