Code to hide / show divs onload

Discussion in 'Web Design and Development' started by MegaMan1311, Jul 15, 2007.

  1. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #1
    I need a javascript code to hide or show divs onload. I am using it to hide a non javascript version of the content and show a javascript version. So that if the user doesn't have javascript enabled, the javascript content will not be shown and they will see a no javascript version and vice-versa.

    I have gotten so far as that the javascript version is hidden and the no script version is visible.

    Thanks in advance!

    MegaMan1311
     
  2. Gizmotoy macrumors 65816

    Gizmotoy

    Joined:
    Nov 6, 2003
    #2
    Well, in your non-javascript div (default to visible) put the following in the div:
    onload="Element.hide( this )"

    And in the javascript div (default to invisible) put the following:
    onload="Element.show( this )"

    I'm not a great javascript guy, but I think that should take care of it. If javascript is not enabled the onloads are ignored and the default non-javascript version is shown. Though like I said I'm not the best and my javascript experience is limited mainly to scriptaculous. Sorry if it doesn't work for you, I just saw you hadn't gotten any other responses.
     
  3. Xyl macrumors regular

    Joined:
    Dec 30, 2006
    #3
    Use CSS with display:none
    Assign a class name to the CSS property and enable/disable the class of your div element using JavaScript.
    document.getElementById("divElement").className = "putclassnamehere";
     
  4. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #4
    Thanks to both of you. I tried both, but they did not work. Here is my code for the second one:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .hidden {
    	display: none;
    }
    -->
    </style></head>
    <body>
    <script type="text/javascript">document.getElementById("shown").className = "hidden";</script>
    <script type="text/javascript">document.getElementById("hidden").className = "shown";</script>
    <div id="shown">No Javascript</div>
    <div id="hidden">Javascript</div>
    </body>
    </html>
    
    
    What am I doing wrong? Thanks in advance.
     
  5. Xyl macrumors regular

    Joined:
    Dec 30, 2006
    #5
    It should be div class="hidden"

    So then you'd have something like..
    .hidden
    {
    display:none;
    }

    <div id="theElement" class="hidden">Won't see this.</div>

    Then the javascript would be:
    // Make "Won't see this" appear
    document.getElementById("theElement").className = "";
     
  6. stndn macrumors member

    Joined:
    Oct 22, 2006
    Location:
    earth
    #6
    In the code you posted, you are trying to change the element's class before it is present in the HTML page.
    When the javascript code is executed, the script cannot find the element (yet) so nothing happens.

    If you moved the <div>'s above the script used to change the class name, then you should see it working.

    -stndn.
     
  7. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA

Share This Page