troubleshooting Question

Highlight link when active - using Javascript and DHTML

Avatar of AxISQS
AxISQS asked on
JavaScriptWeb DevelopmentHTML
3 Comments1 Solution547 ViewsLast Modified:
Hello everyone.  I have a page that seems to be working great with one problem.  At the top of the page are a few links.  When you click each link a JS function hides or displays a table contained within <div>.  When you're active on a link the active link is not highlighted.  Please see my screenshot for more information.  The code can be found below.  Can you help troubleshoot why this is occurring?  Thanks!


working
not working

<style>
a:visited{
  color:#494949;
}
.chromemenu{
width: 99%;
font-weight: bold;
}

.chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(/img/vcmcustomview/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

.chromemenu ul li{
display: inline;
}

.chromemenu ul li a{
color: #494949;
padding: 5px 8px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
}

.chromemenu ul li a:hover, .chromemenu ul li a.current{
background: url(/img/vcmcustomview/chromebg2.gif) 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.*/
}

.tabcontainer{font-family:"Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;letter-spacing:.01em}.tabcontainer li ul{width:64%}

.tabcontent{
display:none;
}
</style>

<script>

//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){
	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]
		}
	}
}
}

</script>

<script type="text/javascript">

ddtabmenu.definemenu("ddtabs5", 0) //initialize Tab Menu #5 with NO tabs selected 

</script>

<form name="navForm">
    <input type="hidden" ID="cu" Name="cu" value="kristi test" />
    <input type="hidden" ID="cuID" Name="cuID" value="kristi test ID" />

<div id="ddtabs5" class="chromemenu">
<ul>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='block';document.getElementById('doctypeSection').style.display='none';document.getElementById('reportsSection').style.display='none';document.getElementById('helpSection').style.display='none';"><span style="cursor:pointer">Mega Process</span></a>
</li>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='none';document.getElementById('doctypeSection').style.display='block';document.getElementById('reportsSection').style.display='none';document.getElementById('helpSection').style.display='none';"><span style="cursor:pointer">Document Type</span></a>
</li>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='none';document.getElementById('doctypeSection').style.display='none';document.getElementById('reportsSection').style.display='block';document.getElementById('helpSection').style.display='none';"><span style="cursor:pointer">Reports</span></a>
</li>
<li>
<a onclick="#"><span style="cursor:pointer">Help</span></a>
</li>
<li>
<a href="javascript:document.getElementById('cu').value=currentUser.userName;document.getElementById('cuID').value=currentUser.id;void(window.open('{ot:OTvar_livelink_cgiPath}/open/PDMSRequestForm_REQ','',''));"><span style="cursor:pointer">New Document</span></a>
</li>
</ul>
</div>
<br />
<div class="ddcolortabsline"></div>
<div class="tabcontainer">

<div id="megaprocessSection" style="display:block">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Customer Acquisition');return false" title="Apply filter of Mega Process: Customer Acquisition"><img height="85" border="0" src="/img/pdms_cv/images/customer_aquisition.png"></a><br />
      <br />
      Customer Acquisition</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Communications');return false" title="Apply filter of Mega Process: Enabling Communications"><img height="85" border="0" src="/img/pdms_cv/images/enabling_communications.png"></a><br />
      <br />
      Enabling Communications</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Enterprise Effectiveness');return false" title="Apply filter of Mega Process: Enabling Enterprise Effectiveness"><img height="85" border="0" src="/img/pdms_cv/images/enabling_ent_effectiveness.png"></a><br />
      <br />
      Enabling Enterprise Effectiveness</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Financial Accounting and Reporting');return false" title="Apply filter of Mega Process: Enabling Financial Accounting and Reporting"><img height="85" border="0" src="/img/pdms_cv/images/enabling_fin_acct_rept.png"></a><br />
      <br />
      Enabling Financial Accounting and Reporting</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling IT Optimization');return false" title="Apply filter of Mega Process: Enabling IT Optimization"><img height="85" border="0" src="/img/pdms_cv/images/enabling_it_optimization.png"></a><br />
      <br />
      Enabling IT Optimization</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Human Resource Management');return false" title="Apply filter of Mega Process: Enabling Human Resource Management"><img height="85" border="0" src="/img/pdms_cv/images/enabling_resource_mgmt.png"></a><br />
      <br />
      Enabling Human Resource Management</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Responsible Care and Sustainability');return false" title="Apply filter of Mega Process: Responsible Care and Sustainability"><img height="85" border="0" src="/img/pdms_cv/images/responsible_care_sust.png"></a><br />
      <br />
      Responsible Care and Sustainability</p>
    </td>
  </tr>
  </table>
  
  <table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr align="center">
      <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Governing Ethics and Compliance');return false" title="Apply filter of Mega Process: Governing Ethics and Compliance"><img height="85" border="0" src="/img/pdms_cv/images/governing_ethics_compliance.png"></a><br />
      <br />
      Governing Ethics and Compliance</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'New Solutions Development');return false" title="Apply filter of Mega Process: New Solutions Development"><img height="85" border="0" src="/img/pdms_cv/images/new_solutions_dev.png"></a><br />
      <br />
      New Solutions Development</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Global Trade Management');return false" title="Apply filter of Mega Process: Supply Chain - Global Trade Management"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_global_trade_mgmt.png"></a><br />
      <br />
      Supply Chain - Global Trade Management</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Order to Cash');return false" title="Apply filter of Mega Process: Supply Chain - Order to Cash"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_order_cash.png"></a><br />
      <br />
      Supply Chain - Order to Cash</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Plan to Deliver');return false" title="Apply filter of Mega Process: Supply Chain - Plan to Deliver"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_plan_deliver.png"></a><br />
      <br />
      Supply Chain - Plan to Deliver</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Source to Pay');return false" title="Apply filter of Mega Process: Supply Chain - Source to Pay"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_source_pay.png"></a><br />
      <br />
      Supply Chain - Source to Pay</p>
    </td>
  </tr>
</table>
</div>

<div id="doctypeSection" style="display:none">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Corporate_Policy"><img border="0" src="/img/pdms_cv/images/policy.png"  height="80px" alt=""></a><br />
      <br />
      Corporate Policy</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Form"><img border="0" src="/img/pdms_cv/images/form.png"  height="80px" alt=""></a><br />
      <br />
      Form</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Group_Policy"><img border="0" src="/img/pdms_cv/images/policy.png"  height="80px" alt=""></a><br />
      <br />
      Group Policy</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Presentation"><img border="0" src="/img/pdms_cv/images/presentation.png"  height="80px" alt=""></a><br />
      <br />
      Presentation</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Procedure"><img border="0" src="/img/pdms_cv/images/procedure.png"  height="80px" alt=""></a><br />
      <br />
      Procedure</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Program_Plan_Manual"><img border="0" src="/img/pdms_cv/images/program.png"  height="80px" alt=""></a><br />
      <br />
      Program/Plan/Manual</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Reference"><img border="0" src="/img/pdms_cv/images/reference.png"  height="80px" alt=""></a><br />
      <br />
      Reference</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Training"><img border="0" src="/img/pdms_cv/images/training.png"  height="80px" alt=""></a><br />
      <br />
      Training</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Work_Instruction"><img border="0" src="/img/pdms_cv/images/work.png"  height="80px" alt=""></a><br />
      <br />
      Work Instruction</p>
    </td>
  </tr>
</table>
</div>


<div id="reportsSection" style="display:none">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/document_management.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/archiving.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/records_management.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/formsandworkflow.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
  </tr>
</table>
</div>

</div>
</form>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros