Results 1 to 3 of 3

Thread: DD Tab Menu (I or II)

  1. #1
    Join Date
    Sep 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Tab Menu (I or II)

    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
    Last edited by JF sly; 09-30-2004 at 04:05 PM.

  2. #2
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You could take this code

    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:

    Code:
    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
    Last edited by cr3ative; 09-30-2004 at 04:46 PM.
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  3. #3
    Join Date
    Sep 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Tab Menu II

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •