Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: DIV Show/Hide

  1. #1
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default DIV Show/Hide

    Ok, I want to have something simple, that just writes to a DIV some HTML code. I've looked, and found some, but none work quite the way I want. All I want is something simple.

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Code:
    <script type="text/javascript">
     function showHide(obj) {
       var div = document.getElementById(obj);
       if (div.style.display == 'none') {
         div.style.display = '';
       }
       else {
         div.style.display = 'none';
       }
     }
    </script>
    Then call it like so:

    Code:
    <a href="#" onclick="showHide('hidden_div'); return false;">Some Text</a>
    
    <div id="hidden_div" style="display: none;">
      Hidden Text is here!!!!!
    </div>
    Hope this is what you mean. If not, please be more specific in your request.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    Thanks thetestingsite. Sorry my post wasn't very good, I was in a hurry.

  4. #4
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    Ok. Problem, I cannot style with my external style-sheet. If I insert the display: none into external the JavaScript no longer effects it, if its in the page the browser ignores external style commands. Any ideas guys?

  5. #5
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    Anyone?

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Test Document</title>
    		<link rel="stylesheet" type="text/css" href="one.css" />
    		<script type="text/javascript">
    			function showHide(id){
    				var objDisp = document.getElementById(id).style.display;
    				var objDiv = document.getElementById(id);
    								
    				if(objDisp == 'none' || objDisp == '')
    					objDiv.style.display = 'block';
    				else
    					objDiv.style.display = 'none';
    			}
    			
    			var iCntr = 0;
    			var sCurId;
    			var sNewId;
    			function changeDivId() {
                        if(iCntr == 0) {
                             sCurId = 'hidden_div';
                             sNewId = 'newId';
                             iCntr++;
                             document.getElementById(sCurId).id = newId;        
         			} else {
                             document.getElementById(sCurId).id = newId;
                        }
          
                        var temp = sCurId;
                        sCurId = newId;
                        newId = temp;     
                   }
    		</script>
    	</head>
    	<body>
    		<p><a href="#" onclick="showHide('hidden_div'); return false;">Some Text</a>&nbsp;&nbsp;<a href="#" onclick="changeDivId(); return false;">Other Test</a></p>
    		<div id="hidden_div">
    		  Hidden Text is here!!!!!
    		</div>
    	</body>
    </html>
    Code:
    one.css
    
    #hidden_div {
    	display: none;
    }
    
    #newId {
    	display: block;
    }
    Check the above example which will show/hide the div based on two different methods. You can use the first and second links to check them out.

  7. #7
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    For some reason it shows no background color or borders...?

    Code:
    div#hidden_div
    {
    margin: auto;
    display: none;
    border-right: 1px #4F4F4F solid;
    border-left: 1px #4F4F4F solid;
    border-bottom: 1px #4F4F4F solid;
    height: 20px;
    width: 350px;
    background-color: #000000;
    }
    Thats my CSS.

  8. #8
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    It should use the background color you've used in your CSS once you display the element as your CSS contains a display: none item by default the element will be hidden.

    Another problem is when you show the element either you specify a background image or another background color.

    If you provide a link or your source code that would be easy for us to troubleshoot.

  9. #9
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    I found it, my main browser (Firefox) doesn't show it correctly, but IE does. FF overlays it when ever you click, IE pushes everything down for it. Also, my sites not uploaded, my host is having some FTP problems at the moment.

  10. #10
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    Check these out, screen shots of IE and FF. Heres my code:

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <link rel="shortcut icon" href="images/favicon.ico">
      <link rel="stylesheet" href="css/layout.css"
     type="text/css">
      <meta content="text/html; charset=ISO-8859-1"
     http-equiv="content-type">
      <title>Fassist | Home</title>
      <script type="text/javascript" language="JavaScript"
     src="jscripts/search.js">
      </script>
    </head>
    <body>
    <div id="top">
    <img id="logo" alt="Fassist Logo" title="Fassist Logo"
     src="images/small_logo.png"><br>
    <div id="menu">
    <div id="spacer1"></div>
    <div id="linkbox_1"><a href="http://fassist.webng.com/"><img
     id="home"
     onmouseout="this.src='images/homebuttons/homebutton_inactive.png'"
     onmouseover="this.src='images/homebuttons/homebutton_active.png'"
     alt="Home" title="Home"
     src="images/homebuttons/homebutton_inactive.png"></a><br>
    </div>
    <div id="linkbox_2"><a href="/example"><img
     id="example"
     onmouseout="this.src='images/examplebuttons/examplebutton_inactive.png'"
     onmouseover="this.src='images/examplebuttons/examplebutton_active.png'"
     alt="Example" title="Example"
     src="images/examplebuttons/examplebutton_inactive.png"></a>
    <br>
    </div>
    <div id="linkbox_3"><a href="/request">Request</a></div>
    <div id="linkbox_4"><a href="/link2us">Link2Us</a></div>
    <div id="linkbox_5"><a href="/gallery">Gallery</a></div>
    <div id="linkbox_6"><a href="/contact">Contact</a></div>
    <div id="linkbox_7"><a href="#"
     onclick="showHide('hidden_div'); return false;">Search</a></div>
    <div id="spacer2"></div>
    </div>
    <div id="hidden_div">
    <form method="get" action="http://www.google.com/search"><input
     id="searchbox" name="q" size="25" maxlength="255"
     value="" type="text"><input id="searchbutton"
     value="Google Search" type="submit"></form>
    </div>
    </div>
    <div id="main">
    Some text...</div>
    <a href="http://validator.w3.org/check?uri=referer"><img
     id="w3c" src="http://www.w3.org/Icons/valid-html401-blue"
     alt="Valid HTML 4.01 Transitional"></a>
    </body>
    </html>
    CSS:
    Code:
    BODY
    { 
    text-align: center;
    background-color: #000000;
    }
    
    div#top
    {
    margin: auto;
    height: 100px;
    width: 650px;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 10pt;
    background-color: #1C1C1C;
    }
    
    img#logo
    {
    height: 75px;
    width: 75px;
    border: 0px;
    }
    
    div#menu
    {
    margin: auto;
    height: 20px;
    width: 428px;
    background-color: #1C1C1C;
    }
    
    div#linkbox_1
    {
    background-color: #000000;
    border-top: 1px #4F4F4F solid;
    border-left: 1px #4F4F4F solid;
    border-bottom: 1px #4F4F4F solid;
    height: 20px;
    width: 60px;
    float: left;
    }
    
    img#home
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    div#linkbox_2, div#linkbox_3, div#linkbox_4, div#linkbox_5, div#linkbox_6
    {
    border-top: 1px #4F4F4F solid;
    border-bottom: 1px #4F4F4F solid;
    border-left: 1px #4F4F4F solid;
    height: 20px;
    width: 60px;
    float: left;
    background-color: #000000;
    }
    
    img#example
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    img#request
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    img#link2us
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    img#gallery
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    img#contact
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    div#linkbox_7
    {
    border-top: 1px #4F4F4F solid;
    border-right: 1px #4F4F4F solid;
    border-left: 1px #4F4F4F solid;
    border-bottom: 1px #4F4F4F solid;
    height: 20px;
    width: 60px;
    float: left;
    background-color: #000000;
    }
    
    img#search
    {
    border: 0px;
    height: 20px;
    width: 60px;
    }
    
    div#hidden_div
    {
    background-color: #000000;
    margin: auto;
    display: none;
    height: 20px;
    width: 350px;
    }
    
    #searchbox
    {
    background-color: #000000;
    color: white;
    border: 1px #CCCCCC solid;
    }
    
    
    #searchbutton
    {
    color: white;
    border: 1px #CCCCCC solid;
    background-color: #000000;
    }
    
    div#main
    {
    margin: auto;
    height: 700px;
    width: 650px;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 10pt;
    background-color: #1C1C1C;
    }
    
    #read
    {
    color: #FF0000;
    }
    
    img#w3c
    {
    height: 31px;
    width: 88px;
    border: 0px;
    }
    
    A:link
    {
    text-decoration: none; color: #FFFFFF;
    }
    
    A:visited
    {
    text-decoration: none; color: #FFFFFF;
    }
    
    A:hover
    {
    text-decoration: none; color: #CCCCCC;
    }
    WHY IE, WHY!?

    EDIT: Ok, I cleaned up the code and added in the fix for IE transparency, as to why my lines down I don't know... Its like IEs putting in padding, if I reduce size of image 1px, then the bar comes up 1px... I'm confused.

    EDIT2: Hmm, I was messing with the code and for some reason even though I removed the background color of black (IE was applying it I thought) it remains black... I've refreshed, restarted, and cleared cache...IE sucks, Opera messes it up SLIGHTLY but its nothing that looks messed up.

    EDIT3: Ok, hopefully my final edit, I got IE to display almost right, all thats left is the stupid almost-padding/margin problem. I uploaded a update of what IE looks like.
    Last edited by TimFA; 09-28-2007 at 04:31 PM.

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
  •