PDA

View Full Version : Multiple DD Tab Menus in the same page



drunkdriver
05-05-2006, 12:01 PM
Hi,
I am using DD Tab Menu from http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm and I have a problem with inserting multiple menus in the same page (not multiple tabs in the same menu, but multiple menus). I want to load as "initialtab" the following tabs: scA1, scB1, scC1; and then use them with mouseover.

Here is the code as I modified it:

<style type="text/css">

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

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

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

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

#tablist li a.current{
background: 9CB3B3;
}

#tabcontentcontainer{
width:480px;
height:40px;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu 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, "scA1" ]


//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editing////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

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

function do_onload(){
collecttablinks()
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>

</HEAD>

----

and here are the menus:

<DIV id="tabcontentcontainer">

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

</div>

<div id="scA2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>

<div id="scA3" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>

</div>

</DIV>

<DIV id="tabcontentcontainer">

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

</div>

<div id="scB2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>

</div>

</DIV>


<DIV id="tabcontentcontainer">

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

</div>

<div id="scC2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>

</div>

</DIV>
----

The lines given above are just an example of the lines I use in my website.

Thanks,

DD