View Full Version : Transparent element over Java applet

name _F1
12-10-2007, 08:59 AM
In my application, I wish to be able to have a drag-and-drop box that needs to be used anywhere on the page. I've got the drag-and-drop script working perfectly, but my page includes a Java applet. The Java applet is drawn over all other elements, regardless of their z-index.

(Lots of code below, but it's necessary in its entirety.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<style type="text/css">
* {
#appletFrame {
#overlay {
#appletFrame, #overlay {
#dragger {
border:1px solid green;
<script type="text/javascript">
function dragListener() {
var initScreenX, initScreenY, initWindowX, initWindowY, left, top, width, height, dragBox;
document.body.onmousedown = function(e) {
if (!e) var e = window.event;
initScreenX = e.screenX;
initScreenY = e.screenY;
initWindowX = e.pageX || e.clientX;
initWindowY = e.pageY || e.clientY;

left = initWindowX;
top = initWindowY;
width = height = 0;

dragBox = document.getElementById("dragger");
dragBox.style.display = "block";
dragBox.style.height = dragBox.style.width = 0;
dragBox.style.top = top;
dragBox.style.left = left;

document.body.onmousemove = function(e) {
if (!e) var e = window.event;
var currentX = e.pageX || e.clientX;
var currentY = e.pageY || e.clientY;

if (currentX > initWindowX) {
left = initWindowX;
width = currentX - initWindowX;
else {
left = currentX;
width = initWindowX - currentX;
if (currentY > initWindowY) {
top = initWindowY;
height = currentY - initWindowY;
else {
top = currentY;
height = initWindowY - currentY;
dragBox.style.height = height + 'px';
dragBox.style.width = width + 'px';
dragBox.style.top = top + 'px';
dragBox.style.left = left + 'px';
document.body.onmouseup = function(e) {
if (!e) var e = window.event;
dragBox.style.display = "none";
document.body.onmousemove = document.body.onmousedown = document.body.onmouseup = null;
dragListener(); //Only here to ease testing
<body onload="dragListener()">
<iframe src="http://java.sun.com/applets/jdk/1.3/demo/applets/Animator/example1.html" id="appletFrame"></iframe>
<div id="overlay"></div>
<div id="dragger"></div>

The drag-and-drop works anywhere on the page, except that it cannot be started on the Java applet (events not propagated), and if it is started elsewhere and then dragged to where the Java applet is, it is hidden under the applet. Neither is desirable; I want the box to be able to start on the applet, and I want it to be drawn over the applet.

The solution is an iframe shim (http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/). They can be drawn over the top of Java applets, yet they still honour z-index. So I changed <div id="overlay"> to an iframe (I didn't add any other attributes). Now the drag-and-drop works over the applet, but we have another problem: the Java applet is not drawn. It is as if the applet is not there, but it is, because sounds are still made by the applet.

Then I tried changing #overlay back to a div, and making #dragger an iframe instead. It solves one of the initial problems, but causes another. The box is drawn over the applet, but it still cannot be started on the applet (for the same reasons as before), and the area under the box is transparent, similarly to the last solution.

I'm lost for a solution. Has anyone else had this problem, or willing to offer some ideas? I've only tested in Firefox as of yet; testing in more than one browser when there are still bugs in my primary browser gives me too much of a headache.

rnd me
12-10-2007, 07:14 PM
some suggestions:

use units on your numerical css values.

using "top" as a var name is bad. "top" is already taken as a reserved identifier of the topmost frame.

width = height = 0; set both width and height to 0, is that correct? if so, add "px" at end.

var currentX = e.pageX || e.clientX; // ie/ff use clientX, so put it first
var currentX = e.clientX || e.pageX;

mouse events over an focused iframe/applet should not work.

trying killing any applet css, and trow the applet in a wrapper div that you apply the drag and drop to. you will have to give it padding/border so as to provide a handle to drag by.

you could likely speed it up by caching the style object at the first function:
var ds=dragBox.style;
//later: ds.left=left+"px";

i find a visual feedback to be helpful as well:
ds.cursor="move" , then back to "default" on onmouseup

about cross browsers, i already been there for you:

// cross browser coord getter: run this on mousedown, or better yet outside as global.
var xy=function (e, v) { return v ? e.pageY : e.pageX; }
if(document.all){ //if IE, then clobber the above var with the ie version
var xy=function (e,v) { return (v?(event.clientY+document.body.scrollTop):(event.clientX)); }
}//end if

// example mousemove
function dragI(e) {
ds.top = xy(e, 1) + oY - eY + "px";
ds.left = xy(e) + oX - eX + "px";

perhaps setting the applets 'style.display' to 'none' during the actual drag would help.

hope this helps somehow...

name _F1
12-11-2007, 07:39 AM
I didn't really explain what my drag-and-drop box is. It's not actually dragging-and-dropping an object. It's just to draw a box (similarly to the Windows desktop, where you can click and drag the mouse to form a box). My problem is that I need this box to appear on top of the applet , with the entire applet still visible, and the inside of the box transparent, with the applet visible beneath (only the borders should show). The initial click to create the box should also be allowed to occur over the applet (so if I click somewhere on top of the applet, the box should be created).