Controlling the size of a Website Gadget contents with jQuery

Less than one minute read time.

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.

custom window image

Here is the code:

<!DOCTYPE html>
<html lang="en" xmlns="">
    <meta charset="utf-8" />

        html body {
            padding: 0px;
            margin: 0px;

    <script src=""></script>
    <div id="MAP" style="border: 1px red solid;background-color: green">
        <div id="HW"></div>
        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);

I hope this helps you when you're creating your custom Website gadgets.