jQuery LavaLamp: How to move/set the lavalamp highlight on required LI using hyperlinks outside the lavaLamp

Question

Now this question has been asked before but I am not able to get the answer. I have a Lavalamp with 4 LI inside it, clicking on each of them loads some content in a div.

It works all fine. Now I have a hyperlink somewhere on the same page outside of that lavalamp. I want that, when I click on that link, the lavalamp highlight should move to a particular li and remain there.

To make myself clear, I have a Lavalamp LI that goes like this: Home, Work, About, Contact. And I also have a 'contact' link somewhere on the page. When I click 'contact' link, the lavaLamp should move the highlight from wherever it is to the 4th option 'Contact'.

Answer 1

If you are using this lavalamp plugin, you'll need to use trigger() to activate the mouseenter and click events... here is a demo.

HTML

<ul id="menu">
 <li><a href="#home">Home</a></li>
 <li><a href="#work">Work</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#contact">Contact</a></li>
</ul>
<br>
<a class="contact" href="#contact">contact me!</a>

Script

$(document).ready(function(){
 $('ul#menu').lavaLamp();
 $('.contact').click(function(){
  $('#menu a[href*=contact]').parent().trigger('mouseenter').trigger('click');
  return false; // added to prevent propogation
 });
});

---

LOL, ok, since you are using the other lavalamp plugin... here is the code you can use. Also, since the lavaplamp plugin provides a click function, I have made the javascript unobtrusive by adding the function there (new demo).

HTML

<ul class="lavalamp">
 <li class="current"><a href="#home">Home</a></li>
 <li><a href="#work">Work</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#contact">Contact</a></li>
</ul>

<br><br><br>

<div id="home" class="info">
 Home page stuff goes here.
</div>
<div id="work" class="info">
 Work information goes here.
</div>
<div id="about" class="info">
 About me.
</div>
<div id="contact" class="info">
 Contact me.
</div>

<br><br><br>

<div class="links">
 You can see my <a href="#work">work</a> or <a href="#contact">contact me.</a>
</div>

Script

$(function() {
 // set up lavalamp
 $(".lavalamp").lavaLamp({
  fx: "backout",
  speed: 700,
  click: function(event, menuItem) {
   // change information box
   var $block = $( $(menuItem).find('a').attr('href') );
   $('.info').not($block).hide();
   $block.fadeIn();
   return false;
  }
 });

 // initialize information box
 $('.current').trigger('click');

 // make links outside of the lavalamp work
 $('.links a').click(function(){
  var block = $(this).attr('href');
  $('.current').removeClass('current');
  $('.lavalamp').find('a[href=' + block + ']').parent().trigger('click');
 });

});

Answer 2

Ok some more details. Here's the lavalamp and a hyperlink outside it.

<ul class="lavaLamp">
    <li><a href="javascript:content(1)">Home</a></li>
    <li><a href="javascript:content(2)">Work</a></li>
    <li><a href="javascript:content(3)">About</a></li>
    <li><a href="javascript:content(4)">Contact</a></li>    
</ul>

---
<div class="info">
// Corresponding information will be loaded here based on javascript:content(num)
<div>
---

<div>
    You can see my <a href="javascript:content(2)">work</a> or <a href="javascript:content(4)">contact me.</a>
</div>

Now the content is loaded well and fine. But when I click the 'work' or the 'contact me' link, I also want the highlighter in the lavaLamp to move to the corresponding LI's. i.e. 'Work' and 'Contact' respectively.

I am using the LavaLamp version found here: http://gmarwaha.com/blog/?p=7