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

Asked 8/6, 2011 at 8:14 Answered 13/4, 2012 at 15:42

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.

Verleneverlie answered 8/6, 2011 at 8:14 Comment(1)

Is it possible to display the floating content within a Java JDialog? (In the case of your simple example, yes.) If so, there might be an answer via. a helper applet. – Bona 16/6, 2011 at 8:42

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.

Andromada answered 16/6, 2011 at 7:47 Comment(1)

This is also a requirement in Safari. I have this solution set up in a production product. It's a huge pain though because I have quite a few different layers that have to float over the applet, and these layers can size differently depending on what's going on, so the multiple Iframe A's and Iframe C's have to be properly linked in terms of sizing. I've created a piece of code to do all of this for all the layers, but it's a huge hassle. Oh, and it still flickers a lot in Safari... – Tirol 22/6, 2011 at 23:57

This problem is partly solved with latest updates, at least on MacOSX:

I tested DIVs with fancy CSS effects like opacity, shadows and round corner over an applet, it is working well in Safari, Firefox 11 and Chrome 19: no issue in the composition, no glitches.. no iframes!

It is still broken on Ubuntu, though. Really frustrating. I don't know for Windows?

Sudiesudnor answered 13/4, 2012 at 15:42 Comment(0)

Recommended topics

Hot tags