DD Tab Menu (I or II)

[JF sly]

Hello,

Script: DD Tab Menu II

I like the look of the DD Tab Menu II. However, I would like to be able to use it across an entire site so that the menu is standard among all pages (without using frames). My question(s) are:

1) Can the code be split into files that can be called/linked, for example:
menu.css - has all the style infomation/code
menu.js - has the main/core code
menu_items.js

(I guess it would also be acceptable it it were all in one external code if that were easier)

This would allow me to only have to change the menu_items.js file if I needed to add/delete a tab on the menu rather than have to edit all pages on the site

2) If this is possible:

a) Then how do you call the script from the Html document?
b) How do you have the main core code look to the menu_items.js file and the menu.css file?

3) Is it possible to incorporate the preloader.js code into the DD Tab Menu code so that the preload occures automatically?

Thanks for any help/input with this.

JF sly

[cr3ative]

You could take this code

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

//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 editting////////////////

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 && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}

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

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

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

And save it to file, then you can link to it like this: <script src="filename.js">
Next, I suppose you could do this to make the javascript "write" your HTML, save it to a file and link it as before:

document.write("<div id='ddimagetabs'><a href='http://url/' onMouseover='expandcontent('sc1', this)'>Home</a> <a href='http://url/' onMouseover='expandcontent('sc2', this)'>New</a> <a href='http://url/' onMouseover='expandcontent('sc3', this)'>Revised</a><a href='http://url/' onMouseover='expandcontent('sc4', this)'>Submit</a></div> <br style='clear:left' /><DIV id='tabcontentcontainer'><div id='sc1' class='tabcontent'>Return to the <a href='http://www.dynamicdrive.com'>frontpage</a> of Dynamic Drive.</div><div id='sc2' class='tabcontent'>See the new scripts recently added to Dynamic Drive. <a href='http://www.dynamicdrive.com/new.htm'>Click here</a>.</div><div id='sc3' class='tabcontent'>A listing of scripts recently changed, plus description of the changes. <a href='http://www.dynamicdrive.com/revised.htm'>Revised Section</a>.</div><div id='sc4' class='tabcontent'>Have a great script you wish to submit to Dynamic Drive for possible inclusion? <a href='http://www.dynamicdrive.com/submitscript.htm'>Click here</a>.</div></DIV>");

( All I did here was replace " with ', and put it all on one line wrapped with document.write("text"); )

I don't know enough about style sheets to comment about them, but I reckon the code above should work with no probs. Put the <script src="url"> tags in the right place (i.e BODY or HEAD sections) and it should work.

cr3ative

[JF sly]

Thanks for the response. One question,

Where do I put the second bit of code that you did. If it goes in the individual html page(s), then I would still need to change every page if I change the tabs.

Maybe I'm not understanding correctly