Controlling applet element using javascript

I have a web page with an applet (using object tag) inside a div region which can be seen [url=http://www.lagers.org.uk/temp/applet/indexjs_2.html here[/url].

The problem I have is that the Java layout for the applet is fixed size but when using the mouse wheel to zoom in/out of the webpage the 'applet area' increases and what I want to enforce a maximum size.

I have posted the page source inside the body tags below. Sorry about the length but the resize stuff is near the end.

applet_fu.writeAttributes(attributes);
				applet_fu.writeParameters(parameters);
				document.write(fallbackContent || 'This content requires Java.');
				document.write('</object>');
			},

openTagStandard: function(minimumVersion){
				document.write('<object  id="myapplet" type="application/x-java-applet;version=' + minimumVersion + '"');
			},

openTagIE: function(attributes){
				var classid = attributes['classid'] || "clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"; //use latest installed JRE;
				var codebase = attributes['codebase'] || "http://java.sun.com/products/plugin/autodl/jinstall-1_4-windows-i586.cab#Version=1,4,0,0"; //download JRE 1.4 if suitable JRE not found;

document.write('<object id="myapplet" classid="' + classid + '" codebase=' + codebase + '"');
			},

writeAttributes: function(attributes){
				for (attribute in attributes){
				  document.write(" ");
				  document.write(attribute + "='" + attributes[attribute] + "'");
				}

document.write('>');
			},

writeParameters: function(parameters){
				for (parameter in parameters){
				  document.write("<param name=" + parameter + " value='" + parameters[parameter] + "'>");
				}
			},

isIE: function(){
				if (navigator == null) return false;

return navigator.userAgent.match(/MSIE/) != null;
			}

}

var size_changed = {
			resizeApplet: function() {
			  max_width = 660;
			  max_height = 420;

var r = DetectZoom.ratios();
			  console.log('>>> ' + r.zoom + ' <<<');

if(r.zoom <= 1){
					applet_width = max_width;
					applet_height = max_height;
				}
				else {
					applet_width = max_width / r.zoom;
					applet_height = max_height / r. zoom;

}

console.log('>>> ' + r.zoom + ' <<< ' + applet_width + "  " + applet_height);

document.getElementById('myapplet').style.height = applet_height + "px";
				document.getElementById('myapplet').style.width = applet_width + "px";

document.getElementById('AppletDiv').style.height = applet_height + "px";
				document.getElementById('AppletDiv').style.width = applet_width + "px";
			}

}
		window.onLoad=size_changed.resizeApplet;

window.addEventListener('DOMMouseScroll', size_changed.resizeApplet, false);
		window.onmousewheel=size_changed.resizeApplet;
	</script>

<div id="content">
		<p>Applet</p>
		<div id='AppletDiv' width='660px' height='420'>

},
			'1.6',
			'<img src="/no-java.png" />'
			);

</script>
		</div>
		<p>Source code: <a href="G4P_Dialogs.pde">G4P_Dialogs</a></p>
		<p>	Built with <a href="http://processing.org" title="Processing.org">Processing</a></p>

</div>

Peter Lager wrote:The problem I have is that ...

The problem you have is trying to use applets. Why are you trying to use an applet in 2013? Applets are dead technology. See the discussion at http://www.coderanch.com/t/572824/Applets/java/interest-lots-questions-applets

If you're saying that in this line of code

you don't want the value of the applet_height variable to increase without limit, then simply precede it with some code which enforces that rule.

Or is that not the question?

The applet I have created is a fixed size 660px by 420px and when the browser zoom is 1.0 then it sets aside an area 660px x 420px which is good. Now when the mouse wheel is used to zoom in then it increases the area set aside for the applet. So if the zoom level is 2 it sets aside 1320x840px but I want this area to remain as 660x420px.

The applet object has an id 'myapplet' and the div id is 'AppletDiv' and the code in size_changed is my effort to control the applet size

by changing the applet_height and applet_width variables depending on the zoom level (r.zoom)

use javascript to set the myapplet and AppletDiv objects with

This is my first effort to use JavaScript in a meaningful way so a lot of what I am doing is hack and see so any suggestions are welcome.

Thanks for reading.

Obviously there's something I'm missing here, because if I wanted something to have a size of 660 by 420 px, I would just style it to have that size and not do anything else.

Perhaps it's that "browser zoom" concept I'm missing. What is that anyway?

And as far as I can see the question has nothing at all to do with applets (except that it happens to be an applet that you're trying to style). I'm going to move the thread to the forum about Javascript.