Iframe Pop 'n' Drag

The Iframe is positioned in relation to the calling link but you can also hold the left mouse button down in the header and drag.
Clicking the same link again hides the iframe.

The Theory





I Like Monkeys





Food For Thought 

<HTML>
<HEAD>
<TITLE>Iframe Pop 'n' Drag</TITLE>

<script type="text/javascript">
<!--
moz=document.getElementById&&!document.all
id=null
lastid=null

function dragMe(e,ID){
id=ID
if (!moz&&event.srcElement.className.indexOf("drag")!=-1||moz&&e.target.className.indexOf("drag")!=-1){
curposx=(!moz ? event.clientX : e.clientX) 
curposy=(!moz ? event.clientY : e.clientY)
objectx=document.getElementById(id).offsetLeft
objecty=document.getElementById(id).offsetTop
document.getElementById(id).style.zIndex=5
if(lastid!=null&&lastid!=id){
document.getElementById(lastid).style.zIndex=''
}
moving=true
document.onmousemove=moveTo
}
}

function moveTo(e){
xx=(!moz ? event.clientX : e.clientX)
yy=(!moz ? event.clientY : e.clientY)
if (moving==true){
document.getElementById(id).style.left=xx-(curposx-objectx)
document.getElementById(id).style.top=yy-(curposy-objecty)
return false
}
}

//document.onmousedown=dragMe
document.onmouseup=new Function("moving=false;lastid=id")

offsetX=200
offsetY=30

last_id=""

function iframePop(obj){
cont=document.getElementById("container")

id=obj.id
oPage=obj.href

if(id!=last_id){
cont.style.left=document.getElementById(id).offsetLeft+offsetX
cont.style.top=document.getElementById(id).offsetTop+offsetY

curposx=document.getElementById(id).offsetLeft-document.body.scrollLeft
if(curposx>=document.body.clientWidth-parseInt(cont.style.width)){
cont.style.left=document.body.clientWidth-parseInt(cont.style.width)+document.body.scrollLeft-offsetX
}

curposy=document.getElementById(id).offsetTop-document.body.scrollTop
if(curposy>=document.body.clientHeight-parseInt(cont.style.height)){
//cont.style.top=(document.body.scrollTop+curposy)-parseInt(cont.style.height)-offsetY
cont.style.top=document.body.clientHeight-parseInt(cont.style.height)-offsetY
}

cont.style.display = "block"

//window["my_iframe"].location=oPage // is added to browsers history list
window["my_iframe"].location.replace(oPage) // not added to browsers history list

setTimeout('document.getElementById("headertxt").innerHTML=window["my_iframe"].document.title',200)
last_id=id
}
else{
cont.style.display = "none"
last_id=""
}
document.getElementById("my_iframe").style.width=parseInt(cont.style.width)
document.getElementById("my_iframe").style.height=parseInt(cont.style.height)-document.getElementById("headertxt").offsetHeight-5
return false

}

// -->
</script>

<style>
.header{
width:100%;
color:#55FFAA;
text-align:center;
margin-top:5px;
padding-bottom:5px;
border-bottom:1px solid #AAAA55;
}

.drag{
cursor:move;
}

</style>

</HEAD>
<BODY>
<h1><span>Iframe Pop 'n' Drag</span></h1>
<DIV id="container" style="position:absolute;left:290px;top:110px;width:460px;height:300px;border:1px solid #A050F0;background-color:#000000;color:#55AAFF;display:none">
<div class="header drag" id="headertxt" onmousedown="dragMe(event,this.offsetParent.id)" title="Hold your left mouse button down to drag">Header</div>
<iframe id="my_iframe" name="my_iframe" src="" style="background-color:#ffffff" frameborder="no"></iframe>
</DIV>
<a href="page1.htm" id="lnk1" onclick="return iframePop(this)">The Theory</a><BR>
<a href="page2.htm" id="lnk2" onclick="return iframePop(this)">I Like Monkeys</a><BR>
<a href="page3.htm" id="lnk3" onclick="return iframePop(this)">Food For Thought</a>

</BODY>
</HTML>