Home ›
ASP.NET Forums » General ASP.NET » Client Side Web Development » help on how to togle the visibility on/off of the legend of a <div>

help on how to togle the visibility on/off of the legend of a <div>

Last post 11-21-2008 5:03 AM by sharpeffect. 8 replies.

Sort Posts:

  • help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 7:45 PM
    • Member
      113 point Member
    • bcweed966
    • Member since 11-27-2006, 2:40 AM
    • Posts 648

    I have a div, it has some <legend> txt. How do I make it invisible thru javascript?

    and how do I change the legend text?

    thank you

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 7:50 PM
    • All-Star
      24,602 point All-Star
    • budugu
    • Member since 01-12-2006, 2:15 PM
    • North Carolina
    • Posts 3,685

    Simple, just add runat="server" to legend tag. check this code.. 

    <legend ID="Test1" runat="server" ></legend>
     

    In Code behind.. 

    Test1.value = "";
     
    Vijay Kodali || My Blog


    "Don't be afraid to be wrong; otherwise you'll never be right."

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 7:56 PM
    • Member
      113 point Member
    • bcweed966
    • Member since 11-27-2006, 2:40 AM
    • Posts 648

    yo!

    this is the "client side web development" so obviously I am asking on how to do this with javascript on the client...

    also... on the server, the legend text is much easier to set with the "groupingText" property of the panel control

    thanks

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 8:12 PM
    • All-Star
      24,602 point All-Star
    • budugu
    • Member since 01-12-2006, 2:15 PM
    • North Carolina
    • Posts 3,685

    bcweed966:
    this is the "client side web development" so obviously I am asking on how to do this with javascript on the client...

    var e = document.getElementById("Test1");  //where Test1 is legend ID
e.value = "set Text here "; //set Text here..
     
    Vijay Kodali || My Blog


    "Don't be afraid to be wrong; otherwise you'll never be right."

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 8:17 PM
    • Member
      113 point Member
    • bcweed966
    • Member since 11-27-2006, 2:40 AM
    • Posts 648

    ok. But my legend.. if it is really a legend... is really just the text of the GroupingText property of a panel control.

    I dont declarativly put the legend on the page, it is redenred because I set the GroupingText property

    so then how do I refer to thet legend clientID? that is really the question I now realize

     

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 8:30 PM
    • Member
      113 point Member
    • bcweed966
    • Member since 11-27-2006, 2:40 AM
    • Posts 648

    in fact this is how this renders:

    <asp:Panel ID="Panel2" runat="server" GroupingText="test">

    dfd

    </asp:Panel>

    <div id="Panel2">
     <fieldset>
      <legend>
       test
      </legend>
            dfd
           
     </fieldset>
    </div>           

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-20-2008, 9:20 PM
    Answer
    • All-Star
      24,602 point All-Star
    • budugu
    • Member since 01-12-2006, 2:15 PM
    • North Carolina
    • Posts 3,685

    Well, you can add "ID" to any tag, check this code..  

    <div id="Panel2">
 <fieldset>
  <legend id="test1">
  
  </legend>     
        
 </fieldset>
</div>
     In JS access that control like this..  
      function insertText()
    {
    test1.innerText ="Testing Legend ID awdasdas";
    }
     
    Vijay Kodali || My Blog


    "Don't be afraid to be wrong; otherwise you'll never be right."

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-21-2008, 2:28 AM
    Answer
    • Contributor
      5,079 point Contributor
    • NHOQUE
    • Member since 04-02-2008, 9:00 AM
    • Kumamoto, Japan
    • Posts 849

    bcweed966:

    in fact this is how this renders:

    <asp:Panel ID="Panel2" runat="server" GroupingText="test">

    dfd

    </asp:Panel>

    <div id="Panel2">
     <fieldset>
      <legend>
       test
      </legend>
            dfd
           
     </fieldset>
    </div>           

    Try it from here,

    http://amar-desh.net/codersBlog/post/2008/11/21/How-to-remove-3clegend3e-tag-while-creating-3caspPanel3e-tag.aspx

    or , from here,

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Virtual Directory</title>
        <script type="text/javascript">
       
        function removeGroupText(){
            var pnl=document.getElementById("Panel1");
            var lgnd=pnl.getElementsByTagName("legend");
            for (i=0; i<lgnd.length; i++){
                lgnd[i].parentNode.removeChild(lgnd[i]);
            }
        }
       
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" GroupingText="Test">
            <asp:Label ID="lbl1" runat="server" Text="Welcome to this site"></asp:Label>
            </asp:Panel>
        </div>
        <input type="button" value="Remove" onclick="removeGroupText();" />
        </form>
    </body>
    </html>

    The code above works for IE as well as FireFox. I did not test it in other borwsers.

    Thanks.

    HOQUE MD.NAZMUL
    [document.getReaders]

  • Re: help on how to togle the visibility on/off of the legend of a <div>

    11-21-2008, 5:03 AM
    • Participant
      1,308 point Participant
    • sharpeffect
    • Member since 09-18-2008, 12:49 PM
    • Posts 219

    Hi Define the div just like this. 

              <div id="temp" name="temp" style="visibility:visible"> Hello this is temporary text. </div>

    Now define the javascript in the head of the page just like this 

    <script language="javascript" type="text/javascript">
    function temp()
    {
       document.getElementById('temp').style.visibility=document.getElementById('temp').style.visibility=='hidden'?'visible':'hidden';
    }
</script>
     now in the click event of the hyperlink show/hide the div it would something like this. 
    <asp:HyperLink ID="HyperLink1" onclick="temp();" runat="server">HyperLink</asp:HyperLink>
    Hope this will work.
     
    ASP.NET ListView Control
Page 1 of 1 (9 items)
RSS Available

Contact | Advertise | Ads by BanManPro | Running IIS7
All Rights Reserved. | Terms of Use | Trademarks | Privacy Statement
© 2009 Microsoft Corporation.