Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    bizarre CSS visibility error with pop-up panes in firefox and opera

    Ok, I'm using CSS visibility property to make pop-up panes appear and disappear. These panes are encased in spans with position absolute.

    The following code works:

    Code:
    function showNotebookHelp()
    {
     document.getElementById("notebookhelp").style.visibility = "visible";
     //document.getElementById("NAPane").style.visibility = "visible";
    }
    function  hideNotebookHelp()
    {
     document.getElementById("notebookhelp").style.visibility = "hidden";
     //document.getElementById("NAPane").style.visibility = "hidden";
    
    }
    And so does the following to make the "addnotebook" pane appear:

    Code:
    function showAddNotebook()
    {
     document.getElementById("addnotebook").style.visibility = "visible";
    
    }
    BUT!!! the following code to make the "addnotebook" pane disappear does not work.

    The function gets called. And the error console of firefox and opera report absolutely no errors, but the pane does not go away.

    Code:
    function hideAddNotebook()
    {
      alert("hide add called");
     document.getElementById("addnotebook").style.visibility = "hidden";
    
    }
    Here is the code of the actual pane, which happens to be enclosed in a div that contains a sub-interface:

    Code:
              <td class="notetabletd" title="Make New Notebook" onClick="showAddNotebook();">+
                      <span id="addnotebook" name="addnotebook" style="position:absolute; visibility:hidden; z-index:3; ">
                 <table cellpadding="5px" width="300px" bgcolor="white" style="position:absolute; z-index:4; left:30; top:-30;  border-style:solid; border-width:2px;font-size:12; font-weight:bold;">
                 <tr>
                 <td>Notebook Name:</td>
                     <td><input type="text" value="" id="addNotebookName" name="addNotebookName"></td>
                 </tr>
                     <tr>
                 <td>Urgency/Importance:</td>
                     <td>
                        <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                        </select>
                     </td>
                 </tr>
                     <tr>
                 <td></td>
                     <td></td>
                 </tr>
                     <tr><td><input type="button" value="Cancel" onClick="hideAddNotebook();"></td>
                     <td><input type="button" value="Create!" onClick="doAddNotebook();"></td>
                     </tr>
                 </table>
                 </span>
              </td>
    The td which contains the span is inside a table that is inside a div. This is so bizarre it has me pulling my hair out. please help.

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    reason found

    reason for the error was that the whole td was the onclick area for popup and the popup pane was logically part of the td so clicking on any part of the td caused the pane to remain. solved. thanks anyhoo!


  •  

    Tags for this Thread

    Posting Permissions

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