TECH_NET
asked on
Help with the menu toggling
I have a web page that displays a menu bar at the top of each page. This is part of my masterpage.
What i am trying to achieve it that when i click on any one of the tabs, i highlight that tab by setting the class property to t_tab_s and other are set to class property t_tab
( the class properties are specified in the Css file)
Now when i click on tab 2 (ie Interview Tips), i need the class to be set as t_tab_s and so forth.
How can i achieve that functionality.
What i am trying to achieve it that when i click on any one of the tabs, i highlight that tab by setting the class property to t_tab_s and other are set to class property t_tab
( the class properties are specified in the Css file)
Now when i click on tab 2 (ie Interview Tips), i need the class to be set as t_tab_s and so forth.
How can i achieve that functionality.
<table>
<tr>
<td align="left" valign="bottom" class="top_center_tab_td">
<div id="tab1" runat="Server" class="t_tab_s"><a href="Default.aspx">Home</a></div>
<div id="tab2" runat="Server" class="t_tab"><a href="ArticlesView.aspx?CategoryID=1">Interview Tips</a></div>
<div id="tab3" runat="Server" class="t_tab"><a href="InterviewQuestionsView.aspx">Questions </a></div>
<div id="tab4" runat="Server" class="t_tab"><a href="Powerpacks.aspx">Powerpacks</a></div>
<div id="tab5" runat="Server" class="t_tab"><a href="Forums.aspx">Community</a></div>
<div style="font-size:11px; padding-top:7px; text-align:right; line-height:10px; "> </div>
</td>
</tr>
</table>
and you just have to make your click event, which I named as menu_Click. Which will now look like this:
protected void menu_Click(object sender, EventArgs e)
{
Panel[] tabs = { tab1, tab2, tab3, tab4, tab5 }; //fill this with your tabs
LinkButton clickedLink = (LinkButton)sender;
foreach (Panel p in tabs)
p.CssClass = "t_tab";
Panel clickedTab = (Panel)this.FindControl(clickedLink.ID.Replace("lb_", string.Empty));
clickedTab.CssClass = "t_tab_s";
}
What I did in the code-behind is pretty simple.
-Line 5/6 I run though all teh tabs and set them to the 'base' css class
-Line 7 I take the link that clicked, strip off the 'lb_' from it's ID, whic as you will notice corresponds directly to the tab it reside in (ie, 'lb_tab1' is in 'tab1', 'lb_tab3' is in 'tab3', etc.) and choose that tab
-Line 8 I choose the 'selected' cssClass
We had to change everything to asp.net control so it would be easy to manipulate it behind the scenes. This is really only one of many, many ways to do with with asp.net. This is also possible with Javascript and with other methods like the asp:menu control. But this one seems the easiest and most straight-forward.
-Line 5/6 I run though all teh tabs and set them to the 'base' css class
-Line 7 I take the link that clicked, strip off the 'lb_' from it's ID, whic as you will notice corresponds directly to the tab it reside in (ie, 'lb_tab1' is in 'tab1', 'lb_tab3' is in 'tab3', etc.) and choose that tab
-Line 8 I choose the 'selected' cssClass
We had to change everything to asp.net control so it would be easy to manipulate it behind the scenes. This is really only one of many, many ways to do with with asp.net. This is also possible with Javascript and with other methods like the asp:menu control. But this one seems the easiest and most straight-forward.
My 2 cents:
Depending on what you are trying to accomplish and how you are trying to accomplish it, all this can be done using javascript without any server side controls or even posting back. That is as I said depending on things like wheter you HAVE to post back or not.
Depending on what you are trying to accomplish and how you are trying to accomplish it, all this can be done using javascript without any server side controls or even posting back. That is as I said depending on things like wheter you HAVE to post back or not.
I also thought that, but considering these are hyperlinks, you are generally going to want postbacks.
Yes I missed the part where these are hyperlinks pointing to other pages, my bad.
ASKER
Hi naspinski: When is the menu_click get fired. I do not see menu being declared any where in the code.
ASKER
Sorry i figure the menu_click event. Now when i click on any tab, i do not get the tab color changed for the first click but color changes when i click it again (ie second time)
ASKER
This is what i observed while debugging. one first click only Page_load is being executed. One the second click the page_load gets executed and then menu_click event is fired.
Any thoughts on this?
Any thoughts on this?
that seems really odd, I tested this exactly and if declare onclick="menu_Click" it should fire every time?
Try changing your menu_Click to:
Try changing your menu_Click to:
protected void menu_Click(object sender, EventArgs e)
{
Response.Write("menu_Click() FIRING<br />");
}
ASKER
You can see the output and functionality at
http://interviews.expertswatch.com/
I placed the menu_click method in the site.master.vb file. which is a master page.
http://interviews.expertswatch.com/
I placed the menu_click method in the site.master.vb file. which is a master page.
ASKER
The only difference in our code is that i converted to vb.
here is the script
Protected Sub menu_Click(ByVal sender As Object, ByVal e As EventArgs)
Response.Write("menu_Click () FIRING<br />")
Dim tabs As Panel() = {tab1, tab2, tab3, tab4, tab5}
'fill this with your tabs
Dim clickedLink As LinkButton = DirectCast(sender, LinkButton)
For Each p As Panel In tabs
p.CssClass = "t_tab"
Next
Dim clickedTab As Panel = DirectCast(Me.FindControl( clickedLin k.ID.Repla ce("lb_", String.Empty)), Panel)
clickedTab.CssClass = "t_tab_s"
End Sub
here is the script
Protected Sub menu_Click(ByVal sender As Object, ByVal e As EventArgs)
Response.Write("menu_Click
Dim tabs As Panel() = {tab1, tab2, tab3, tab4, tab5}
'fill this with your tabs
Dim clickedLink As LinkButton = DirectCast(sender, LinkButton)
For Each p As Panel In tabs
p.CssClass = "t_tab"
Next
Dim clickedTab As Panel = DirectCast(Me.FindControl(
clickedTab.CssClass = "t_tab_s"
End Sub
be at a machine with VS in about 2 hours
I think that posting back to ANOTHER page means that the events will NOT fire on the second page, that is why I am guessing Session should be used to save the state of the menu and figure out the highlighting of the menu.
That is not true, as I have tested this and it is working in c# perfectly
change your declaration to the following, you are not handling the clicks correctly in VB
Protected Sub menu_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lb_tab4.Click, lb_tab2.Click, lb_tab3.Click, lb_tab4.Click, lb_tab5.Click
ASKER
Hi, it does not work either.
Pl find enclosed the solutions file at
http://interviews.expertswatch.com/expertswatch.zip
Pl find enclosed the solutions file at
http://interviews.expertswatch.com/expertswatch.zip
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
also, with this, you can just revert all the linkbuttons back to <a href>'s
ASKER
You could also use Request.ServerVariables("S CRIPT_NAME ") to get the page currently loaded.
Panel <=> div
LinkButton <=> link
actually, a hyperlink is more like a link, but we need the link to post back info, so we will use a LInkButton. So now this:
<div id="tab1" runat="Server" class="t_tab_s"><a href="Default.aspx">Home</
<div id="tab2" runat="Server" class="t_tab"><a href="ArticlesView.aspx?Ca
<div id="tab3" runat="Server" class="t_tab"><a href="InterviewQuestionsVi
<div id="tab4" runat="Server" class="t_tab"><a href="Powerpacks.aspx">Pow
<div id="tab5" runat="Server" class="t_tab"><a href="Forums.aspx">Communi
will look like this:
Open in new window