Solved

unable to change menu style

Posted on 2014-03-23
8
195 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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now