kbjradmin
New Member
- Messages
- 512
- Reaction score
- 2
- Points
- 0
sorry for the late reply, but if this is still a problem, perhaps this could be helpful http://www.quirksmode.org/js/dragdrop.html
Help with draggable layers javascript
- Thread starter Teensweb
- Start date
Teensweb
New Member
- Messages
- 352
- Reaction score
- 1
- Points
- 0
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
and the js
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:
<!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>
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;
}here's the and added the following as the mousetrap division:
HTML:
<div onmouseup="fhide('',-10)" onmouseover="dragOBJ(document.getElementById('player'),event);return false" id="mtrap"></div>