Solved

Highlight menu option with javascript depending on currentpage

Posted on 2011-03-22
19
817 Views
Last Modified: 2012-05-11
I have the following menu, and there is a cssclass=active.
I want to put that cssclass automatically only in the option if the user is on the page of that option.

The menu is in a masterpage.

<div id="nav" class="withsubmenu">
      <ul>
        <li>
            <asp:HyperLink ID="home" NavigateUrl="~/Nederlands/Paginas/default.aspx" Text="Home" runat="server"></asp:HyperLink></li>
        <li>
              <asp:HyperLink  CssClass="active" ID="clubinfo" runat="server" Text="ClubInfo" NavigateUrl="~/Nederlands/paginas/verdelenleden.aspx"></asp:HyperLink>              
              <ul>
                      <li>
                        <asp:HyperLink CssClass="active" ID="voordelenleden" runat="server" Text="Voordelen Leden" NavigateUrl="~/Nederlands/paginas/voordelenleden.aspx"></asp:HyperLink> </li>
                  <li>
                        <asp:HyperLink ID="voordelenpartners" runat="server" Text="Voordelen Partners" NavigateUrl="~/Nederlands/paginas/voordelenpartners.aspx"></asp:HyperLink> </li>
              </ul>
        </li>
        <li>
            <asp:HyperLink ID="wraps" runat="server" Text="Wraps" NavigateUrl="~/Nederlands/paginas/wraps.aspx"></asp:HyperLink></li>
        <li>
            <asp:HyperLink ID="agenda" runat="server" Text="Agenda" NavigateUrl="~/Nederlands/paginas/agenda.aspx"></asp:HyperLink></li>
        <li>
              <asp:HyperLink ID="kenniscentrum" runat="server" Text="Kennis" NavigateUrl="~/Nederlands/paginas/Artikels.aspx"></asp:HyperLink>
              <ul>
                      <li>
                        <asp:HyperLink  ID="artikels" runat="server" Text="Artikels" NavigateUrl="~/Nederlands/paginas/Artikels.aspx"></asp:HyperLink> </li>
                  <li>
                        <asp:HyperLink  ID="blog" runat="server" Text="Blog" NavigateUrl="~/Nederlands/paginas/blog.aspx"></asp:HyperLink> </li>
                    <li>
                        <asp:HyperLink  ID="qanda" runat="server" Text="Q & A" NavigateUrl="~/Nederlands/paginas/questionsandanswers.aspx"></asp:HyperLink> </li>        
              </ul>
            </li>

        <li>
            <asp:HyperLink ID="contact" runat="server" Text="contact" NavigateUrl="~/Nederlands/paginas/contact.aspx"></asp:HyperLink></li>
     </ul>
    </div>
   </div>
0
Comment
Question by:Simbios
  • 9
  • 5
  • 3
  • +1
19 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Are you using jQuery already?
0
 
LVL 17

Expert Comment

by:shinuq
Comment Utility
pass the active page name as argument and based on that variable you can set the css to the menu.

mainpage.php?actpage=main

mainpage.php?actpage=secpage

now based on the actpage variable value the menu can be set to active.

Hope this helps

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
@shinuq that is not necessary. The name of the page is in the URL. The location object will have it. I'll show you when I get to a pc
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
window.onload=function() {
  var path = location.pathname.split("/");
  var pageName = path[path.length-1].split('.')[0]; // regular expression could be used too
  // pageName is now default or verdelenleden ... which happens to be the ID of the link
  var link = document.getElementById(pageName);
   if (link) link.className="active";
}

The above assume that NONE of the links have class="actiive" when loaded.

If they do, we will need to handle that so let me know
0
 

Expert Comment

by:LuisEstebanValencia
Comment Utility
this doesnt work, no errors but also not the desired functionality.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Then I need to see the rendered html. Anyway who are you?
0
 

Expert Comment

by:LuisEstebanValencia
Comment Utility
this is how asp.net renders the menu in the browser

I pasted this code from the wraps.aspx page and as you can see there is no css class applied to it.

 <div id="nav" class="withsubmenu">
      <ul>
        <li>
            <a id="ctl00_home" href="default.aspx">Home</a></li>
        <li>

              <a id="ctl00_clubinfo" href="verdelenleden.aspx">ClubInfo</a>              
              <ul>
                      <li>
                        <a id="ctl00_voordelenleden" href="voordelenleden.aspx">Voordelen Leden</a> </li>
                  <li>
                        <a id="ctl00_voordelenpartners" href="voordelenpartners.aspx">Voordelen Partners</a> </li>
              </ul>

        </li>
        <li>
            <a id="ctl00_wraps" href="wraps.aspx">Wraps</a></li>
        <li>
            <a id="ctl00_agenda" href="agenda.aspx">Agenda</a></li>
        <li>
              <a id="ctl00_kenniscentrum" href="Artikels.aspx">Kennis</a>

              <ul>
                      <li>
                        <a id="ctl00_artikels" href="Artikels.aspx">Artikels</a> </li>
                  <li>
                        <a id="ctl00_blog" href="blog.aspx">Blog</a> </li>
                    <li>
                        <a id="ctl00_qanda" href="questionsandanswers.aspx">Q & A</a> </li>        
              </ul>

            </li>

        <li>
            <a id="ctl00_contact" href="contact.aspx">contact</a></li>
     </ul>
    </div>
   </div>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Please note that asp adds something to the ID

If it is always ctl00, then change
  var link = document.getElementById(pageName);
to
  var link = document.getElementById("ctl00_"+pageName);
0
 

Expert Comment

by:LuisEstebanValencia
Comment Utility
It didnt work either.

Thanks
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Simbios
Comment Utility
Sorry, I didnt realize I was using the enterprise account for asking and my personal account for comments!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
This works for me when I save the file as, for example, blog.html - or in your case blog.aspx


<style>
.active { background-color:yellow}
</style>

<script>
window.onload=function() {
  var path = location.pathname.split("/");
  var pageName = path[path.length-1].split('.')[0]; // regular expression could be used too
  // pageName is now default or verdelenleden ... which happens to be the ID of the link
  var link = document.getElementById("ctl00_"+pageName);
   if (link) link.className="active";
}
</script>
 <div id="nav" class="withsubmenu">
      <ul>
        <li>
            <a id="ctl00_home" href="default.aspx">Home</a></li>
        <li>

              <a id="ctl00_clubinfo" href="verdelenleden.aspx">ClubInfo</a>              
              <ul>
                      <li>
                        <a id="ctl00_voordelenleden" href="voordelenleden.aspx">Voordelen Leden</a> </li>
                  <li>
                        <a id="ctl00_voordelenpartners" href="voordelenpartners.aspx">Voordelen Partners</a> </li>
              </ul>

        </li>
        <li>
            <a id="ctl00_wraps" href="wraps.aspx">Wraps</a></li>
        <li>
            <a id="ctl00_agenda" href="agenda.aspx">Agenda</a></li>
        <li>
              <a id="ctl00_kenniscentrum" href="Artikels.aspx">Kennis</a>

              <ul>
                      <li>
                        <a id="ctl00_artikels" href="Artikels.aspx">Artikels</a> </li>
                  <li>
                        <a id="ctl00_blog" href="blog.aspx">Blog</a> </li>
                    <li>
                        <a id="ctl00_qanda" href="questionsandanswers.aspx">Q & A</a> </li>        
              </ul>

            </li>

        <li>
            <a id="ctl00_contact" href="contact.aspx">contact</a></li>
     </ul>
    </div>
   </div>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
However my script will not work here
kenniscentrum" href="Artikels.aspx">
0
 

Author Comment

by:Simbios
Comment Utility
I used firebug to debug and the function is never step into it.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Try saving my code as blog.html to see it work. Perhaps you need to do something asp specific like register startup script or whatever. If you have a URL I can take a look. It is possible that your aspx loads another script that uses the onload event and overwrites mine. Then copy my code to that event handler unless you want to use
 attachevent

 
0
 

Author Comment

by:Simbios
Comment Utility
it works if I do that but I need it to put it to work on my scenario, any idea?
0
 

Author Comment

by:Simbios
Comment Utility
but I noticed the masterpage has the following on the body onload


<body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">


I dont know if maybe this has something to do with the problem
0
 

Author Comment

by:Simbios
Comment Utility
Hey, I partially solved it, sharepoint uses that javascript function, however we can push functions to be loaded with the following code.


_spBodyOnLoadFunctionNames.push("LoadMenu");
      
      function LoadMenu() {
              var path = location.pathname.split("/");
              var pageName = path[path.length-1].split('.')[0]; // regular expression could be used too
              // pageName is now default or verdelenleden ... which happens to be the ID of the link
            var link = document.getElementById("ctl00_"+pageName);
            if (link) link.className="active";
      }


However, its not working fully for

1, Home
2. KennisCentrum

On the items that have a submenu available, it should show it
0
 
LVL 17

Expert Comment

by:shinuq
Comment Utility
Its becasuse you have  ID="home" while the URL as Paginas/default.aspx"

same for the  ID="kenniscentrum"  and URL as /Artikels.aspx" [This one seems typo]

     <asp:HyperLink ID="home" NavigateUrl="~/Nederlands/Paginas/default.aspx" Text="Home" runat="server"></asp:HyperLink></li>


<asp:HyperLink ID="kenniscentrum" runat="server" Text="Kennis" NavigateUrl="~/Nederlands/paginas/Artikels.aspx"></asp:HyperLink>

To make it working you have to set the ID same as whats the pagename like
id="default" for default.aspx
id="kenniscentrum" for Artikels.aspx"

Hope this helps
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Here are two methods using ASP instead of javascript. That is really better in your case

http://stackoverflow.com/questions/1471362/how-to-visually-indicate-current-page-in-asp-net-mvc
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now