R – Can sIFR and LavaLamp work together

lavalampsifr

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

Best Answer

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