Auto-adjusting applet size for screen size
Lots of people like to make their applets and other page elements
proportional to the size of the site visitor's screen. This is
especially important if you are using a topbar applet and you
would like the applet to extend the exact width of the screen.
Here are some important tips and scripts to help you do this right.
- Can I use percentage width/heights like I do with HTML elements?
This is not advised as a very few of the hundreds of Microsoft
java interpreters have a bug relating to percentage widths and heights.
Avoid percentage widths (or heights) for applets if you can.
- How can I get an applet to size to exactly the screen width?
Use this code:
<script language="Javascript">
var w = (navigator.appName=="Netscape") ? innerWidth : document.body.clientWidth;
document.write("<applet code=myApplet.class width=" + w + " height=25 mayscript>");
</script>
- How can I get an applet to size to, say, 15% of the screen width?
Use this code:
<script language="Javascript">
var w = (navigator.appName=="Netscape") ? innerWidth : document.body.clientWidth;
var proportion = 15;
w = w * proportion / 100;
document.write("<applet code=myApplet.class width=" + w + " height=25 mayscript>");
</script>
Change the value of "proportion" to change the percentage width.
- How can I get the applet to resize with the browser window?
The above scripts won't automatically resize the applet when the
browser window is resized by the visitor. The page needs to be
refreshed again before the applet will resize. To force the page
to refresh, you can put an onResize() method into your
<BODY> tag.
- Anything else I should do?
You should turn off scrolling in the frame which holds the applet.
For example, if you are using a top frame to hold an applet navigation
bar across the top of the screen, it could ruin the whole effect if
a minor browser sizing idiosyncracy resulted in a horizontal
scrollbar appearing right across the screen. Be safe and switch
off scrolling in the <BODY> tag.
- So what's the ideal <BODY> tag for an applet page?
<BODY marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 onResize=self.location.reload() scroll=no>
This includes cross-browser code for getting the applet to snuggle exactly into the
top left hand corner with no annoying margins. The reload() function is only needed
if you are using the resizing scripts. Scrollbars should normally be off. If you'd
like a scrolling applet, using those of our applets which have their own scrollbars
is much more memory efficient and elegant.
