Results 1 to 3 of 3
- Join Date
- Jun 2006
- 225
- Thanks
- 6
- Thanked 3 Times in 3 Posts
Transparent element over Java applet
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.)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html> <head> <style type="text/css"> * { margin:0; padding:0; } #appletFrame { z-index:0; } #overlay { z-index:1; background-color:green; opacity:0.2; filter:alpha(opacity=20); display:none; } #appletFrame, #overlay { position:absolute; top:0; left:0; width:100%; height:100%; border:0; } #dragger { position:absolute; z-index:2; border:1px solid green; opacity:0.5; filter:alpha(opacity=50); } </style> <script type="text/javascript"> function dragListener() { var initScreenX, initScreenY, initWindowX, initWindowY, left, top, width, height, dragBox; document.getElementById("overlay").style. <iframe src="" id="appletFrame"></iframe> <div id="overlay"></div> <div id="dragger"></div> </body> </html>
The solution is an iframe shim. 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.
- Join Date
- Jun 2007
- Location
- Urbana
- 4,650
- Thanks
- 11
- Thanked 626 Times in 605 Posts
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:
Code:
// 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"; }
hope this helps somehow...Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com
- Join Date
- Jun 2006
- 225
- Thanks
- 6
- Thanked 3 Times in 3 Posts
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).