Help with draggable layers javascript

**kbjradmin** · 03-25-2010 01:31 PM

sorry for the late reply, but if this is still a problem, perhaps this could be helpful http://www.quirksmode.org/js/dragdrop.html

**Teensweb** · 04-04-2010 06:35 AM

No I was not looking for the lightbox, I made my own popup window and it works fine, the prblem was only with dragging it now that's fixed too. I added a mouse trap as misson said and instead of adding event listener and all those thingummy, i just made my way with

HTML Code:

<!DOCTYPE html PUBLIC"-// W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">body{margin:0px;overflow:hidden;}iframe.c1{position:absolute;top:0px;z-index:0;overflow:visible;height:100%;width:100%}
    </style>
    <title>  </title>
    <style type="text/css">#player{position:absolute;z-index:100;height:250px;width:192px;}#f{position:absolute;height:249px;width:192px;left:1px;z-index:100;top:26px;}#c{position:absolute;z-index:110;height:250px;width:192px;cursor:move;}
    </style>
  </head>
  <iframe id="frame" src="http://blog.cyberflare.co.cc/index.php" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" class="c1" name="frame">
  </iframe>
  <div id="player" style="display:none;visibility:hidden;top:0;left:0">
    <div onmousedown="dragOBJ(document.getElementById('player'),event);fhide('hidden');return false" onmouseup="fhide('')" id="c">
      <img alt="" src="m.png">
      <img alt="" style="position:absolute;right:7px;top:7px;z-index:100;cursor:pointer" src="min.png" onclick="ftoggle('player')">
    </div>
    <iframe id="f" scrolling="no" frameborder="0" src="http://google.com">
    </iframe>
  </div>
</html>

and the js

Code:

$(v);
   {return (document.getElementById(v));
   }

function agent(v)
   {return (Math.max(navigator.userAgent.toLowerCase().indexOf(v), 0));
   }

function xy(e, v)
   {return (v ? (agent('msie') ? event.screenY + document.body.scrollTop: e.pageY): (agent('msie') ? event.screenX + 
      document.body.scrollTop: e.pageX));
   }

function dragOBJ(d, e)
   {
   function drag(e)
       {if ( ! stop)
           {d.style.top = (tX = xy(e, 1) + oY - eY + 'px');
            d.style.left = (tY = xy(e) + oX - eX + 'px');
           }
        return false;
       }
    var oX = parseInt(d.style.left), oY = parseInt(d.style.top), eX = xy(e), eY = xy(e, 1), tX, tY, stop;
    document.onmousemove = drag;
   
    document.onmouseup = function()
       {stop = 1;
        document.onmousemove = '';
        document.onmouseup = '';
       };
   }

function ftoggle(id)
   {document.getElementById(id).style.display = "";
    if (document.getElementById(id).style.visibility == "hidden")
       {document.getElementById(id).style.visibility = "";
       }
    else document.getElementById(id).style.visibility = "hidden";
   }

function fhide(s)
   {document.getElementById('f').style.visibility = s;
   }

I added a division mtrap and worte a function to push up its z-index on clicking the drag-bar
here's the and added the following as the mousetrap division:

HTML Code:

<div onmouseup="fhide('',-10)" onmouseover="dragOBJ(document.getElementById('player'),event);return false" id="mtrap"></div>

**Teensweb** · 04-06-2010 01:58 AM

The issue seems to have been fixed, someone may close this thread, thanx for the help.

Thread: Help with draggable layers javascript

LinkBack

Thread Tools

Display

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Re: Help with draggable layers javascript

Similar Threads

Need some javascript help

CSS or Javascript?

javascript and external javascript files problem

My Draggable Divs Script

Blending layers together

Posting Permissions