Results 1 to 2 of 2

Thread: popup information box II script

  1. #1
    Join Date
    May 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default popup information box II script

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •