We help IT Professionals succeed at work.
Get Started

DHTML & CSS PopUp Edit Box

phonglong
phonglong asked
on
441 Views
Last Modified: 2008-02-07
hi, i've been trying to make a pop-up edit box come up whenever the user clicks on [+], and have that layer overlay next to the [+] sign.  The box needs to be next to the [+] sign and scale to any window size(so i don't think you can use absolute positions).  The problem i'm having is that the browser makes space for the box.

this is an example of where you would see the plus sign.[+]
then some other text or other page elements will go directly after.

click on the '[+]' and a white box should pop up 5 pixels to the right of the '[+]' sign.

only, the page is rendered so that it appears like this (take note of white space between the two lines):

this is an example of where you would see the plug sign.[+]






then some other text or other page elements will go directly after.

thanks for all the help!

Here's the code to help clear things up:

the javascript included in the file is simple:
*************adminFunctions.js*********************
//javascript goes here
function openBox ( name ) {

      var x = getObj(name);
      x.visibility = 'visible';

}

function closeBox ( name ) {

      var x = getObj(name);
      x.visibility = 'hidden';

}

//to get objects by name
function getObj(name) {
  if (document.getElementById) {
    return document.getElementById(name).style;
  }
  else if (document.all) {
    return document.all[name].style;
  }
  else if (document.layers) {
    return document.layers[name];
  }
  else return false;
}


*************index.html***************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0/EN">

<HTML>

<HEAD>
      
      <!-- Our Fun Title -->
      <TITLE>FUN TITLE</TITLE>
      
      <!-- Define Meta Information -->
      
      <META NAME="Keywords"       CONTENT="KEYWORDS GO HERE">
      <META NAME="Description" CONTENT="SITE DESCRIPTION GOES HERE">

      <META NAME="Author" CONTENT="Phong Long" LANG="english">
      
      <!-- CSS Stuff Here -->
      
      <LINK rel="stylesheet" href="./css/defaultStyles.css" type="text/css">      
      
      <!-- Javasciprt Import Here -->
      <SCRIPT TYPE='text/javascript' SRC='./js/adminFunctions.js' charset='utf-8'></SCRIPT>

</HEAD>

<BODY>
<!-- the Main Table -->
<TABLE CLASS="main" CELLSPACING=0 CELLPADDING=0>

      <TR>
            <TD COLSPAN=3 HEIGHT="10"></TD>
      </TR>
      
      <TR>
            <TD HEIGHT="100%">&nbsp;</TD>
            <TD HEIGHT="100%">
                  test test
<SPAN onclick="openBox('test')" onmouseover="style.color='green'" onmouseout="style.color='black'">[+]</SPAN>
                          <DIV id="test" CLASS="editBox">

                         
                                <SPAN onclick="closeBox('test')" onmouseover="style.color='red'" onmouseout="style.color='black'">[x]<BR></SPAN>some test text

                          </DIV>
                         
test test
                         
            </TD>
                         
            <TD HEIGHT="100%">&nbsp;</TD>
      </TR>
      
      <TR>
            <TD COLSPAN=3 HEIGHT="10"></TD>
      </TR>

</TABLE>

<!-- end of website, include the footer -->
</BODY>

</HTML>

***************
DIV.editBox      {
            position:            relative;
            height:                  200px;
            width:                  200px;
            visibility:            hidden;
            background-image:       url(../images/whiteAlpha.png);
            background-repeat:      repeat;
            z-index:            100;
            }

SPAN            {
            color:                  #000;
            font:                  bold 8pt/10pt sans-serif;
            }

TABLE.main      {
            border-collapse:      collapse;
            border-spacing:            0;
            height:                  100%;
            width:                  100%;
            }

BODY            {      
            background:            #C0C0C0;
            margin-top:            0em;
            margin-bottom:            0em;
            margin-left:            0em;
            margin-right:            0em;
            height:                  100%;
            background-attachment:      fixed;
            background-image:       url(../images/);
            background-repeat:       no-repeat;
            background-position:       left center;
            cursor:                  default;
            }
Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 7 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE