Monday, April 13, 2009

Javascript : Dynamic Dragable and Popup Div

Simple Dragable Div


<HTML>
<HEAD>
<TITLE>Dragable Div</TITLE>
<script type="text/javascript">

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='';
};
}
</script>
</HEAD>

<BODY>

<div style="position: fixed; width: 500px; top: 150px; left: 250px; cursor: move;" onmousedown="dragOBJ(this,event); return false;">
<TABLE border = "1" width="30%">
<TR>
<TD colspan="2">This is Dragable Div</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>

</BODY>
</HTML>

Simple Popup Dragable Div


<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>


Note : I tested this code with Mozilla FireFox, Google Chrome, Safari and Opera its working fine. But its not working with IE 8 and its higher version. Hopefully will come up with solution soon.