unable to change menu style

i have an HTML 5 website with JQuery.

I move the header and menu from each page into a common HTML file and loaded it via jquery in the document.ready funtion:

$("#hdrCommon").load("controls/header.htm");

Now, on each page, i am writing a javascript function to highlight various menu items depending on which page I am on. Example, when I am on the about us page, then the about us link on the menu should be highlighted... etc.

how do i do this? the individual id's of the menu are not accessible from the pages of my website.
RTKHOTAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Fire your code to add the class in the callback of the .load function - i.e. add the class when the menu has actually finished loading

$("#hdrCommon").load("controls/header.htm",function(){
    $('#mnuForClients').addClass('current');
});

Open in new window

0
 
aboo_sCommented:
Well it seems you have to rebuild your DOM object for the added field ids to be recognised.
You can read about and use InserAdjacentHTML in javascript.
0
 
RTKHOTAuthor Commented:
none of the menu item objects are available from the individual pages. it give Null for each menu item when accessed from individual pages.

Please give further details/clarifications on what exactly i need to do?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
aboo_sCommented:
In order for me to give you more details about what to do I have to get more details about your code!
0
 
RTKHOTAuthor Commented:
I have a header.htm file that contains:

 <li id="mnuAboutUs">
<a href="aboutus.html"> about us </a>
</li>

<li id="mnuForClients">
<a href="forclients.html"> for clients </a>
</li>

In the document.ready function of Home.html, i added this:

$("#hdrCommon").load("controls/header.htm");

at the bottom of home.html, i added a javascript code to assign a class to the mnuForClients as:

document.getElementbyId("mnuForClients").class = 'current';

the 'current' class is supposed to highlight the menu item.
0
 
aboo_sCommented:
This function how does it look like:
$("#hdrCommon").load("controls/header.htm");
Did you write the code or was it prewritten?
0
 
RTKHOTAuthor Commented:
i havent written this function. i guess it is part of the jquery files
0
 
Chris StanyonCommented:
You also need to wrap the highlighting code into a document.ready block. Then the IDs will be available. Also you might as well use jQuery instead of raw javascript:

$(document).ready(function() {
   $('#mnuForClients').addClass('current');
})

Open in new window

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.