SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Buttons that just won't die!

    Hello!

    I'm writing some code to make some sections visible/invisible on my page using the code below (it does the job!). My problem is that while it does what I hope it to do, once I click on one of the buttons, it remains "checked" (though the visibility will continue to toggle). Any thoughts as to how to fix this would be appreciated.

    Thanks so much....

    Code:
    <input type=button name=type value='Add Link' onclick="setVisibility('link_area', 'inline');setVisibility('file_area', 'none');setVisibility('text_area','none');";>
    <input type=button name=type value='Add file' onclick="setVisibility('link_area', 'none');setVisibility('file_area', 'inline');setVisibility('text_area','none');";>
    <input type=button name=type value='Add Text' onclick="setVisibility('link_area', 'none');setVisibility('file_area', 'none');setVisibility('text_area','inline');";></p>
    
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    // Start with a clean slate!
    setVisibility("link_area", "none");
    setVisibility("file_area", "none");
    setVisibility("text_area", "none");
    </script>

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This part of your script is changing the visibility of the divs on the page. You seem to be mixing up visibility and display. Display can be "in-line", but visibility can only be "visible" or "hidden". I have re-written your script below to illustrate the point.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Visibility Changes</title>
    <script type="text/javascript">
    <!--
    function setVisibility(id, visibility) {
    document.getElementById(id).style.visibility = visibility;
    }
    // Start with a clean slate!
    window.onload=function()
     { setVisibility("link_area", "hidden");
       setVisibility("file_area", "hidden");
       setVisibility("text_area", "hidden");
      }
    //-->
    </script>
    <style type="text/css">
    <!--
    body  { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:18px; color:#000; text-align:center; margin:3px 0px; }
    #wrap { position:relative; top:0px; left:0px; width:800px; height:500px; margin:0px auto; border:1px solid #000; text-align:left;  }
    .gen  { margin-top:20px; width:200px; height: 100px; border:1px solid #00F;  } 
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <form name="myForm">
        <p>
        <input type="button" name="type" value="Add Link" onclick="setVisibility('link_area', 'visible');setVisibility('file_area', 'hidden');setVisibility('text_area','hidden');" ;>
        <input type="button" name="type" value="Add file" onclick="setVisibility('link_area', 'hidden');setVisibility('file_area', 'visible');setVisibility('text_area','hidden');" ;>
        <input type="button" name="type" value="Add Text" onclick="setVisibility('link_area', 'hidden');setVisibility('file_area', 'hidden');setVisibility('text_area','visible');" ;></p>
      </form>
      <!-- end form -->
      <div id="link_area" class="gen">
        Add Link</div>
      <div id="file_area" class="gen">
        Add File</div>
      <div id="text_area" class="gen">
        AddText</div>
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kreut View Post
    My problem is that while it does what I hope it to do, once I click on one of the buttons, it remains "checked".
    The problem is caused by the radio buttons you are using on your page all having diffferent names. Radio buttons are used as a group and should all be named the same. If you use a single name then only one will remain selected as you click across the group.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. I'm sure that others will find your solution helpful.


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
  •