Solved

Highlight menu option with javascript depending on currentpage

Posted on 2011-03-22
19
854 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
ID: 35196093
Are you using jQuery already?
0
 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 35196134
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
ID: 35196271
@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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 35196407
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
ID: 35197472
this doesnt work, no errors but also not the desired functionality.

0
 
LVL 75

Expert Comment

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

Expert Comment

by:LuisEstebanValencia
ID: 35197686
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
ID: 35197817
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
ID: 35197881
It didnt work either.

Thanks
0
 

Author Comment

by:Simbios
ID: 35197895
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
ID: 35198048
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
ID: 35198066
However my script will not work here
kenniscentrum" href="Artikels.aspx">
0
 

Author Comment

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

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35199904
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
ID: 35203306
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
ID: 35203309
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
ID: 35203353
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:Shinesh Premrajan
ID: 35204504
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
ID: 35204778
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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
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…

830 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