Loading Java applet with height set to 100%

I have an webpage that displays a java applet. The applet is resized if the window is resized using JavaScript which works fine. The width and height of the applet is set to 100%. When the applet is loading, an image is displayed

开发者_开发知识库image = "preloader.gif"

Using IE 6/7 everything works fine. But in Firefox, the applet has a height of approximately 200 pixels. The width is correct at 100%. Therefore, the preloader image is cut in half. After the applet has loaded and the javascript resizes the page, width and height are set correctly.

If I change the HTML code and use fixed sizes for the applet, the object displays correctly during loading, but cannot be resized afterwards.

Is there any solution to this problem?

Thanks, Daniel

ps I'm using the Object / embed Tag, but the problem is the same if I use the applet tag.

I would advise you to implement a CSS based solution and create the applet with 100% size of the containing div. I use this method, it's simple, solid and cross browser reliable. Is there any reason you can't do this?

Hard to say without looking at the page. One possibility is the applet loads before the javascript gets run. In which case you could try loading the applet using javascript (instead of coding it directly in the html).

I was getting the same kind of short-and-wide applet in Firefox and Opera.

Now I create the applet dynamically, and this allows me to calculate the size of its containing div depending on the viewport size. This leads me to believe that you would get what you want if you used a containing div with a size specified in points and not as 100%.

The code I use to create the applet

function initJavaView() {
    ...
    var viewportHeight = window.innerHeight ? window.innerHeight : 
                                              $(window).height(); 
    var height = viewportHeight - appletArea.offsetTop - 8;
    html = '<div style="width:100%;height:' + height + 'px;">'

    if (!$.browser.msie /*&& !$.browser.mozilla*/){
        html = html + '<object type="application/x-java-applet;version=1.5" ';
    } else {
        html = html +
            '<object ' +
            'classid = "clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" '+
            'codebase = "http://java.sun.com/update/1.5.0/jinstall-1_5-windows-i586.cab#Version=1,5,0,0" ';
    }
    html = html + ' width="100%" height="100%">' +
    ...
    appletArea.innerHTML = html;
};

The code running at http://books.verg.es/elements_of_ux.html?format=java

I had the same problem, and I can't find an answer, but I got the solution. You have to embed the applet code in a Javascript function, and fill the innerHtml of the body with it (or wherever you want to use the applet) shortly after the page is loaded. So...

//optional: add styles
function styleApplet(){
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}

//complementary funcion so applet code is readable
function documentWrite(chars){
    buffer +=chars;
}

//funcion to add all code at once. It is compulsory
function executeWrite(){
    document.getElementsByTagName('body')[0].innerHTML = buffer;
    buffer = '';
}

function writeApplet(){
    documentWrite('<applet code="..... </applet>');
    documentWrite('..... ');
    documentWrite('</applet>');

    executeWrite();
}

$(document).ready(function(){
    setTimeout('writeApplet()',100);
    setTimeout('styleApplet()',100); //optional
}

Any adds to the answer are helpful :-)