SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show div/hide div

    Hi Guys,

    I have a show/hide div swapper:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Div Show</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .demo  {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
             width:480px; height:280px;
            z-index:99;  visibility:hidden;}
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function toggleBox(szDivID, iState) // 1 visible, 0 hidden
    {
        if(document.layers)	   //NN4+
        {
           document.layers[szDivID].visibility = iState ? "show" : "hide";
        }
        else if(document.getElementById)	  //gecko(NN6) + IE 5+
        {
            var obj = document.getElementById(szDivID);
            obj.style.visibility = iState ? "visible" : "hidden";
        }
        else if(document.all)	// IE 4
        {
            document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
        }
    }
    // -->
    </script>
    
    
    </head>
    
    <body>
    <div ID="demodiv" class="demo">
       Put text, tables or any other HTML contents here, as you would put in
       any other HTML page.
       .....
       ..... and more.
    </div>
    
    <!-- To Show The DIV -->
    
    <input type="button" onClick="toggleBox('demodiv',1);" value="Show Div">
    
    <!-- To Hide The DIV -->
    
    <input type="button" onClick="toggleBox('demodiv',0);" value="Hide Div">
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    </body>
    </html>
    Now it works fine, but my problem is when the page loads there is a big gap at the top where the box will appear if you hit show div. How can I change this so that there is no gap, and when you click the button everything moves down the page when the div appears?

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use display:none and display:block instead of visibility:hidden and visibility:visible.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He's right.. try this..

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Div Show</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .demo  {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
             width:480px; height:280px;
            z-index:99;  display:none}
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function toggleBox(szDivID, iState) // 1 visible, 0 hidden
    {
        if(document.layers)	   //NN4+
        {
           document.layers[szDivID].display = iState ? "block" : "none";
        }
        else if(document.getElementById)	  //gecko(NN6) + IE 5+
        {
            var obj = document.getElementById(szDivID);
            obj.style.display = iState ? "block" : "none";
        }
        else if(document.all)	// IE 4
        {
            document.all[szDivID].style.display = iState ? "block" : "none";
        }
    }
    // -->
    </script>
    
    
    </head>
    
    <body>
    <div ID="demodiv" class="demo">
       Put text, tables or any other HTML contents here, as you would put in
       any other HTML page.
       .....
       ..... and more.
    </div>
    
    <!-- To Show The DIV -->
    
    <input type="button" onClick="toggleBox('demodiv',1);" value="Show Div">
    
    <!-- To Hide The DIV -->
    
    <input type="button" onClick="toggleBox('demodiv',0);" value="Hide Div">
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    <p>here is some text</p>
    </body>
    </html>

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks people!


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
  •