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="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.

Anonymous