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 3 of 3

Thread: Closing the Gap

  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    297
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Closing the Gap

    Hi All,

    I have made a page displaying 3 small tables. Using javascript and div's, I can make the second table visible or hidden ( I know, quite simple but it impressed me )

    When the second table is hidden, a large white space is left between tables 1 and 3.

    How do I get this gap to automatically shrink (by moving table 3 upwards)and when making table 2 visible again, to push table 3 down?

    Regards

    Gary

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sounds like you are probably using the visibility property to hide the table. When visibility is set to "hidden", the element is invisible to your eyes, but still affects the layout as if it were there.

    To hide and element and remove its effects on the document flow, you will want to use the display property. The display property is part of the same group of properties as visibility:

    Code:
    element.style.display="none";

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    297
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hi Angus,

    Thanks for the information, worked a treat!

    This is what I did:

    ==========================

    1. I put this code in the head:

    <script type=text/javascript>
    var isNS = navigator.appName.indexOf("Netscape") != -1
    var isIE = navigator.appName.indexOf("Microsoft") != -1

    function show() {
    if (isNS) document.layers["d1"].visibility = "show";
    if (isIE) document.all.d1.style.display = "inline";
    }
    function hide() {
    if (isNS) document.layers["d1"].visibility = "hide";
    if (isIE) document.all.d1.style.display = "none";
    }
    </script>

    2. I put this code in the body of the page:

    <a href="javascript:show()">CLICK ME TO SHOW TABLE 9</a>

    <a href="javascript:hide()">CLICK ME TO HIDE TABLE 9</a>

    3. I place the DIV tas before and after the table I wanted to Show/Hide.

    <DIV id="d1" style="display:none">
    <TABLE ID="Table9">
    <TR> etc, etc, etc
    </TR>
    </TABLE>
    </DIV>

    =======================================

    This worked absolutely fine and the manual links to the javascript did indeed show and hide table 9.

    I then tried to get clever and automate the show/hide depending on an asp test and it all went wrong

    This is what I tried. I replaced the manual links:

    <a href="javascript:show()">CLICK ME TO SHOW TABLE 9</a>
    <a href="javascript:hide()">CLICK ME TO HIDE TABLE 9</a>

    .... with the following script to check a database value to decide to show or hide the table:

    <% if lcase(ors("ShowOrHide")) = "show" then %>

    <script>
    document.all.d1.style.display = "inline";
    </script>

    <%else %>

    <script>
    document.all.d1.style.display = "none";
    </script>

    <%
    end if
    %>

    Trouble is, it doesn't work and I get an underfined 'd1' error message.

    Where have I gone wrong?

    Regards

    Gary


  •  

    Posting Permissions

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