www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS/JavaScript Div Display QUestion

  1. #1
    Join Date
    Jun 2007
    Location
    B'ham, Al
    Posts
    14

    CSS/JavaScript Div Display QUestion

    I am trying to show/hide divs but I cannot get a 'home' div to display initially. I know the answer is simple but it plumb evades me.

    Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>


    <style type="text/css">
    div.button {
    cursorointer;
    }

    .mainglossary{
    position:absolute;
    top:215px;
    left:225px;
    margin:1px;
    width:740px;
    padding:5px;
    background-color:#017343;/*#e9e1bc*/
    /*border:solid 2px #000;*/
    color:#eee;/*#fff*/
    height:400px;
    overflow:auto;
    }


    #navglossary{
    position:absolute;
    top:215px;
    left:10px;
    width:185px;
    background-color:#017343;
    color:#fff;
    padding:4px;
    overflow:auto;
    /*border:#000000 thin solid;*/
    }
    </style>
    <script type="text/javascript">


    function swap(what)
    {
    var theDivs = document.getElementsByTagName('div');

    for(var i = 0; i < theDivs.length; i++)
    {
    if(theDivs[i].id.search('swap') == 0)
    {
    theDivs[i].style.display = 'none';
    }
    }

    document.getElementById('swap'+what).style.display = 'block';
    }
    window.onload = function()
    {

    var theDivs2 = document.getElementsByTagName('div');

    for(var j = 0; j < theDivs2.length; j++)
    {
    if(theDivs2[j].id.search('swap') != -1)
    {
    theDivs2[j].style.display = 'none';
    }
    }
    }
    </script>
    </head>
    <body>



    <div id="navglossary">
    <div class="button" onClick="swap(1)">first</div>
    <div class="button" onClick="swap(2)">second</div>
    <div class="button" onClick="swap(3)">third</div>
    <div class="button" onClick="swap(4)">fourth</div>

    </div>

    <div class="mainglossary">
    <div id="swap0">home display</div>
    <div id="swap1">first display</div>
    <div id="swap2">second display</div>
    <div id="swap3">third display</div>
    <div id="swap4">fourth display</div>

    </div>

    </body>
    </html>

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Add the div you want to display initially and "display:block;" to your CSS.

  3. #3
    Join Date
    Jun 2007
    Location
    B'ham, Al
    Posts
    14
    Tried that. It works if I change the ID to something other than swap0. But then it displays in addition to the subsequent displays. I would like for the 'home display' to show initially. As the other divs display, the 'home display' should not display. I feel it is something really simple, but...

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Hmmm... I don't know.
    If you can't get it working, you might try something like this:
    http://javascript.internet.com/misce...t-display.html

    KDLA

  5. #5
    Join Date
    Jun 2007
    Location
    B'ham, Al
    Posts
    14
    I have something very similar in use on another app. I thought of using that while I was eating dinner. I will try it Monday.Thanks.

  6. #6
    Join Date
    Jun 2007
    Location
    B'ham, Al
    Posts
    14
    KDLA, that works. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles