An alternative to a popup window could be a popup iframe.
This script allows you to load pages into an iframe and dynamically position the iframe within the parent page.
Click a link to show the Iframe loaded with the relevant page, when another link is clicked the iframe is reloaded with its page and moved into position, clicking the same link will hide the iframe
Each link used to load a page into the iframe must be given an id.
<a href="page.htm" id="lnk1" onclick="return iframePop(this)">Example Page</a>
The iframe is then dynamically positioned next to the calling link, this position can be offset by adjusting variables offsetX and offsetY within the script
If you want to manually position the iframe in the page simply include the position within the function call in the link
<a href="page.htm" id="lnk1" onclick="return iframePop(this,200,100')">Example Page</a>
The text for the link can be changed to refect the iframe showing, if you do not want to change the links text set variable swapLinkText to zero. If swapping the text you can set the text at variable swappedText
The above 2 example links are positioned by passing the position to the function, see lower down the page for example links using the dynamic method
<script type="text/javascript">
<!--
//Realised by Apachejeff
//www.huntingground.freeserve.co.uk
swapLinkText=1 // 0 =no, 1 = yes
swappedText="Hide Iframe"
offsetX=100 // used with dynamic positioning
offsetY=30 // used with dynamic positioning
lastID=""
function iframePop(el){
container=document.getElementById("iframe1")
currentLink=document.getElementById(el.id)
lastLink=document.getElementById(lastID)
if(el.id!=lastID){
if(swapLinkText==1){
if(lastID!=""){lastLink.innerHTML=linkText}
linkText=currentLink.innerHTML
}
container.style.left=(arguments.length>1?arguments[1]:currentLink.offsetLeft+offsetX)
container.style.top=(arguments.length>1?arguments[2]:currentLink.offsetTop+offsetY)
if(arguments.length==1){
curposx=currentLink.offsetLeft-document.body.scrollLeft
if(curposx>=document.body.clientWidth-parseInt(container.style.width)){
container.style.left=document.body.clientWidth-parseInt(container.style.width)+document.body.scrollLeft-offsetX
}
curposy=currentLink.offsetTop-document.body.scrollTop
if(curposy>=document.body.clientHeight-parseInt(container.style.height)){
//container.style.top=(document.body.scrollTop+curposy)-parseInt(container.style.height)-offsetY
container.style.top=document.body.scrollTop+document.body.clientHeight-parseInt(container.style.height)-offsetY
}
}
container.style.display = "block"
window.frames["iframe1"].location=el.href
lastID=el.id
if(swapLinkText==1){
currentLink.innerHTML=swappedText
}
}
else{
container.style.display = "none"
lastID=""
if(swapLinkText==1){
currentLink.innerHTML=linkText
}
}
return false
}
// -->
</script>
<iframe id="my_iframe" name="my_iframe" src="" frameborder="0" style="position:absolute;left:300px;top:100px;width:300px;height:240px;display:none;z-index:4;border:1px solid #000000"></iframe>
<a href="page1.htm" id="lnk1" onclick="return iframePop(this)">Page 1</a> <a href="page2.htm" id="lnk2" onclick="return iframePop(this)">Page 2</a> <a href="page3.htm" id="lnk3" onclick="return iframePop(this,30,40)">Page 3</a>
Try the following links to see how the Iframe is positioned dynamically.