www.webdeveloper.com
Results 1 to 4 of 4

Thread: Collapsible Menu <SPAN> [Show/Hide]

  1. #1
    Join Date
    Apr 2004
    Posts
    27

    Talking Collapsible Menu <SPAN> [Show/Hide]

    I'm working on a text-based sub-navigation menu using NOT Javascript but ASP.NET Controls, Event Handlers, and a Show/Hide subroutine. Broken down logically this is easy to achieve, however, since I don't know ASP->ASP.NET from the ground up I'm having passing arguments through the onServerClick <a/> tag. Please help in establishing structure and syntax for this code. Thanks. Pseudo-code as follows:

    Sub Expand_Menu()

    Call Collapse_Menus()
    ElementID.Visible = "true"

    End Sub

    Sub Collapse_Menus()

    X = Determine active/expanded menu
    X.Visible = "false"

    End Sub



    <table>

    <span id="heading0" runat="server">
    <tr>
    <th><a href="#" onServerClick="Expand_Menu" runat="server">Heading0</a></th>
    </tr>
    </span>

    <span id="items0" runat="server" visible="false">
    <tr>
    <td>Item1</td>
    </tr>
    <tr>
    <td>Item2/td>
    </tr>
    <tr>
    <td>Item3</td>
    </tr>
    </span>

    <span id="heading1" runat="server">
    <tr>
    <th><a href="#" onServerClick="Expand_Menu" runat="server">Heading1</a></th>
    </tr>
    </span>

    <span id="items1" runat="server" visible="false">
    <tr>
    <td>Item1</td>
    </tr>
    <tr>
    <td>Item2/td>
    </tr>
    <tr>
    <td>Item3</td>
    </tr>
    </span>

    <etc..../>

    </table>

  2. #2
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    To change the visible attribute for elements running at the server from false to true or true to false the page needs to be resent. <asp:label will output a span, but the problem is it does not have an autopostback attribute. You will need something with that attribute so when you use the proper 'event hanler' it will resend the page. So you can't have the user simply click a label and have it become visible or invisible. Because you would need a text box, drop down list, radio button, or some other form element or a command button to be able to use that auto post back. You can however use a link, image or hyperlink, with a querystring, and then have it send the use to the page he is on (you can get which page he is on by using request.servervariables("url")) and then add that query string for the menu selection, have the script running at page load do a request.querystring("id"), and from that determine which div or span needs to be visible. If you need more help I can write a bit of code. Problem is, right now I am not running a server because my motherboard is in california in the newegg rma office, and I do not feel like setting up iis on this box, so I can't test code I write without uploading it to a server, which is a pain.

  3. #3
    Join Date
    Apr 2004
    Posts
    27

    Simplicity.

    <b>Objective:</b>
    Simple collapsible sub-navigation menu.

    <b>Method:</b>
    VBASP.NET; Eventhandler subroutines (show/hide)

    <b>Objects:</b>
    Nested ASP Panel Server Control

    <b>Logic (Pseudo):</b>

    <b>Subroutines:</b>

    <code>
    Show_SubItems()
    Call Hide_Active()

    Find appropriate SubItems Panel to show
    SubItems(x).Visible = True
    End Sub

    Hide_Active()
    Check which SubItems Panel = Active
    ActiveSubItems.Visible = False
    End Sub

    </code>

    <b>Layout:</b>

    <code>
    <Panel ID="Heading1">
    <A HREF="" onServerClick="Show_SubItems">Heading Text1</A>
    <Panel ID="SubItems1">
    SubItem 1
    SubItem 2
    Subitem 3
    </Panel>
    </Panel>

    <Panel ID="Heading2">
    <A HREF="" onServerClick="Show_SubItems">Heading Text2</A>
    <Panel ID="SubItems2">
    SubItem 1
    SubItem 2
    Subitem 3
    </Panel>
    </Panel>
    </code>

    <b>Help:</b>

    1. How can I programmatically detect the HEADING that is the parent of the Anchor Element OnServerClick Function & intelligently correspond with showing its nested Panel. It could work using lots of If and Then logic and hard coded detectors but there HAS to be an <b>intelligent</b> to do this automatically.
    2. Is there an easier way by building a custom control? (I just don't like excess baggage)

  4. #4
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    I told you how to do it... The easiest way would be detecting what is open and closed with a query string as I said in my last post.

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