PDA

View Full Version : ddtabmenu help!



b-summers
05-18-2013, 09:37 PM
1) Script Title: DD Tab Menu

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

3) Describe problem: When the page is initially loaded it shows ALL the content for ALL the divs. After you hover over something it shows what it's supposed to, and when you mouse out everything goes away. But it's the content popping up on page load that shouldn't be happening. Not sure how to fix this. I have set the javascript to "-1" to load nothing at start.
I also tried stripping the CSS I added and just use the default styling, but I had the same problem.

Here's a link to my site: http://regardinghue.com/cms/frequently-asked-questions/

vwphillips
05-19-2013, 12:35 PM
<script type="text/javascript" src="/cms/wp-content/themes/hue/js/ddtabmenu.js"></script>


.tabcontent {
display:none;
}

b-summers
05-24-2013, 11:50 PM
Thanks vwphillips, the display none worked.

Do you know if there is a version of this where the text will change when you "click" the tag, rather than hover over it?

vwphillips
05-25-2013, 10:51 AM
//DD Tab Menu- Script rewritten April 27th, 07: http://www.dynamicdrive.com
//**Updated Feb 23rd, 08): Adds ability for menu to revert back to default selected tab when mouse moves out of menu

//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,mde){
this[tabid+"-menuitems"]=null
this[tabid+"-dselected"]=-1
this.addEvent(window, function(){ddtabmenu.init(tabid, dselected,mde)}, "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,mde){
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||mde=='click')
menuitems[x].onclick=function(){return false}
if (ddtabmenu.snap2original[0]==true){
var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
if (mde!='click'){
menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
}
submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
}
}
else //for items without a submenu, add onMouseout effect
if (mde=='click'){ menuitems[x].onmouseout=function(e){ this.className=""; }
}
else {
menuitems[x].onmouseout=function(e){ this.className=""; if (ddtabmenu.snap2original[0]==true){ ddtabmenu.revert2default(this, tabid, e); } }

}
menuitems[x][mde=='click'?'onmouseup':'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]
}
}
}
}


+ a new parameter


//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto", 'click' or 'mouseover' default = 'mouseover')
ddtabmenu.definemenu("ddtabs1", -1,'click') //initialize Tab Menu #1 with 1st tab selected

b-summers
05-27-2013, 04:25 PM
Thanks again vwphillips.

I have added your new init:function to the js file, and the new "click" parameter. The text doesn't show up when you hover anymore, but it also doesn't show up when you click. Is there something you need to change in the HTML? I have removed the link URL, and replaced it with "#", but that doesn't seem to work either.

http://hotzon.honeycombsites.ca/testpage

b-summers
05-27-2013, 06:11 PM
nvm, I ended up using this:
http://codepen.io/JoshBlackwood/pen/yoLBJ

But thanks for helping me with the mouseover one!!!!