popup information box II script

**finster52** · 05-02-2006, 04:13 PM

I'm using the popup information box II script (http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm) and I want the popup boxes to remain in one location in the center of the page rather than next to the highlighted area. I can't figure out to do that.

**jscheuer1** · 05-03-2006, 08:10 AM

Notes: If you change the width of the table, then the width of the container in the style section must be changed to match it. The container's margin-left value must be half its width and be negative. Compatible now only with modern browsers.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Centered Popup Information Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#dek {
visibility:hidden;
z-index:200;
}

#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}

#container {
margin-left: -75px;
position: absolute;
left: 50%;
width: 150px;
}

</style>
</head>
<body>
<div id="horizon"><div id="container">
<div id="dek"></div>
</div></div>
<script type="text/javascript">

//Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net,  http://website.lineone.net/~mike_mcgrath))
//Permission granted to Dynamicdrive.com to include script in archive
//For this and 100's more DHTML scripts, visit http://dynamicdrive.com

Xoffset=-60;    // modify these values to ...
Yoffset= 20;    // change the popup position.

var old,skn,iex=(document.all),yyy=-1000;

var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all

if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}

function popup(msg,bak){
var content="<TABLE  WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
yyy=Yoffset;
 if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
 if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
 if(ie4){document.all("dek").innerHTML=content;skn.display=''}
 if (document.getElementById) {
 document.getElementById('container').style.height=document.getElementById('dek').offsetHeight+'px'
 document.getElementById('container').style.top=Math.floor(document.getElementById('dek').offsetHeight/-2)+'px'
}
}

function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}

</script>

<a href="http://wsabstract.com" onmouseover="popup('Website Abstraction, the definitive JavaScript site on the net.','lightgreen')"; onmouseout="kill()">Website Abstraction</a>
<br>
<a href="http://webmonkey.com" onmouseover="popup('Tutorials and tips for the advanced webmaster','lightgreen')"; onmouseout="kill()">WebMonkey</a>

</body>
</html>

Thread: popup information box II script

Thread Tools

Search Thread

popup information box II script

Bookmarks

Bookmarks

Posting Permissions