Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display <div> over a Java applet in Chrome

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.

like image 425
Bald Avatar asked Jun 08 '11 08:06

Bald


People also ask

Why is applet tag deprecated?

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.

What kind of extension does an HTML file use for an applet?

Applet filenames are identified by a . class filename extension.

What is the code for embedding applet in HTML file *?

The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).


1 Answers

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.

like image 102
James Wiseman Avatar answered Oct 21 '22 07:10

James Wiseman