Results 1 to 2 of 2

Thread: How do I get DD Tab Menu working?

  1. #1
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How do I get DD Tab Menu working?

    1) Script Title:
    DD Tab Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    3) Describe problem: How do I set it up?

    Ok, I just started learning CSS and such.
    I am trying to get any of the DD Tab Menus working, currently trying for the solid blocks style.

    I have created the extensions for both .js and .css

    here are my codes for just testing the script.
    html code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!/***********************************************
    * 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
    ***********************************************/>
    <link rel="stylesheet" type="text/css" href="solidblocksmenu.css" />
    <script type="text/javascript" src="ddtabmenu.js"></script>
    <script type="text/javascript">
    //SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
    ddtabmenu.definemenu("ddtabs3", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
    </script>
    </head>
    
    <body>
    <div id="ddtabs3" class="basictab">
    <ul>
    <li><a href="http://www.dynamicdrive.com" rel="sc1">Home</a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">DHTML</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" rel="sc3">CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
    </ul>
    </div>
    
    <DIV class="tabcontainer">
    
    <div id="sc1" class="tabcontent">
    you
    </div>
    
    <div id="sc2" class="tabcontent">
    did
    </div>
    
    <div id="sc3" class="tabcontent">
    what
    </div>
    
    </DIV>
    
    </body>
    
    </html>
    solidblocks.css code
    Code:
    .solidblockmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width: 100%;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(blockdefault.jpg) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li a.current{
    color: white;
    background: transparent url(blockactive.jpg) center center repeat-x;
    }
    
    .tabcontainer{
    clear: left;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }
    
    *:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/
    margin-top: -1em;
    }
    
    * html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/
    margin-top: -1em;
    }
    
    .tabcontent{
    display:none;
    }
    ddtabmenu.js code:
    Code:
    //Only 2 configuration variables below:
    
    var ddtabmenu={
    	disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
    	snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec]
    
    	currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)
    
    definemenu:function(tabid, dselected){
    	this[tabid+"-menuitems"]=null
    	this[tabid+"-dselected"]=-1
    	this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
    },
    
    showsubmenu:function(tabid, targetitem){
    	var menuitems=this[tabid+"-menuitems"]
    	this.clearrevert2default(tabid)
     for (i=0; i<menuitems.length; i++){
    		menuitems[i].className=""
    		if (typeof menuitems[i].hasSubContent!="undefined")
    			document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
    	}
    	targetitem.className="current"
    	if (typeof targetitem.hasSubContent!="undefined")
    		document.getElementById(targetitem.getAttribute("rel")).style.display="block"
    },
    
    isSelected:function(menuurl){
    	var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
    	return (ddtabmenu.currentpageurl==menuurl)
    },
    
    isContained:function(m, e){
    	var e=window.event || e
    	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    	if (c==m)
    		return true
    	else
    		return false
    },
    
    revert2default:function(outobj, tabid, e){
    	if (!ddtabmenu.isContained(outobj, tabid, e)){
    		window["hidetimer_"+tabid]=setTimeout(function(){
    			ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+"-dselected"])
    		}, ddtabmenu.snap2original[1])
    	}
    },
    
    clearrevert2default:function(tabid){
     if (typeof window["hidetimer_"+tabid]!="undefined")
    		clearTimeout(window["hidetimer_"+tabid])
    },
    
    addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    	if (target.addEventListener)
    		target.addEventListener(tasktype, functionref, false)
    	else if (target.attachEvent)
    		target.attachEvent(tasktype, functionref)
    },
    
    init:function(tabid, dselected){
    	var menuitems=document.getElementById(tabid).getElementsByTagName("a")
    	this[tabid+"-menuitems"]=menuitems
    	for (var x=0; x<menuitems.length; x++){
    		if (menuitems[x].getAttribute("rel")){
    			this[tabid+"-menuitems"][x].hasSubContent=true
    			if (ddtabmenu.disabletablinks)
    				menuitems[x].onclick=function(){return false}
    			if (ddtabmenu.snap2original[0]==true){
    				var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
    				menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
    				submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
    				submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
    			}
    		}
    		else //for items without a submenu, add onMouseout effect
    			menuitems[x].onmouseout=function(e){this.className=""; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
    		menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
    		if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
    			ddtabmenu.showsubmenu(tabid, menuitems[x])
    			this[tabid+"-dselected"]=menuitems[x]
    			var setalready=true
    		}
    		else if (parseInt(dselected)==x){
    			ddtabmenu.showsubmenu(tabid, menuitems[x])
    			this[tabid+"-dselected"]=menuitems[x]
    		}
    	}
    }
    }
    with these codes, i do not get a nav bar, i get a bullet list...
    http://free-signatures.webs.com/css_test.html

    any help would be apprciated greatly!
    Last edited by tastegw; 06-14-2009 at 03:50 AM.

  2. #2
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    just incase any others had the same problem

    here was my problem

    in my main html doc (the top code)

    this line:
    Code:
    <div id="ddtabs3" class="basictab">
    needed to be this:
    Code:
    <div id="ddtabs3" class="solidblockmenu">

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
  •