title: jQuery: Element offset() coordinates relative to another element
body: <p>I'm trying to use <code>jQuery</code> and <code>jQuery UI</code> to drag a <code>&lt;ul&gt;</code> element horizontally located inside a <code>&lt;div&gt;</code>.</p>
  
  <p>I'd like to get the coordinates of the buttons located inside the <code>&lt;li&gt;</code> elements to center them inside <code>#the_parent</code>, but the position I get changes every time I resize the browser window, how I can get a position relative to <code>#the_parent</code>?</p>
  
  <pre><code>&lt;script type:"text/javascript"&gt;
      $(document).ready (function () {
          $(".button").click (function () {
              var offset = $(this).offset();
              alert (offset.left);
          });
      });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
      #dragme li { float:left; list-style:none; }
      #the_parent { width:100%; }
      .spacer { width:100px; }
      .button div { padding:5px; background-color:darkgrey; color:white; }
  &lt;/style&gt;
  &lt;!-- this is contained inside another div of width:600px and it's centered in the middle of the page --&gt;
  &lt;div id="the_parent"&gt;
      &lt;ul id="dragme"&gt;
          &lt;li class="spacer"&gt;&lt;/li&gt;
          &lt;li id="btn_01" class="button"&gt;
              &lt;div&gt;click&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="spacer"&gt;&lt;/li&gt;
          &lt;li id="btn_02" class="button"&gt;
              &lt;div&gt;click&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="spacer"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>