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

#lamp {
float:left;
margin:25px 0px 0px 90px;
clear: both;
}

.lavaLamp {
position: relative;
height: 29px; width: 400px;
background: #000000 no-repeat top;
background-image:url('http://wildfire-restaurant.com/images/lampback.png');
padding: 15px; margin: 10px 0;
overflow: hidden;
float:left;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background:  no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: #BD5108 no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

jquery

<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

site http://wildfire-restaurant.com/

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/"&gt;Home&lt;/a&gt;&lt;/li&gt;
    <li class="current"><a href="http://wildfire-restaurant.com/menu/"&gt;Menu&lt;/a&gt;&lt;/li&gt;
    <li><a href="http://wildfire-restaurant.com/events/"&gt;Events&lt;/a&gt;&lt;/li&gt;
    <li><a href="http://wildfire-restaurant.com/friends/"&gt;Friends&lt;/a&gt;&lt;/li&gt;
    <li><a href="http://wildfire-restaurant.com/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    <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/"&gt;Events&lt;/a&gt;&lt;/li&gt;

etc.