Search code examples
javascriptiframesocial-networking

Pure JavaScript function similar to jQuery.offset()?

In a small iframe-application at the Russian social network Ok.ru I use the following call to resize the iframe:

<div id="fb-root"></div> 
<script src="http://api.odnoklassniki.ru/js/fapi.js" 
type="text/javascript"></script> 
<script type="text/javascript"> 
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");
});
</script> 
</body> 
</html>

i.e. the iframe-height is currently hardcoded to 1200.

It works okay, but I'd like to use the height/position of #fb-root element instead.

Does anybody please have an idea, which JavaScript or CSS function could be used here - if I don't want to include jQuery just for one $(#fb-root).offset() call?

I've also looked at their library http://api.odnoklassniki.ru//js/fapi.js but it doesn't include such function.

UPDATE

I've added two alert-calls to my source code above, but they only print

clientHeight 0
offsetHeight 0

UPDATE

The following code seem to work well for my iframe-app now in Google Chrome and Mozilla Firefox, regardless of how many
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:

preferans

... here my flash game + html table with players ...
<br>
<br>
<br>
<br>
<br>
<br>
<div id="fb-root"></div>
<script src="http://api.odnoklassniki.ru/js/fapi.js" type="text/javascript"></script>
<script type="text/javascript">
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);
}
</script>

</body>
</html>
Solution

  • Quirksmode has a JavaScript tutorial/function that shows how to find the coordinates of an element here

    Once you have its coordinates, you can use the offsetHeight property of the iframe to read its height.