Jump to content

Menu Problems Again - Failure To Copy [grand]children?


chibineku
 Share

Recommended Posts

I am having a strange new problem. I use a javascript function to change the id of a top level menu (list) item to 'cur', depending on the page name matching a top-level menu item or a PHP set variable - that's neither here nor there. In order to change the id, I have to create a new node with the appropriate id, because changing ids dynamically doesn't work, and duplicate the children (i.e. the lower level menu (ul) items). However, this approach doesn't seem to properly copy the lower level menu items. Here is the original code for one of the list items:

		 <li id="products" class="sub ">			 Products			 <ul>				 <li class="">					 <a href="/products/psoriasis">Psoriasis</a>				 </li>				 <li class="">					 <a href="/products/excema">Excema</a>				 </li>				 <li class="">					 <a href="/products/anti-bacterial">Anti-Bacterial</a>				 </li>				 <li class="">					  <a href="/products/bespoke">Bespoke Products</a>				 </li>			 </ul>		 </li>

When the current page matches a top level list item, or the php variable is set, this function does the new node creation and old node duplication:

var CurRaw;var Cur;Cur = "<?php $curPage = substr($_SERVER["PHP_SELF"],1);$curPage = explode(".",$curPage);echo($tree?$tree:$curPage[0]); ?>";if(document.getElementById(Cur)) {var oldNode = document.getElementById(Cur);var newNode = document.createElement("li");newNode.id = "cur";newNode.className = "sub unclick";var innards = oldNode.children;while(innards.length > 0) {newNode.appendChild(innards[0]);}var innardsContent = oldNode.innerHTML;newNode.innerHTML = innardsContent;oldNode.parentNode.replaceChild(newNode, oldNode);}

The source code, when there is a match, on safari shows the menu as it should look, but on FF only shows:

 <li id="cur" class="sub unclick">			 Products			 		 </li>

So, it seems that the sub menu is not being duplicated, and even on safari where it seems like the sub menu is there, the top level menu item does not display it when clicked. To see it in action: http://sinaesthesia.co.uk/products/psoriasisI wonder about forgetting the complex JS function and instead simply appending a classname that will attract the same styling as the id 'cur', but I seem to recall trying that in the past and it not working right...probably because the JS that works the menu does a lot of changing of classes...

Link to comment
Share on other sites

That looks ideal - I'll play around with that. Thanks!

Link to comment
Share on other sites

Easiest. Fix. Ever. Thank you so much - that more than halved the length of that function and made it work better.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...