parsing lavalamp class with jquery
Hi,
I am trying to replace a div with:
$("a[name='3']").click(function(){
$("#middlediv")
.fadeOut(400, function() { $(this).html("<H1>Services</H1>"); })
.delay(400)
.fadeIn(400);
});
which works great when I don't have any classes to apply. How do I need to code so that my classes are applied i.e.: <ul class='lavalampbottomstyle'> Although the list of links is displayed, the background of the active link is not.
Keep in mind this is a lavalamp menu, I am calling the function() in the beginning of the header of the page which works great as a stand alone.
Thanks for any help or insight,
RJ
Please see below how I am doing this right now:
$("a[name='2']").click(function(){
$("#middlediv" )
.fadeOut(400, function()
{ $(this).html("<ul class='lavalampbottomstyle'><li class='current'><a href='#'>Venue 1</a></li><li><a href='#'>Venue 2</a></li><li><a href='#'>Venue 3</a></li><li><a href='#'>Venue 4</a></li></ul><div id='venue'><img name='tentevent' style='float: left; margin-left: 15px; margin-top: 10px; margin-bottom: 10px;' src='images/tentevent.jpg' width='340' height='216' alt='Party Tent'></div>"); })
.delay(400)
.fadeIn(400);
});
here is the css that goes with it:
/*****************Lava lamp bottom line *******/
.lavalampbottomstyle {
position: relative;
height: 25px;
width: 375px;
padding: 0px 30px 5px 30px;
margin: 0px auto; 0; auto;
overflow: hidden;
border: none;
}
.lavalampbottomstyle li {
float: left;
list-style: none;
}
.lavalampbottomstyle li.back {
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color:#cccccc;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
background-color: #D6D2B7; /*this is the part that is not applied*/
}
.lavalampbottomstyle li a {
text-decoration: none;
outline: none;
text-align: center;
top: 7px;
text-transform: lowercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavalampbottomstyle li a:hover, .lavalampbottomstyle li a:active, .lavalampbottomstyle li a:visited {
border: none;