I embed iframe element in my HTML page:
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
applet.html looks like this:
<html>
<head>
</head>
<body>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
</body>
</html>
The problem is: how to display a div element (with position: absolute) over a Java applet which is inside iframe.
I tried to use another iframe element:
<html>
<head>
</head>
<body>
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 99"></iframe>
<div style="position: absolute; top: 10px; left: 10px; background-color: gray; height: 150px; width: 150px; z-index: 100">Hello World</div>
</body>
</html>
Works fine in IE, Firefox but not in Chrome.
The <applet> tag was used to define an embedded Java applet. The use of Java applets is now deprecated as most browsers no longer support the use of plug-ins, including the Java plug-in.
Applet filenames are identified by a . class filename extension.
The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).
I found an article that seems to provide a solution, so I'll not claim the credit for coming up with it:
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
From the article:
The solution is to have a third Iframe C within Iframe A. Iframe C has a z-index within Iframe A that is higher than the z-index of the Applet. It is positioned so that it's rectangle as considered by the top page is identical to that of the Iframe B overlay.
I pasted second IFrame code from your main page into applet.html like so:
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 1"></iframe>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
And it seemed to do the trick in chrome.
I did get a frame border but i'm guessing this is fixable. Give it a go.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With