Difficult Javascript problem

[richardhoman]

Hello

I'm working on a website for a friend. The website can be found here: http://sidway.zonlicht.eu/ . Please take a closer look at the menu. When you hover your mouse over the options, a bar will float to that option. This bar will return to the 'contact' option in the menu when you stop hovering.

The problem here is as follows: The bar should return to the menu option which is linked to the page you are currently looking at. I.E.: When you click 'Media', you go to the corresponding page. And now the moving bar under the menu should go to 'Media' in the menu instead of 'Contact'. But it doesn't!

This is because the Javascript controlling the bar (which is called LavaLamp), cannot link the current page to a menu option. The script then falls back to the first menu option it finds, which is 'Contact'.

The reason is that i set up the site, aswell as the server to use ‘friendly’ urls, which means that for example:

http://sidway.zonlicht.eu/en/media is changed on the serverside to http://sidway.zonlicht.eu/en/index.php?p=media . This means that when you go to the first url, the server (as well and the php code in the php file) will think you opened the second url.
So i changed the menu href=”” options from “index.php?p=EXAMPLE” to “../EXAMPLE”. This way you end up on the same page, but with a user friendly url. The problem is that the Javascript controlling the bar, can now no longer link a page (which is now “/en/media”) to the menu item, which hrefs to “../media”. This is the reason it falls back to Contact, which is the first menu option you’ll find in the html code.
Can you help me alter the JavaScript code, so that the bar in the menu works, even with the userfriendly URL’s?
This is the Javascript: http://sidway.zonlicht.eu/scripts/lavalamp.js
The part of the code where the problem lies is between lines 288 and 309 <<--- I THINK !!.
The php file which uses the javascript is here: http://sidway.zonlicht.eu/en/index.php , the way to open this file in your browser is: http://sidway.zonlicht.eu/en/home .

Can you please help my to solve this problem? It has been bothering me for days and I simple can;t figure out a solution by myself. PLEASE help!

Kind Regards,
Richard Homan

[venegal]

This isn't a Javascript problem at all. All you have to do is, on the server side, give the currently active <li> the CSS class "selectedLava". You shouldn't have any problems doing this, either, because you're already giving the currently active <li> the class "current_page_item", so just add "selectedLava" to that.

[richardhoman]

I already tried this, doesn't work...

Edit: implemented it in the site anyway, to show it really does not work.. http://sidway.zonlicht.eu/en/home/

Since this does not work, I thought the best way to solve this would be to edit the javascript code which selects the menu option. One possibility might be to look at the location the client browser is at, and taking the last part of the url, which would be home/media/contact/whatever, and look for this keyword in the hrefs in the menu..

That might work, right? I am just not familiar enough with JS to make such a code..

[venegal]

You can't give a HTML tag two "class" attributes. If you want to give it two CSS classes, you have to put them into the same "class" attribute, separated by a space.

[richardhoman]

-.-' I feel like the biggest dumbsh*t in the world rightnow..

Thank you very much for your help in solving this problem!