Resize event not handled

I have a simple webpage that IIS is hosting. This page is being called via a window.openModalDialog() command. I am using IE8.

The div/body are set to fill the browser window. This works everytime except the first time this page is loaded. The first time this page is loaded, the body does not fill the size of the browser window. For some strange reason, this issue only occurs the first time the window is opened. When resizing the window, the body tag does not fill the window.

This is the calling code:

function openModalDialog(theURL) {
    var strFeatures = 'center:yes;' +
                      'help:no;' +
                      'resizable:yes;' +
                      'edge:raised;' +
                      'status:yes;' +
                      'unadorned:yes;' +
                      'location:no;' +
                      'menubar:no;' +
                      'scrollbars:yes;' +
                      'directories:no;' +
                      'toolbar:no;';
    var returnObject = window.showModalDialog(theURL, "", strFeatures);
    //handle return object
}

This is the page code:

<html>

<head>
    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    </style>
    <script type="text/javascript">
            function CheckSize() {
                if (document.body.scrollHeight < 350) {
                window.dialogHeight = '350px';
            }
            if (document.body.scrollWidth < 450) {
                    window.dialogWidth = '450px';
            }
            var div = document.getElementById("Div1");
            var form = document.getElementById("form1");
            alert('window height:' + window.dialogHeight + 
                 ' body height:' + document.body.scrollHeight +
                 ' form height:' + form.offsetHeight +
                 ' div height:' + div.offsetHeight);
        }
    </script>
</head>
<body BGCOLOR="#B83DB8" onload="CheckSize();">
    <form id="form1" runat="server" style="height:100%; background-color:#CC3333">
        <div id="Div1" style="background-color:#66CC66">
            <!-- Content goes here -->
        </div>
    </form> 
</body>
</html>

It seems that during this 'first-time-load', the resize events are not being wired up correctly. Has anyone seen this or know why this would be happening? I assume my code is fine as it works every consecutive time. But what could cause the problem and is there a way to ensure that even when this occurs, I can set the body/div to fill the browser window.

When i run this the first time the alert shows:

window height:350px body height:100 form height:100 div height:100

Every other time:

window height:350px body height:350 form height:350 div height:350

ansaurus

tags:

views:

answers:

Resize event not handled

related questions