Highlight menu option with javascript depending on currentpage

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>
SimbiosAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
Are you using jQuery already?
0
 
Shinesh PremrajanEngineering ManagerCommented:
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
@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
 
LuisEstebanValenciaCommented:
this doesnt work, no errors but also not the desired functionality.

0
 
Michel PlungjanIT ExpertCommented:
Then I need to see the rendered html. Anyway who are you?
0
 
LuisEstebanValenciaCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
LuisEstebanValenciaCommented:
It didnt work either.

Thanks
0
 
SimbiosAuthor Commented:
Sorry, I didnt realize I was using the enterprise account for asking and my personal account for comments!
0
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
However my script will not work here
kenniscentrum" href="Artikels.aspx">
0
 
SimbiosAuthor Commented:
I used firebug to debug and the function is never step into it.

0
 
Michel PlungjanIT ExpertCommented:
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
 
SimbiosAuthor Commented:
it works if I do that but I need it to put it to work on my scenario, any idea?
0
 
SimbiosAuthor Commented:
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
 
SimbiosAuthor Commented:
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
 
Shinesh PremrajanEngineering ManagerCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.