title: Pure JavaScript function similar to jQuery.offset()?
body: <p>In a small <a href="http://ok.ru/games/preferans" rel="noreferrer">iframe-application</a> at the Russian social network Ok.ru I use the following call to resize the iframe:</p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt; 
  &lt;script src="http://api.odnoklassniki.ru/js/fapi.js" 
  type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt; 
  FAPI.init("http://api.odnoklassniki.ru/", "XXX_YYY",
  function() {
          alert("clientHeight " + document.getElementById("fb-root").clientHeight);
          alert("offsetHeight " + document.getElementById("fb-root").offsetHeight);
          FAPI.UI.setWindowSize(720, 1200);
  }, function(error){
          alert("API initialization failed");
  });
  &lt;/script&gt; 
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>i.e. the iframe-height is currently hardcoded to <strong>1200</strong>.</p>
  
  <p>It works okay, but I'd like to use the height/position of <strong>#fb-root</strong> element instead.</p>
  
  <p>Does anybody please have an idea, which JavaScript or CSS function could be used here - if I don't want to include <a href="http://api.jquery.com/category/offset/" rel="noreferrer">jQuery</a> just for one <strong>$(#fb-root).offset()</strong> call?</p>
  
  <p>I've also looked at their library <a href="http://api.odnoklassniki.ru//js/fapi.js" rel="noreferrer">http://api.odnoklassniki.ru//js/fapi.js</a> but it doesn't include such function. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've added two alert-calls to my source code above, but they only print</p>
  
  <pre><code>clientHeight 0
  offsetHeight 0
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The following code seem to work well for my iframe-app now in Google Chrome and Mozilla Firefox, regardless of how many <br>s do I add for testing it. But with Internet Explorer it fails to resize the window and alert shows top=1107 instead of top=1157 in Google Chrome, thus the html table at the bottom is cut off:</p>
  
  <p><img src="https://i.stack.imgur.com/qbHr8.png" alt="preferans"></p>
  
  <pre><code>... here my flash game + html table with players ...
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script src="http://api.odnoklassniki.ru/js/fapi.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  FAPI.init("http://api.odnoklassniki.ru/", "XXX_YYY",
  function() {
          var top = findTop(document.getElementById("fb-root"));
          FAPI.UI.setWindowSize(720, Math.max(top, 1200));
  }, function(error){
          alert("API initialization failed");
  });
  function findTop(obj) {
          if(!obj) return 0;
          return obj.offsetTop + findTop(obj.offsetParent);
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>