Position a div under link over text.

irate · Oct 14, 2004

I have this test page with a popup div.
I want to make the page so that when you click the link the div pops up just under the link, over the other text, and when it is hidden it doesnt move any of the elements on the page, but I dont want to use any measurements or absolute positioning. Can this be done?

Code:

<html>
 <head>
  <title>Test Popup</title>
  <style>
   body,td,p,br
    {
     color:                   #000099;
     font-family:             Verdana,
                              Geneva,
                              Arial,
                              Helvetica,
                              sans-serif;
     font-size:               11px;
     font-style:              normal;
     font-variant:            normal;
     font-weight:             normal;
     text-decoration:         none;
    }
   a,a:link,a:visited
    {
     color:                   #990000;
     text-decoration:         none;
    }
   a:active,a:hover
    {
     color:                   #009900;
     text-decoration:         underline;
    }
   #popupdiv
    {
     background-color:        #efefef;
     border:                  1px solid #cccccc;
     float:                   left;
     padding:                 5px;
     visibility:              hidden;
     z-index:                 100;
    }
  </style>
  <script>
   function togglePOP(doAction,layerID)
    {
     if(doAction=='show')
      {
       document.getElementById(layerID).style.visibility='visible';
      }
     else
      {
       document.getElementById(layerID).style.visibility='hidden';
      }
    }
  </script>
 </head>
 <body>
  <center>
   text text text text text text text text text text text text text text text text text
   <br>
   text text text text text text text text text text text text text text text text text
   <br>
   text text text text text text text
   <a href="javascript:togglePOP('show','popupdiv');">link</a>
   <div id="popupdiv">this is the popup division <a href="javascript:togglePOP('hide','popupdiv')">close</a></div>
   text text text text text text text text text
   <br>
   text text text text text text text text text text text text text text text text text
   <br>
   text text text text text text text text text text text text text text text text text
  </center>
 </body>
</html>

Thanks in advance.

TheConeHead · Oct 14, 2004

you need to add:

style="position: absolute, top: XXX, left: XXX"

put the correct number value in place of the X's to place the div in the right place. Absolute will make the div a new layer

[conehead]

irate · Oct 14, 2004

Thanks, but I didn't want to use numeric values to position the DIV.

I have found a way to do it though, just position the part I want inline.

Code:

<!-- #include file="espottingcontentcode.asp" -->
<html>
 <head>
  <title>Test Popup</title>
  <style>
   body,td,p,br
    {
     color:                   #000099;
     font-family:             Verdana,
                              Geneva,
                              Arial,
                              Helvetica,
                              sans-serif;
     font-size:               11px;
     font-style:              normal;
     font-variant:            normal;
     font-weight:             normal;
     text-decoration:         none;
    }
   a,a:link,a:visited
    {
     color:                   #990000;
     text-decoration:         none;
    }
   a:active,a:hover
    {
     color:                   #009900;
     text-decoration:         underline;
    }
   #popup
    {
     background-color:        #dedede;
     border:                  1px solid #999999;
     display:                 inline-block;
     padding:                 0px;
     position:                absolute;
     text-align:              justify;
     visibility:              hidden;
     width:                   250px;
     z-index:                 100;
    }
   .topPop
    {
     background-color:        #efefef;
     border-bottom:           1px solid #999999;
     padding:                 3px;
    }
   .insidePop
    {
     padding:                 3px;
    }
  </style>
  <script>
   function togglePopup(doAction,layerID)
    {
     if(doAction=='show')
      {
       document.getElementById(layerID).style.visibility='visible';
      }
     else
      {
       document.getElementById(layerID).style.visibility='hidden';
      }
    }
  </script>
 </head>
 <body>
  <center>
   <table border="0" cellpadding="0" cellspacing="0" width="650">
    <tr>
     <td align="left" valign="top">
      This is just some website text.
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce aliquam wisi quis dui. Fusce tincidunt metus. Integer eleifend. Fusce et lectus. Praesent volutpat tempus sem. Nulla facilisi. Aenean magna metus, semper sit amet, euismod ac, sodales eu, dui. Vivamus porta, mauris non pellentesque auctor, odio lorem interdum arcu, id aliquam felis massa a nunc. Donec elementum, diam et tristique porttitor, mauris est vulputate velit, at dapibus felis lacus non magna. Phasellus lacus quam, congue ac.
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce aliquam wisi quis dui. Fusce tincidunt metus. Integer eleifend. Fusce et lectus. Praesent volutpat tempus sem. Nulla facilisi. Aenean magna metus, semper sit amet, euismod ac, sodales eu, dui. Vivamus porta, mauris non pellentesque auctor, odio lorem interdum arcu, id aliquam felis massa a nunc. Donec elementum, diam et tristique porttitor, mauris est vulputate velit, at dapibus felis lacus non magna. Phasellus lacus quam, congue ac.
      <p><a href="javascript:togglePopup('show','popup');">popup link, click here</a>
       <span id="popup">
        <div class="topPop">
         <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
           <td align="left" valign="middle">
            <b>popup title</b>
           </td>
           <td align="right" valign="middle">
            <a href="javascript:togglePopup('hide','popup')">close</a>
           </td>
          </tr>
         </table>
        </div>
        <div class="insidePop">
         popup content
        </div>
       </span>
      <p>Some more website text
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce aliquam wisi quis dui. Fusce tincidunt metus. Integer eleifend. Fusce et lectus. Praesent volutpat tempus sem. Nulla facilisi. Aenean magna metus, semper sit amet, euismod ac, sodales eu, dui. Vivamus porta, mauris non pellentesque auctor, odio lorem interdum arcu, id aliquam felis massa a nunc. Donec elementum, diam et tristique porttitor, mauris est vulputate velit, at dapibus felis lacus non magna. Phasellus lacus quam, congue ac.
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce aliquam wisi quis dui. Fusce tincidunt metus. Integer eleifend. Fusce et lectus. Praesent volutpat tempus sem. Nulla facilisi. Aenean magna metus, semper sit amet, euismod ac, sodales eu, dui. Vivamus porta, mauris non pellentesque auctor, odio lorem interdum arcu, id aliquam felis massa a nunc. Donec elementum, diam et tristique porttitor, mauris est vulputate velit, at dapibus felis lacus non magna. Phasellus lacus quam, congue ac.
     </td>
    </tr>
   </table>
  </center>
 </body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Position a div under link over text.

irate

Programmer

TheConeHead

Programmer

irate

Programmer

Similar threads

Part and Inventory Search

Sponsor