JQuery lavalamp: Selecting focus/highlighting item within lavalamp when hyperlinks outside lavalamp bar are pressed

Question

Hi I'm hoping someone can help me out with a jQuery lavalamp problem.

I have the following - a menu bar using lavalamp. - a div where content is loaded into when link on menu bar is clicked - in my content div I have some links that link to the same pages as in the menu bar

The menu bar itself, looks and works great. However I wan't to be able to focus on / highlight the corresponding menu item "Menu Option" when a user clicks on one of the links within my content div.

EG

<div><ul class="lavalamp">
  <li><a href="Item 1.html">item 1</a></li>
  <li><a href="Item 2.html">item 2</a></li>
  <li><a href="Item 3.html">item 3</a></li>
 </div>

<div id="dynamic-content">
   <a href="Item3.html">Item 3.html</a>
</div>

When the user clicks on item 3 within the dynamic content div the selection on the lavalamp should change.

Does anyone have any experience with this?

Thanks

Answer 1

To change the selection on the lavalamp, redefine the lavalamp using the lavaLamp() function passing a startItem parameter:

$('#myLavalamp').lavaLamp({startItem: 4});

Note that numbering starts at 0 for elements. Also, you will have to include all of your other options that you used to initialize the lavalamp originally.

Answer 2

I don't know which jQuery lavaLamp you are using. If you are using this one, use SimpleCoder's answer. If you are using this one, try this:

    $(function() {
        var loc = window.location.href;
        var filename = loc.substring(loc.lastIndexOf('/')+1, loc.length);

         $('.lavalamp a, #dynamic-content a').each(function(){
            if ($(this).attr('href') == filename){
               $(this).parent().addClass('current');
            }
         });

        $(".lavalamp").lavaLamp({
            fx: "backout",
            speed: 700
         })
    });

Answer 3

Hey fudgey, can you please elaborate your answer?