PDA

View Full Version : Tab Content Script -- remove bottom border on active tab



keleh
06-28-2005, 03:18 AM
=====
Script: Tab Content
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
=====

My question is how to remove the bottom border on an active tab to make it look connected to the body section AND put the bottom border back on an inactive tab. I've tried various things with z-index and border-bottom but I've been having issues -- e.g. I can get the bottom border to go away but it also goes away on inactive tabs. Anyone have a solution? It'd be greatly appreciated.

jscheuer1
06-28-2005, 04:20 AM
Using the demo 'right out of the box' with the optional persistence feature, add to the '#tablist li' style declaration so it looks like this:
#tablist li{
list-style: none;
display: inline;
margin: 0;
position:relative;
}Then in the script where it says:
tabobjlinks[i].style.backgroundColor=initTabcoloradd these two lines beneath that line:
for (i=0; i<tabobjlis.length; i++)
tabobjlis[i].style.top=0then below this line:

aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecoloradd this one:
aobject.parentNode.style.top='1px'Finally, below this line:
tabobjlinks=tabobj.getElementsByTagName("A")add this one:
tabobjlis=tabobj.getElementsByTagName("li")

keleh
06-29-2005, 04:21 AM
thank you jscheuer1!!! :)

is it possible to make the active tab the same height as before (i.e. is there a way to increase the height on the bottom rather than shifting the position 1px down?)

jscheuer1
06-29-2005, 05:45 AM
I thought about that and realized that with normal tabbed file folders in a file cabinet, the 'active' tab usually is lower than those behind it. Anyway, the effect you describe can be achieved by basically starting over with our modifications, except we still need that position:relative; that we added to:
#tablist li{
list-style: none;
display: inline;
margin: 0;
position:relative;
}Now, working from an otherwise fresh copy of the script and only within the function called 'highlighttab', add to this line a curly bracket changing it from:
for (i=0; i<tabobjlinks.length; i++)to:
for (i=0; i<tabobjlinks.length; i++){after this line:
tabobjlinks[i].style.backgroundColor=initTabcoloradd these two lines:
tabobjlinks[i].style.borderBottom='none'
}Finally, after this line:
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecoloradd this one:
aobject.style.borderBottom='1px solid '+themecolor

keleh
06-30-2005, 03:43 AM
Thank you jscheuer1, you're incredible