By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,389 Members | 1,989 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,389 IT Pros & Developers. It's quick & easy.

Applying a style to an onClick event

P: 3
I have a horizontal navigation. When you click a navigation link that has a child menu, this menu pops out to the side and the parent link gets a background-color applied to it. If the navigation link does not have a child menu, you are taken right to the page, but the active link should still get a background-color applied to it.

However, what is happening is, when I click on a childless link, a parent link above it gets the background applied to it instead of the link that was actually clicked. This happens in both IE and FF.

The navigation functions and the onClick functions correctly. However, the style is being applied in the wrong place.

Here's the javascript:
Expand|Select|Wrap|Line Numbers
  1. function secondarymenuToggle(name,id) {
  2.     var eArray = document.getElementsByTagName('DIV');
  3.     var ele = document.getElementById(id);
  4.  
  5.     for (i = 0; i < eArray.length; i++)
  6.     {
  7.         if (eArray[i].getAttribute('name') == name)
  8.             eArray[i].className="SecondaryMenu";        
  9.     }
  10.  
  11.     if (ele != undefined)
  12.         ele.className="SecondaryMenuActive";    
  13.  
  14. }
  15.  
Here's the php where it is being put into the page:

[PHP]
$link_before = "<a href=\"".$location_var.$option_link."&cbc=1&uspid= ".$option_id."\" CLASS=\"SecondaryMenu\">";
$link_after = "</a>";
$onclick = "onclick=\"displayMenu('".$option_id."', '".$divString."');\"";
$onclick_toggle = "onclick=\"secondarymenuToggle('levelone','levelon e".$levelone_counter."');secondarymenuToggle('leve ltwo','')\"";

echo "<tr $onclick>\n";
echo "<td><div class=\"SecondaryMenu\" $onclick_toggle name=\"levelone\" id=\"levelone".$levelone_counter."\">";
echo "<div class=\"SecondaryMenu\" >".$link_before.$image_var.$link_after.$link_befor e.$option_display_value.$link_after."</div>";
[/PHP]

It seems that maybe the loop is getting mixed up somewhere? I've troubleshot this quite a bit and am not really sure what is happening. If you would like me to better explain the problem, let me know. Unfortunately it is not publicly accessible.
Nov 18 '08 #1
Share this Question
Share on Google+
6 Replies


acoder
Expert Mod 15k+
P: 16,027
Can you post the client-side HTML code as rendered in the browser. It makes it easier to debug.
Nov 19 '08 #2

Dormilich
Expert Mod 5K+
P: 8,639
maybe I can persuade you to use a CSS driven menu....? (I didn't understand your navigation system)

regards

PS: maybe just the topic you want: "Keeping navigation current with PHP"
Nov 19 '08 #3

P: 3
Can you post the client-side HTML code as rendered in the browser. It makes it easier to debug.
Sure and I was able to troubleshoot down to what the actual problem is. Here's the output:

Expand|Select|Wrap|Line Numbers
  1. <tr>
  2. <td>
  3. <div class="SecondaryMenuActive" 
  4. onclick="secondarymenuToggle('levelone','levelone5');
  5. secondarymenuToggle('leveltwo','')" name="levelone" id="levelone5">
  6. <div class="SecondaryMenu">Reports</div></td>
  7. </tr>
  8.  
  9. <tr>
  10. <td>
  11. <div class="SecondaryMenu" 
  12. onclick="secondarymenuToggle('levelone','levelone5');
  13. secondarymenuToggle('leveltwo','')" name="levelone" id="levelone6">
  14. <div class="SecondaryMenu">
  15. <a href="../charge" class="SecondaryMenu">Calls</a>
  16. </div></td>
  17. </tr>
  18.  
The first link works properly and has a second menu that pops out. The second link is not working properly and is just a link.

As you can see, they both say "levelone5", which is wrong. The second one should say "levelone6". The numbers are correct up until this link. The "levelone5" is coming from a variable on the ID that simply adds one each time in the loop ($counter++).

I'm still not really sure why it gets stuck at this point.
Nov 19 '08 #4

acoder
Expert Mod 15k+
P: 16,027
I may have to move this to the PHP forum since it looks like the problem is in your PHP code.

Can you post the rest of the relevant PHP code, e.g. the loop, the counter, etc.
Nov 20 '08 #5

P: 3
Can you post the rest of the relevant PHP code, e.g. the loop, the counter, etc.
I thought I did post the loop in the for statement of my javascript, no?
Expand|Select|Wrap|Line Numbers
  1. function secondarymenuToggle(name,id) {
  2.            var eArray = document.getElementsByTagName('DIV');
  3.            var ele = document.getElementById(id);
  4.  
  5.           for (i = 0; i < eArray.length; i++)
  6.            {
  7.               if (eArray[i].getAttribute('name') == name)
  8.                   eArray[i].className="SecondaryMenu";        
  9.           }
  10.  
  11.           if (ele != undefined)
  12.              ele.className="SecondaryMenuActive";    
  13.       }
  14.  
PHP-wise, the only counter-related things I have are:
Expand|Select|Wrap|Line Numbers
  1. $levelone_counter = 1;
  2. $levelone_counter++;
  3.  
Nov 20 '08 #6

acoder
Expert Mod 15k+
P: 16,027
I meant the loop in the PHP code.
Nov 20 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.