Menu
A well known problem with Java Applets in webpages is that browsers ignore the z-index of the applet tag vs. other components in the page. No matter how you position and z-index elements in the page, applets will draw themselves on top of everything.
There is a workaround, known as the iframe shim, as described here: http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/.
However, this workaround does not work in Safari 3 or 4 in Windows (assuming the same for Mac).
Does anyone know a way to make it work in Safari?
Does anyone have ideas about how to pressure Sun to fix the underlying problem so we can avoid clumsy shims? Here is a bug report on the issue, http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6646289, notice that it has been open for a year, however other bug reports go back many many years.
This is so frustrating, don't Sun understand that this is the very sort of thing that has marginalized Java as a way of doing cool stuff in the browser? I love you Java, but you are not helping your situation...
374
There is a tricky solution for the problem. It's not necessary to have the code inside an iframe. We can have a dummy iframe just as a layer above the applet. And then an absolute div with the text can easily placed above that iframe.
working example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Applet z index issue</title>
<style>
.applet {width:400px; margin:0 auto; text-align:center; border:1px solid #000; left:40%; position:absolute }
.iframe {width:400px; background:#fff; position:absolute; border:1px solid #f00; position:absolute; left:45%; top:20px; z-index:9; height:201px;}
.message { width:250px; border:1px solid #000; background:#fff; height:150px; color:#fff; text-align:center; z-index:99; background:#555; float:left; position:absolute; left:45%; top:20px}
</style>
</head>
<body>
<div class="message">Message</div>
<div class="iframe"><iframe style="width:500px; height:205px; background:none; border:none"> </iframe></div>
<div class="applet">
<applet code="Bubbles.class" width="400" height="350">
Java applet that draws animated bubbles.
</applet>
</div>
</body>
</html>
answered Nov 18 '22 02:11
Actually problem is not related to z-index at all. It's caused by "windowed" drawing model of Netscape Plugin API (NPAPI).
You can't do anything about it (except the shim). Plugin author has to rewrite it using windowless API.
3
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
