css tab background color keeps changing back to default.

[vega]

I've been stuck trying to figure out why the background color of my tabs change back to a default green color.

Check out my site here (http://www.freshbasilcrew.com), it is a wordpress blog. I am talking about the 4 tab div on the right side column.

here is the html code for that section:

<div id="sidebar-tabs">
<h3 style="margin:10px 10px 5px 10px;">Songs We Posted Recently / HOT ****</h3>
<div id="mostPopWidget2">
<div id="tabsContainer">
<ul class="tabs">

<li class="selected mpw1"><a href="#">Electro/Dance</a></li>
<li class="mpw2"><a href="#">Hip-Hop</li>
<li class="mpw3"><a href="#">Soul/Funk/Disco</a></li>
<li class="mpw4"><a href="#">Pop/R&amp;B</a></li>

</ul>
</div>

<div class="tabContent tabContentActive" id="electro">
<ol>
<?php $posts = get_posts("numberposts=5&cat=27&orderby=post_date&order=DESC"); foreach($posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
</div>

<div class="tabContent" id="hiphop">
<ol>
<?php $posts = get_posts("numberposts=5&cat=28&orderby=post_date&order=DESC"); foreach($posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
</div>

<div class="tabContent" id="soulfunkdisco">
<ol>
<?php $posts = get_posts("numberposts=5&cat=29&orderby=post_date&order=DESC"); foreach($posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
</div>

<div class="tabContent" id="poprb">
<ol>
<?php $posts = get_posts("numberposts=5&cat=30&orderby=post_date&order=DESC"); foreach($posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
</div>

<script type="text/javascript">new Popular("mostPopWidget2");</script>

</div>
</div>


here is all the related css:

#sidebar-tabs ul.tabs {
display: block;
padding: 0;
margin-left: 10px;
white-space: nowrap;
text-transform: uppercase;
z-index: 5500;
/*\*/ vertical-align: middle;/*\*/
font-family: Arial, Helvetica, sans-serif;
}

#sidebar-tabs ul.tabs li {
margin: 0;
display: block;
float: left;
background-color: #ccff99;
border: 1px solid #ccc;
border-width: 1px 1px 1px 0;
white-space: nowrap;
padding: 4px 7px 3px 7px;
z-index: 6000;
background-image: none;
}

#sidebar-tabs ul.tabs li.selected {
background-color: #fff;
border-bottom: none;
z-index: 9998;
padding: 4px 7px 4px 7px;
}

#sidebar-tabs div.tabContent {
clear: both;
border-top:1px solid #ccc;
padding: 15px;
_padding: 15px 15px 15px 15px;
margin: 0;
display: none;
}

#sidebar-tabs div.tabContent.tabContentActive {
display: block;
}

#sidebar-tabs div.tabContent ol {
margin-top: 0;
margin-bottom: 5px;
}

#sidebar-tabs div.tabContent ol li {
_padding-left: 0;
padding-top: 2px;
padding-bottom: 2px;
}

#sidebar-tabs div.tabContent ul {
margin-top: 0;
margin-bottom: 5px;
}

#sidebar-tabs div.tabContent ul li {
_padding-left: 0;
padding-top: 2px;
padding-bottom: 2px;
}


/* Most Popular Module */

#tabsContainer, #mostPopWidget2 {
position: relative;
top: 1px;
_top: 0;
left: 0px;
_left: 0;
_height: 14px;
_padding-top: 6px;
display: block;
}
#mostPopWidget2 ul.tabs {
font-size: 10px;
_position: absolute;
top: 0; margin-left:5px;
}

#mostPopWidget2 ul.tabs li {
position: relative;
top: 0;
padding-left: 4px;
padding-right: 5px;
_padding-bottom: 2px;
}
/*different colors for different tabs*/
#mostPopWidget2 ul.tabs li.mpw1 {}
#mostPopWidget2 ul.tabs li.mpw2 {background-color:#7bb345;}
#mostPopWidget2 ul.tabs li.mpw3 {background-color:#f5aa38;}
#mostPopWidget2 ul.tabs li.mpw4 {background-color:#00aef0;}

#mostPopWidget2 ul.tabs li.selected {
_padding-bottom: 3px;
}

#mostPopWidget2 ul.tabs li:first-child {
border-left-width: 1px;
padding-left: 4px;
}

#mostPopWidget2 ul.tabs li a {
color: #333333;
}

#mostPopWidget2 ol li {
padding-left:2px;
margin-left:25px;
list-style-type: decimal;
line-height:115%;
}

#mostPopWidget2 ul li {
padding-left:2px;
margin-left:25px;
list-style-type:square;
line-height:115%;
}

#mostPopWidget2 img { display:none;}


any ideas on whats going wrong? any help would be greatly appreciated. thanks.

[Rowsdower!]

If you're talking about "Most Popular" then those tabs are getting their color from #sidebar-tabs ul.tabs li in the CSS which makes sense because they are part of a "tabs" <ul> inside of the "sidebar-tabs" <div>.

What color were you going for here? What have you tried to do to change the color of these tabs?

Nevermind, I'm looking at the wrong tabs...

[Rowsdower!]

OK, now that I have my head on straight here is your problem:

The javascript you are using is setting the class of the clicked tab to "selected" and wiping out the class on all other tabs in that section. You need to update your javascript so that it only changes the classes for the tab being clicked and the tab that was formerly selected. The script will have to remember what class the currently active tab is in order to put it back before changing the newly selected tab to be class of "selected."

I hope that makes sense.

[vega]

thanks for the quick response.

I have 2 different sets of css tab divs. I'm trying to work on the top one before i fix the bottom one.

you can see when you first load the page, the tabs are different colors. But as soon as you select one, all the tabs turn to the default green which was set here:

#sidebar-tabs ul.tabs li {
margin: 0;
display: block;
float: left;
background-color: #ccff99;
border: 1px solid #ccc;
border-width: 1px 1px 1px 0;
white-space: nowrap;
padding: 4px 7px 3px 7px;
z-index: 6000;
background-image: none;
}


if i try changing or deleting that background color, then they will just be clear, or have a new default.

[vega]

ok thanks.. let me figure out where the javascript is coming from. Be back.

[vega]

guess i'm not too strong with js.

here is the code defining the tabs:

function Popular(target) {
typeof target == "object" ? this.element = target : this.element = document.getElementById(target); if (!this.element) return false;
this.ul = this.element.getElementsByTagName("ul")[0];
this.tabs = this.ul.getElementsByTagName("li");
this.tabContent = this.getTabContent();
this.bind();
}

Popular.prototype.getTabContent = function() {
tabContent= new Array();
this.divs = this.element.getElementsByTagName("div");
for(var i = 0; i < this.divs.length; i++) {
if (/tabContent/i.test(this.divs[i].className)) {
tabContent.push(this.divs[i]);
}
}
return tabContent;
}


Popular.prototype.bind = function() {
var o = this;
for(var i = 0; i < this.tabs.length; i++) {
this.tabs[i].onclick = function() {
if (this.className != 'selected') {
o.open(this); return false;
var a = this.getElementsByTagName("a")[0];
if (a) a.onclick = function() {
return false;
}
}
}
}
}

Popular.prototype.open = function(caller) {
for(var i = 0; i < this.tabs.length; i++) {
var tab = this.tabs[i];
if (tab == caller) {
this.collapse();
tab.className = "selected"
this.tabContent[i].style.display = "block";
}
}
}

Popular.prototype.collapse = function() {
for(var i = 0; i < this.tabs.length; i++) {
this.tabs[i].className = "";
this.tabContent[i].style.display = "none";
}
}

i tried deleting the lines with the "selected" change, but it just breaks the code.. It looks like this is from the prototype library. Do they have forums or help?

[Rowsdower!]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Content Switcheroo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
var current=""; //global variable is set on page load
function content_switch(element) {
if(current){
document.getElementById('selected').id=current; //if "current" is not null (meaning if this is NOT the first tab to be selected) then the old ID is restored to the tab that is currently set as "selected"
}
current=element; //store id that we need to restore later if any other tab is selected
document.getElementById(element).id="selected"; //change selected div's ID to "selected"
}
</script>
<style type="text/css">
body {border:1px solid black;}
#content1, #content2, #content3 {border:1px solid black;background-color:red;}
#selected {border:1px solid black;background-color:yellow;}
</style>
</head>
<body>
<div id="content1"><a href="" onclick="content_switch('content1');return false;">Click Me!</a><br /><img src="http://www.google.com/logos/earthday09.gif" alt="Make it Earth Day Every Day!" /><br />this is content1</div>
<div id="content2"><a href="" onclick="content_switch('content2');return false;">Click Me!</a><br /><img src="http://www.google.com/intl/en_ALL/images/images_hp.gif" alt="This is Google's Image Search Logo..." /><br />this is content2</div>
<div id="content3"><a href="" onclick="content_switch('content3');return false;">Click Me!</a><br /><img src="http://www.google.com/logos/logo.gif" alt="This is Google's Standard Logo..." /><br />this is content3</div>
</body>
</html>

This is a very elementary example of how you want your tabs to work...

See if you can get a feel for why this works and your existing code does not. Try to implement those concepts a bit. You'll need to use ID's rather than classes.

As a side-note, if you want to have one tab selected by default when the page loads just make that tab's id="selected" in the HTML code, then update the javascript so that the initial value of "current" is what the ID of the selected tab will be when another tab is selected...

[Rowsdower!]

I'll also say that this part of the code is what's screwing you up...
Popular.prototype.collapse = function() {
for(var i = 0; i < this.tabs.length; i++) {
this.tabs[i].className = "";
this.tabContent[i].style.display = "none";
}
}

It's going item by item and wiping out the existing class names.