A customer needed to create a custom website gadget that displayed content. It need to resize to fit the size of the gadget when it was included in an Interactive Dashboard with a flexible layout.
I needed a method of finding the height and width of the IFrame. This was very easy to do with jQuery.
Here is the code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html body {
padding: 0px;
margin: 0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="MAP" style="border: 1px red solid;background-color: green">
<div id="HW"></div>
</div>
<script>
function outputHW() {
winW = $(window).width();
winH = $(window).height();
$('#HW').html('<div>Window width = ' + winW + '<br/>Window height = ' + winH + '</div>');
$('#MAP').height(winH - 2); // Subtract two because of border
$('#MAP').width(winW - 2);
}
outputHW();
$(window).resize(outputHW);
</script>
</body>
</html>
I hope this helps you when you're creating your custom Website gadgets.