PDA

View Full Version : Tab Content Script: trying to change colour for selected/not selected tab



justicefish
03-13-2006, 06:07 AM
DD Script: Tab Content Script
url:http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

I am trying to change colour for selected/not selected tab, but I always get "tabobjlinks[..] is null or not an object" error. :confused:



function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
tabobjlinks[i].style.color="white"
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
aobject.style.color="#C35151"
}


I had changed the css too.


<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
padding: 3px 0;
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 3px;
margin-left: 0px;
margin-right: -3px;
border: 1px solid #C5E1E9;
border-bottom: none;
background-color:#A5BCD3;
color:#F3F8FD ;
}

#tablist li a:link, #tablist li a:visited{
text-decoration: none;
}

#tablist li a.current{
color:#C35151;
background: #F3F8FD;
text-decoration: none;
}

.tabcontent{
display:none;
}

</style>

jscheuer1
03-13-2006, 07:06 AM
When a statement follows a for statement, it will be executed for that situation. However, the following statement will not unless the situation described by the for statement is extended using brackets, examples:


for (whatever)
dothis();
dothat();

In the above, dothis(); will be executed using the conditions set in play by the for statement but, dothat(); will not. If the code looks like so:


for (whatever) {
dothis();
dothat();
}

Now both dothis(); and dothat(); will execute in the environment laid out in the for statement. Taking this to your situation, you want:


for (i=0; i<tabobjlinks.length; i++) {
tabobjlinks[i].style.backgroundColor=initTabcolor
tabobjlinks[i].style.color="white"
}

justicefish
03-13-2006, 08:20 AM
thanks for your help. :)

I am wondering, is it possible to state the css class for the tab that include background color, font color..etc instead of stating it one by one, had tried something like this



aobject.style = "current"


but got error :p

jscheuer1
03-13-2006, 04:26 PM
That would be:


aobject.className = "current"

exlibrisnihil
03-14-2006, 01:04 AM
How do I keep a tab one color all the time regardless of where you click on the tabs?

I would like let say the first initial tab always yellow.

justicefish
03-16-2006, 05:18 AM
I had change the code to


function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
{
tabobjlinks[i].className = ""
}
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.className = "current"
}


and is working now!

I suppose if u want the tab to be same colour, u can try use the above code and set the css class "current" to be the same colour.