Nathan CrauseMusings of a Software Developer

Much has been written about the oddities and irregularities (and standards non-compliance) of Microsoft® Internet Explorer®, but I felt I should publish this one not only for posterity, but also as a helpful hint to other programmers who might need the functionality.

First, some background. I had a Java Applet which I would prefer to have fill the available browser viewport (or at least a scalable region of the viewport). After scouring the web, the general concensus seems to have been setting the applet's height and width to "100%", but this only works effectively under Internet Explorer. The use of "100%" has always been a thorn in my side, because it's actually illogical. There has traditionally been a fair amount of complaint that Netscape/Mozilla/FireFox didn't handle heights of 100% correctly, but from a technical stand-point it is IE which got it wrong; a percent value is supposed to represent a percentage of the container, not the viewport. A document containing, for example, 2 lines of text has a height of those 2 lines, not the height of the entire viewport.

There was a fair amount of mentioning using JavaScript to do this, but only one example of this, which was severely old (using IE 4), so I felt it didn't reflect the more modern browser landscape. However, it did guide me to some DOM events I could listen for, namely "onload" and "onresize" on the "window" object.

Now to the question of gleaning the viewport size: there doesn't seem to be a universal way of getting this information, but Mozilla defines a "innerWidth" and "innerHeight" property on the "window" object. This is implemented in FireFox, Opera, Safari and Chrome. Heaven forbid Microsoft should support this - instead, the only mechanism I found was "document.body.clientWidth" and "document.body.clientHeight". Thus, we arrive at the following code snippet:

function resize() {
    var applet = document.getElementById("my-applet");
    var width = 800;
    var height = 600;

    if (navigator.appName.indexOf("Microsoft") != -1) {
        // DO NOT USE THIS - for display purposes only - see next code block
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    else {
        width = window.innerWidth;
        height = window.innerHeight;
    }

    applet.width = width;
    applet.height = height;
}

window.onload = resize;
window.onresize = resize;

Seems fairly straight forward, doesn't it? However, here's where Internet Explorer® completely craps itself. If you run the above code, IE will consume 100% of your CPU, and appear to simply hang (aside from consuming copious amounts of resources, obviously). So what's gone wrong? After placing some debug "alert()" calls into the above JavaScript, it seems that IE thinks that resizing an applet constitutes a reside of the entire window. On top of that, when resizing to fill the entire viewport, IE pads the bottom of the document, regardless of any "margin" or "padding" settings you may have in effect at the time. The end result? An endless loop of resizing. The applet grows and grows and grows.

The only solution was to force IE to simple set the height and width of the applet to our old nemesis "100%". This does make the code a little redundent in the sense that we're always simply resizing to a constant "value", but I didn't want to make the implementation too "hacky" simply to support IE. And thus, we end up with this:

function resize() {
    var applet = document.getElementById("my-applet");
    var width = 800;
    var height = 600;

    if (navigator.appName.indexOf("Microsoft") != -1) {
        width = "100%";
        height = "100%";
    }
    else {
        width = window.innerWidth;
        height = window.innerHeight;
    }

    applet.width = width;
    applet.height = height;
}

window.onload = resize;
window.onresize = resize;

The above code was successfully tested and working on FireFox, Internet Explorer, Safari, Chrome and Opera (I've never been able to test against Konqueror, as I've never been able to successfully configure Konqueror to use Java Applets).