several jquery lavalamp menus on one page

Question

I am using several of those jquery lavalamp menus http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=16

on one single page that uses vertical eased scrolling. So everytime i scroll to my next anchor there is a new lavalamp menu with another initial status of a "li" with the class "current".

for example, first div-box #content1 contains this:

    <ul class="lava">
    <li class="current"><a href="#content1">Apples</a></li>
    <li><a href="#content2">Pears</a></li>
    <li><a href="#content3">Oranges</a></li>        
    </ul>

And in the div #content 2 on the same page I would have

    <ul class="lava">
    <li><a href="#content1">Apples</a></li>
    <li class="current"><a href="#content2">Pears</a></li>
    <li><a href="#content3">Oranges</a></li>        
    </ul>

This method works fine once I click link by link in chronological order. But when I click back and forth it messes up the hover status of the lava lamp menu that is initially set by the "li" class "current".

For example: clicking the link #content2 on menu one works and the hover status of the target menu two is fine, but when on that second menu I click back to #content1 the hover background of my lavalamp menu one is on the second link instead of the first - although the other css styles (such as bold text) are still on the right link that is set to "current". It's just the piece of "lava" that floats to the wrong place.

I hope what I try to explain is understandable. Does anyone know how to avoid this conflict with several menus on one page?

Thank you!

score 0 · Answer 1 · answered Jul 03 '11 at 17:36

<ul class="lava">
 <li class="current"><a href="#content1">Apples</a></li>
 <li><a href="#content2">Pears</a></li>
 <li><a href="#content3">Oranges</a></li>        
</ul>

And in the div #content 2 on the same page I would have

<ul class="lava2">
<li><a href="#content1">Apples</a></li>
<li class="current"><a href="#content2">Pears</a></li>
<li><a href="#content3">Oranges</a></li>        
</ul>

and somewhere, write something like

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

SEPARATALLY

Thank you for the quick answer! Unfortunately it doesn't work because even if there are different names of the menues each menue saves the last click status until I click something else. I would want the active link to swing back to its original status once it is clicked - because the visible part of the page slides away anyway to the other menu. Is it possible to not save the click status? — scissorsrockspock, Jul 03 '11 at 17:42

score 0 · Answer 2 · edited Jul 06 '11 at 10:15

I found out the trick myself:

$j(function(){
    $j('.lava').lavaLamp({
        fx: 'easeOutBack',
        speed: 800,
        returnDelay: 500,
        returnHome: true,
        autoReturn: false,
        setOnClick: false
    });
});

is what i used but then instead of class "current" which didn't properly work I used "selectedLava" as suggested in these examples

http://nixboxdesigns.com/projects/jquery-lavalamp/#options

several jquery lavalamp menus on one page

2 Answers2