PDA

View Full Version : DD tab menu: How do I keep "current" tab "current"?



chausfeld
10-03-2011, 07:42 PM
1) Script Title: DD tab menu

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

3) Describe problem:
I don't know if this is a CSS or JS issue. I want the tab showing as "on" to stay "on" if I hover to another tab. Currently, the tab turns off when you hover over another tab, even if you don't click on it. Once you hover off the tabs, it goes back to it's "on" state. Here's the site:
http://www.concrete-creative.com/OOD/about.html

And the CSS:
http://www.concrete-creative.com/OOD/ddtabmenufiles/glowtabs.css

And the JS:
http://www.concrete-creative.com/OOD/ddtabmenufiles/ddtabmenu.js

Any help would be much appreciated!

rangana
10-03-2011, 08:24 PM
Go to ddtabmenu.js and add highlighted:


showsubmenu:function(tabid, targetitem){
var menuitems=this[tabid+"-menuitems"]
this.clearrevert2default(tabid)
for (i=0; i<menuitems.length; i++){
menuitems[i].className=menuitems[i].className=="current"?"current":""
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"
},

ddadmin
10-03-2011, 08:30 PM
That seems to be the case already on your page. The "About" tab I reckon is the currently "on" tab. Moving the mouse over the other tabs only temporarily selects the other tabs; when the mouse rolls out, the "About" tab is once again reselected.

rangana
10-03-2011, 08:33 PM
I want the tab showing as "on" to stay "on" if I hover to another tab. Currently, the tab turns off when you hover over another tab, even if you don't click on it. Once you hover off the tabs, it goes back to it's "on" state

I think he had observed that DD Admin. I guess he want to keep the state "on" while hovering over the other links.

chausfeld
10-03-2011, 08:43 PM
This now keeps any and all tabs ON after you hover over them:
http://www.concrete-creative.com/OOD/about.html

Thanks so much for taking a look!
Carrie

chausfeld
10-03-2011, 08:46 PM
And BTW, the last tab (APPOINTMENTS) is unique in that it should be orange. That's another question after I get the first issue resolved! Just ignore that tab for now...

rangana
10-03-2011, 11:57 PM
Please revert back to the original ddtabmenu.js. Here's a quick hack on getting what you desire:


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"
menuitems[0].className='current'; // first menu
menuitems[6].className='orange'; // 7th menu
if (typeof targetitem.hasSubContent!="undefined")
document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},


That should do the job. I'll try to find sometime this weekend to modify the script to make it more dynamic if DDAdmin or John won't attend to this.

chausfeld
10-04-2011, 01:17 AM
This is SO close!! This does the trick when I'm on the ABOUT page, but on the home page: http://www.concrete-creative.com/OOD/index-nomodule.html
it keeps the About tab on, rather than NO tab on. A simple fix, I hope?!

Again, I so appreciate your help. Thank you again!

rangana
10-04-2011, 01:49 AM
This would be easiest then... on your initialization, set a new object like:


ddtabmenu.definemenu("ddtabs1", 0, {'id' : '6', 'className' : 'orange'})


...and on ddtabmenu.js, add the highlighted instead:


except: {},
remember: '',
definemenu:function(tabid, dselected, obj) {
this.except = obj;
this.remember = 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"
menuitems[this.remember].className='current';
if(this.except!='undefined') menuitems[this.except.id].className = this.except.className;
if (typeof targetitem.hasSubContent!="undefined")
document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

chausfeld
10-04-2011, 07:06 PM
I added the code to the Home page and About page:
http://www.concrete-creative.com/OOD/index-nomodule.html and http://www.concrete-creative.com/OOD/about.html

It works on the Home page as no tab should be selected. But on About, no tab is "on" there either, even though I changed the -1 to 0 in the initialization code (which before, would highlight the About tab).

The good news is that it looks like you also got the orange tab to work!

Thanks again, I hope you can help me with this final remaining issue...

chausfeld
10-04-2011, 07:42 PM
now the 2nd level of nav doesn't appear on rollover or when you're on the page.

rangana
10-04-2011, 08:22 PM
On about.html:


ddtabmenu.definemenu("ddtabs1", 0, {'id' : '6', 'className' : 'orange'})


You were using ddtabs2 BTW.

chausfeld
10-04-2011, 08:51 PM
I so appreciate your help!!! This works great now. The only major issue I now have is that it doesn't seem to work at ALL in IE8. The minor issue that I have is that the tab text sits too high in FF/Mac. If I move it down there, it's too low everywhere else.

If you still are willing, I'd love your input on those as well.

Thanks again!

chausfeld
10-05-2011, 08:53 PM
Hi again - any idea why the tabs don't work in IE8? I have tried to find a solution, to no avail. I may just post a new thread if you don't have any ideas.

Thanks again.