www.webdeveloper.com
Results 1 to 3 of 3

Thread: div visibility

  1. #1
    Join Date
    May 2011
    Posts
    2

    div visibility

    Hi.
    I'm sorry if this question is too amateur.
    I'm just appying some inherited code and I'm not a JS professional.
    So, I ask for your help.

    I'm doing a top menu that show and hides several div:
    Code:
    <script type="text/javascript" language="JavaScript"><!--
     
    function HideAllShowOne(d) {
    // Between the quotation marks, list the id values of each div.
     
    var IDvaluesOfEachDiv = "id1 id2 id3 id4 id5 id6";
     
    //-------------------------------------------------------------
    IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
    IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
    IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
    IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
    var IDlist = IDvaluesOfEachDiv.split(" ");
    for(var i=0; i<IDlist.length; i++) { HideContent(IDlist[i]); }
    ShowContent(d);
    }
     
     
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>
    When the page load, all div are hidden with a "display none" css line, and there is a background image.

    Can I show the first div when the page loads and hide it when someone clicks on the menu to view the other divs?
    If I change the div visibility on the css, it remains always visible.
    I believe that some modification on the script could do that, but I don't know how to do it.

    Thank you for your help

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    This is kind of 'hackish', but..

    You could take the ID of that first div and use JS to set the display to be "" on page load.

    function setFirst() {
    firstDiv = document.getElementById("divName");
    firstDiv.style.display = "";
    }
    window.onload = setFirst; // NOTICE - no parenthesis when calling this with window.onload
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    May 2011
    Posts
    2

    Thanks!

    WolfShade, thank you for your answer. It works!
    I added 'block' to firstDiv.style.display = ""; (firstDiv.style.display = "block" and it's working the way I wanted.
    Thanks for your help!

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