Solved

unable to change menu style

Posted on 2014-03-23
8
200 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
[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
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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

739 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