Solved

Highlight menu option with javascript depending on currentpage

Posted on 2011-03-22
19
880 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Note:  There are two main ways to deploy InfoPath forms:  Server-side and directly through the SharePoint site.  Deploying a server-side InfoPath form means the form is approved by the Administrator, thus allowing greater functionality in the form. …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
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…
Suggested Courses

617 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