Hi,
To move pop-up div window
I am a beginner with web development & I want to move a Div pop up windows.
Is there any one to help me or push me in right direction to code this?
Thanks in advance.
Printable View
Hi,
To move pop-up div window
I am a beginner with web development & I want to move a Div pop up windows.
Is there any one to help me or push me in right direction to code this?
Thanks in advance.
Try this:
Code:<HTML>
<HEAD>
<TITLE>Popup Dragable Div</TITLE>
<style>
/*intially hide div, show only on click*/
.parentDisable
{
z-index: 999;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 0;
display: none;
background-color: #fff;
color: #aaa;
}
</style>
<script type="text/javascript">
//used for draging div
function agent(v)
{
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v)
{
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+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');
}
}
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='';
};
}
//used for pop-up div
function pop(div)
{
document.getElementById(div).style.display='block';
return false
}
function hide(div)
{
document.getElementById(div).style.display='none';
return false
}
</script>
</HEAD>
<BODY>
<a href='#' onClick="return pop('myDiv')">Click Here</a> to popup div
<div style="position: fixed; width: 500px; top: 150px; left: 250px; cursor: move;" onmousedown="dragOBJ(this,event); return false;">
<div id='myDiv' class='parentDisable'>
<TABLE border = "1" width="30%">
<TR>
<TD colspan="2" align="right"><a href="#" onClick="return hide('myDiv')">Close</a></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD>
<TD>F</TD>
</TR>
</div>
</div>
</BODY>
</HTML>
I tried using this: See if this helps you too.
Is there any other way?Code:document.getElementById("mainDiv").style.left=4px ;
document.getElementById("mainDiv").style.top=30px;