Can sIFR and LavaLamp work together?

Question

I am having a heck of a time getting sIFR and LavaLamp to play nice together.

A brief history of LavaLamp:

LavaLamp: a jQuery plugin

started up by

1. load the LavaLamp and jQuery supporting JS files add the LavaLamp css
2. create an unsorted list and add the class "lavaLamp" to it
3. add list memebers that contain anchor tags to the urls

Example CSS

.lavaLamp {
        position: absolute;
        height: 29px;
        padding: 15px;
        margin: 24px 0 0 0;
        }



.lavaLamp li {

        float: left;
        list-style: none;
        }



.lavaLamp li.back {

        background: url(../images/lava.png) no-repeat right -30px
        width: 9px;
        height: 30px;
        z-index: 8;
        position: absolute;
        }



.lavaLamp li.back .left {

        background: url(../images/lava.png) no-repeat top left
        height: 30px;
        margin-right: 9px;
        }



.lavaLamp li a {

        font-size: 20px;
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: #000000;
        outline: none;
        text-align: center;
        height: 30px;
        top: 4px;
        z-index: 10;
        letter-spacing: 0;
        float: left;
        display: block;
        padding:0px 10px;
        }

Example HTML:

<div id="menu">
   <ul class="lavaLamp">
      <li><a href="somewhere.html">Some Where</a></li>
      <li><a href="somewhereelse.html">Some Where Else</a></li>
   </ul>
</div>

The initial attempts to get sIFR to initialize the menu was to set the selector to "selector: '#menu'. This did not work at all. Slowly I started moving further and further into the nest of the div.

Finally, when I did: selector: '.lavaLamp li a', the LavaLamp initialized correctly and started to display the fonts and roll overs correctly.

The issues:

1. The anchor tags do not work when clicking directly on the text that should be active. However, if you click on the far left or right of the image LavaLamp uses as the rollover, it will click the anchor.
2. When you roll over other items in the menu, some times when you mouse off, the last rolled over stays highlighted, rather than returning to the currently active menu item.

Thanks in advance for any help...

-A

Answer 1

Replace the <li> rather than the <a>, this lets sIFR handle clicks and hover effects inside the Flash movie.