How to Resize Applets Dynamically within Browser Frames
By Angsuman Chakraborty, Gaea News NetworkSaturday, January 24, 2004
The problem I was trying to solve was to resize applets when the browser changes size,
so as to always fill the total displayed area of the browser.
Googling I found an article from javaworld - Resize applets within browser frames.
I soon found out that the solution doesn’t work on either Internet Explorer 6 or Netscape 7.1.
The key problem is that applet.setSize() method doesn’t actually do anything!
So I did a bit of digging around and found a simpler solution.
The code shown below creates an applet with the same size as the browser window.
Whenever the browser changes size the applet is resized dynamically. This is
achieved through the resize() method defined in Javascript. This method is
invoked onLoad and onResize. The code works for the recent versions of
Internet Explorer & Netscape browsers.
<HTML>
<HEAD>
<TITLE>Resizable Applet Demo</TITLE>
</HEAD>
<BODY bgcolor=#C6C3C6 onResize="resize()"
onLoad="resize()" topmargin="0"
leftmargin="0" marginwidth="0"
marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
function resize() {
if (navigator.appName.indexOf("Microsoft") != -1) {
width=document.body.clientWidth;
height=document.body.clientHeight;
} else {
var netscapeScrollWidth=15;
width=window.innerWidth - netscapeScrollWidth;
height=window.innerHeight-netscapeScrollWidth;
}
document.myApplet.width = width;
document.myApplet.height = height;
window.scroll(0,0);
}
window.onResize = resize;
window.onLoad = resize;
</SCRIPT>
<APPLET NAME="myApplet" CODE="ColoredApplet.class"
WIDTH=800 HEIGHT=600></APPLET>
</BODY>
</HTML>
The two lines:
document.myApplet.width = width;
document.myApplet.height = height;
are enough to change the width and height of the applet.
Remember to name the applet and refer to it by name.
Footnote: EU has proposed a simpler solution to the original problem which is to set the width and height to 100% in the applet tag. And that works for the problem I proposed. Thanks for the solution EU!
There are a few additional value to the original proposed solution over the new solution which are:
- Finer control over the size of the applet, so for example you can say that the width leaves 20 pixels on both sides, but the height doesn’t etc.
- Ability to control the size of the applet from the applet itself. This is a big plus as in one project I am working we have a need to re-size the applet from within the applet. Now we can do it by calling a Javascript method from the applet.
 Anonymous |
 seshu |
August 12, 2005: 1:35 pm
How about if you have frameset and frame is resized, applet does not get resized. have a frame set with Jtree in one frame the window reload, resize it works, but not frame resize by dragging the frame boundary between two frames. |
|
June 23, 2005: 6:26 am
@Paul |
 Paul Hilliar |
June 23, 2005: 6:07 am
You little beauty - this had been driving me mad. Your example has lots of unrequired backslashes for some reason though |
|
March 11, 2005: 4:36 pm
[...] Fox 0.9.1 resize() showStatus() Internet Explorer 6.0 resize() I had posted a solution for the applet resize problem in an earlier blog entry. This entry was [...] |
|
March 11, 2005: 4:23 pm
[...] an it has been allocated, then how to go about it? Last time when faced with this problem I solved it with a nifty piece of Javascript method. However I soon realized there were few issues with t [...] |
|
August 29, 2004: 9:31 pm
[...] x 0.9.1 resize() showDocument() Internet Explorer 6.0 resize() I had posted a solution for the applet resize problem in an earlier blog entry. Comments (0) [...] |
uhuh