Solved

unable to change menu style

Posted on 2014-03-23
8
199 Views
Last Modified: 2014-03-24
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
Comment
Question by:RTKHOT
8 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 39949630
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
 

Author Comment

by:RTKHOT
ID: 39949677
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 39949700
In order for me to give you more details about what to do I have to get more details about your code!
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:RTKHOT
ID: 39949910
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 39949914
This function how does it look like:
$("#hdrCommon").load("controls/header.htm");
Did you write the code or was it prewritten?
0
 

Author Comment

by:RTKHOT
ID: 39949976
i havent written this function. i guess it is part of the jquery files
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39950227
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
 
LVL 58

Accepted Solution

by:
Gary earned 200 total points
ID: 39950527
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 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