Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <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.display="block";
      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
        }
      }
    }
    </script>
    </head>
    <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>
    </body>
    </html>
    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. 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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,379
    Thanks
    11
    Thanked 592 Times in 572 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";
         }
    perhaps setting the applets 'style.display' to 'none' during the actual drag would help.

    hope this helps somehow...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •