PDA

View Full Version : Resolved How do I get DD Tab Menu working?



tastegw
06-14-2009, 02:41 AM
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:

<!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

.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:


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

tastegw
06-14-2009, 03:50 AM
just incase any others had the same problem

here was my problem

in my main html doc (the top code)

this line:

<div id="ddtabs3" class="basictab">

needed to be this:

<div id="ddtabs3" class="solidblockmenu">