Make Applets With Javascript

[higuy001]

How would I use js to make a java applet on the page?I have some code, but it's not working.index.html:

<div id="applet"></div>

MakeMeGo.js:

function otherAppletCircle() {	var div = document.getElementById("applet");var txt = "<object classid=\"clsid:8AD9C840-044E-11D1-B3E9-00805F499D93\" width=\"200\" height=\"200\"> <param name=\"code\" value=\"Applets/1/circle.class\"></object>";div.innerHTML = txt;}

Is something wrong?I'm guessing it has to do with the "classid=\"clsid:8AD9C840-044E-11D1-B3E9-00805F499D93\"" section.Help? HiGuy

[Ingolme]

classid is exclusive to Internet Explorer. In order to make it work on different browsers you'll have to use nested <object> tags. Because applet do actually need the classid for Internet Explorer.

<!--[if !IE]>--><object id="applet" width="300" height="300" classid="java:file.class" type="application/x-java-applet"><!--<![endif]--><object id="applet" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300" height="300">  <param name="code" value="file.class" /></object> <!--[if !IE]>--></object><!--<![endif]-->

[higuy001]

New code:

function otherAppletCircle() {	var div = document.getElementById("applet");var txt = "<!--[if !IE]>--><object id=\"applet\" width=\"300\" height=\"300\" classid=\"java:file.class\" type=\"application/x-java-applet\"><!--<![endif]--><object id=\"Hey\" classid=\"clsid:8AD9C840-044E-11D1-B3E9-00805F499D93\" width=\"300\" height=\"300\"><param name=\"code\" value=\"Applets/1/circle.class\" /></object> <!--[if !IE]>--></object><!--<![endif]-->";div.innerHTML = txt;}

But this doesn't work...The innerHTML of the div tag doesn't change.Is there a script that will modify it?

[Ingolme]

New code:

function otherAppletCircle() {	var div = document.getElementById("applet");var txt = "<!--[if !IE]>--><object id=\"applet\" width=\"300\" height=\"300\" classid=\"java:file.class\" type=\"application/x-java-applet\"><!--<![endif]--><object id=\"Hey\" classid=\"clsid:8AD9C840-044E-11D1-B3E9-00805F499D93\" width=\"300\" height=\"300\"><param name=\"code\" value=\"Applets/1/circle.class\" /></object> <!--[if !IE]>--></object><!--<![endif]-->";div.innerHTML = txt;}

But this doesn't work...The innerHTML of the div tag doesn't change.Is there a script that will modify it?

Are you actually executing the function at any point?And why use Javascript instead of writing the HTML?

[higuy001]

1. Yes I am executing the function:index.html:

<a href="#" onMouseOver="midSet();" onClick="divOther();">Other</a>   

MakeMeGo.js:

function divOther() {var div = document.getElementById("header");hideContent();var txt = "<h2>Other</h2><hr style\"max-width: 875px;\"<a href=\"#\" onClick=\"otherWidgits()\">Widgits</a>\ \ <a href=\"#\" onClick=\"otherJava()\">Applets (Java)</a>";div.innerHTML = txt;hideHelp();}function otherJava() {var div = document.getElementById("content");hideHelp();var txt = "<hr style=\"max-width: 750px;\"><a href=\"#\" onclick=\"otherAppletCircle();\">Circle</a><br>";div.innerHTML = txt;}function otherAppletCircle() {	var div = document.getElementById("applet");var txt = "<!--[if !IE]>--><object id=\"applet\" width=\"300\" height=\"300\" classid=\"java:file.class\" type=\"application/x-java-applet\"><!--<![endif]--><object id=\"Hey\" classid=\"clsid:8AD9C840-044E-11D1-B3E9-00805F499D93\" width=\"300\" height=\"300\"><param name=\"code\" value=\"Applets/1/circle.class\" /></object> <!--[if !IE]>--></object><!--<![endif]-->";div.innerHTML = txt;}

2. Because if I used HTML, I would have quite a few HTML files which take longer to load than a single script (I think).Plus, the script, once loaded, will be instant, rather than the web pages, which take time.Edit: Would it work if I put the code:

<!--[if !IE]>--><object id="applet" width="300" height="300" classid="java:file.class" type="application/x-java-applet"><!--<![endif]--><object id="Hey" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300" height="300"><param id="code" name="code" value="" /></object> <!--[if !IE]>--></object><!--<![endif]-->

in the HTML, without the value"url.class" then used:

var applet = document.getElementById("code");applet.value = "url.class";

?

[Ingolme]

No, there's more to change than just the <param> element, you also need to put the file URL in the classid attribute: classid="java:file.class"If you're going to make a Javascript function, you should make it reusable.Try this:

function applet(id,file) {  var div = document.getElementById(id);  var txt = '<!--[if !IE]>-->';  txt += '<object id="applet" width="300" height="300" classid="java:' + file + '" type="application/x-java-applet">';  txt += <!--<![endif]-->';  txt += '<object id="Hey" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300" height="300">';  txt += '<param id="code" name="code" value="' + file + '" />';  txt += '</object>';  txt += '<!--[if !IE]>-->';  txt += '</object>';  txt += '<!--<![endif]-->';  div.innerHTML = txt;}

You would call the function like this:

applet('applet','file.class');

[higuy001]

No, there's more to change than just the <param> element, you also need to put the file URL in the classid attribute:

All of my applets I keep in the path /Applets/Applets/ (the second one is because the first folder has 1, 2, and 3 folders in it.)I have the code:

function otherJava() {hideApplet();var div = document.getElementById("content");hideHelp();var txt = "<hr style=\"max-width: 750px;\"><a href=\"#\" onclick=\"applet('applet','Coolio.class');\">Coolio</a><br>";div.innerHTML = txt;}function applet(id,file,folder) {  var div = document.getElementById(id);  var txt = '<!--[if !IE]>-->';  txt += '<object id="applet" width="300" height="300"'  txt += 'classid="java:' + file + '" type="application/x-java-applet">';  txt += '<!--<![endif]-->';  txt += '<object id="Hey" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300" height="300">';  txt += '<param id="code" name="code" value="Applets/Applets/' + file + '" />';  txt += '</object>';  txt += '<!--[if !IE]>-->';  txt += '</object>';  txt += '<!--<![endif]-->';  div.innerHTML = txt;}

but it doesn't seem to be right.I focus on these lines:

  txt += '<param id="code" name="code" value="Applets/Applets/' + file + '" />';

var txt = "<hr style=\"max-width: 750px;\"><a href=\"#\" onclick=\"applet('applet','Coolio.class');\">Coolio</a><br>";

I used to have:

var txt = "<hr style=\"max-width: 750px;\"><a href=\"#\" onclick=\"applet('applet','Applets/Applets/Coolio.class');\">Coolio</a><br>";

but that wouldn't work.Now I get the error: "Applet Coolio notinited."What does that mean?

[Ingolme]

Don't alter the function I gave you because you will only add problems since you don't seem to understand the code completely.Leave the function as it was:

function applet(id,file) {  var div = document.getElementById(id);  var txt = '<!--[if !IE]>-->';  txt += '<object id="applet" width="300" height="300"'  txt += 'classid="java:' + file + '" type="application/x-java-applet">';  txt += '<!--<![endif]-->';  txt += '<object id="Hey" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300" height="300">';  txt += '<param id="code" name="code" value="' + file + '" />';  txt += '</object>';  txt += '<!--[if !IE]>-->';  txt += '</object>';  txt += '<!--<![endif]-->';  div.innerHTML = txt;}

And then add the folders in the parameter when calling the function:

applet('applet','Applets/Applets/Coolio.class');

[higuy001]

Ok. Now to the Java board (I think) for my notinited problem. (Notinited? Why not just "not initiated"?)Thanks!