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:
