Trouble with jquery lavalamp

Question

For some reason my background color shoots back to the leftmost link no matter what link I click on. Anyone know how to get it to stay on the clicked link?

css

Answer 1

if you are using this extension....

try setting 'autoreturn' to true.

otherwise there is likely an option to set which link the background returns to. In which case you will have to set it onClick().

Try reading the documentation.

Also, posting more info about the extension you'r using would be beneficial. This isn't a CSS problem.

Answer 2

You need to add the class current to the current li on the sub pages. The lavalamp plugin runs this bit of code:

curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

Which selects the li with a class of current or the first item. You can add this class on the server prior to sending to the client, no need to do it in javascript.

Update

This is what the HTML would look like for the navigation, when your browser is at the '/menu/' page. Notice how the li with the link to Menu has the class="current":

<ul class="lavaLamp">
    <li><a href="http://wildfire-restaurant.com/">Home</a></li>
    <li class="current"><a href="http://wildfire-restaurant.com/menu/">Menu</a></li>
    <li><a href="http://wildfire-restaurant.com/events/">Events</a></li>
    <li><a href="http://wildfire-restaurant.com/friends/">Friends</a></li>
    <li><a href="http://wildfire-restaurant.com/contact/">Contact</a></li>
    <li><div class="left"></div></li>
</ul>

On the EVENTS page, the li with the link to Events would have the class:

<li class="current"><a href="http://wildfire-restaurant.com/events/">Events</a></li>

etc.