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
- load the LavaLamp and jQuery
supporting JS files add the LavaLamp
css - create an unsorted list and add the
class "lavaLamp" to it - 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:
- 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. - 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.