Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: DD tab menu: How do I keep "current" tab "current"?

  1. #1
    Join Date
    Oct 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default DD tab menu: How do I keep "current" tab "current"?

    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...s/glowtabs.css

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

    Any help would be much appreciated!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Go to ddtabmenu.js and add highlighted:
    Code:
    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"
    },
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Quote Originally Posted by chausfeld View Post
    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. The Following User Says Thank You to rangana For This Useful Post:

    chausfeld (10-03-2011)

  6. #5
    Join Date
    Oct 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Not quite...

    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

  7. #6
    Join Date
    Oct 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  8. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Please revert back to the original ddtabmenu.js. Here's a quick hack on getting what you desire:
    Code:
    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  9. #8
    Join Date
    Oct 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Almost!

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

  10. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    This would be easiest then... on your initialization, set a new object like:
    Code:
    ddtabmenu.definemenu("ddtabs1", 0, {'id' : '6', 'className' : 'orange'})
    ...and on ddtabmenu.js, add the highlighted instead:
    Code:
    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"
    },
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  11. #10
    Join Date
    Oct 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I added the code to the Home page and About page:
    http://www.concrete-creative.com/OOD...-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...

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
  •