Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 207
  • Last Modified:

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.
0
RTKHOT
Asked:
RTKHOT
1 Solution
 
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
 
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
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!

 
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
 
GaryCommented:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now