Tab Content Menu v1 selected tabs.

[atomique]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent2.htm

3) Describe problem:

I basically just want to change the text color of the selected tab. I tried changing this:


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

To this:


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

And then called the color change using the "theme" command in the link, and it did different things in each browser. In Firefox, the link changed to the color I wanted, but wouldn't change back to the original color. In Safari, the link changed, but all of the other links turned white (the background color of the page, therefore making them invisible). In IE6, they changed, but instead of changing back to the original color, they turned black.

Here is the CSS I have:


#tablist{
padding: 0px;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: 12px Verdana;
color: #999999;
text-decoration:none;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
color: #999999;
text-decoration:none;
}

#tablist li a{
padding: 0px;
margin-left: 0px;
border: 0px;
border-bottom: none;
background: none;
padding-right:26px;
color: #999999;
text-decoration:none;
}

#tablist li a:link, #tablist li a:visited{
color: #999999;
}

.tablist li.selected a{
border-bottom-color: white;
color: #c1d72e;
}


#tablist li a.current{
background: none;
color: #999999;
}

#tabcontentcontainer{
width: 100%;
padding: 0px;
border: 0px;
}

.tabcontent{
display:none;
font: 12px Verdana;
color: #999999;
}

I tried using v2 of this script and couldn't get it working. This version is working much better, so it would be really great if I can get this straightened out.

Thanks for your help!

[atomique]

Okay, I found a partial solution here:
http://www.dynamicdrive.com/forums/showthread.php?t=8255&highlight=content+selected

And I changed the script to this:


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"
}

However, now when I view the page in IE6, I get an error saying "'initialtab' is undefined." Any ideas?

[atomique]

Okay, I took care of that error, however, I am getting more errors:

line 265, "ddtabcontent" is undefined


var products=new ddtabcontent("producttabs")
products.setpersist(true)
products.setselectedClassTarget("link")
products.init()

two errors: line 73, "initTabpostcolor" is undefined, and "undefined" is null or not an object


var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.className = "current"

[ddadmin]

Departing from your changes above, try the below modified script, which lets you specify both a background and foreground color for each theme:


<style type="text/css">

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

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

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

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

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>

<body>

<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF|red">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6|green">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF|blue">Search</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
</div>

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>


</DIV>

Note how you separate the background and foreground value with a pipe "|".

[atomique]

Awesome, thanks!