?
Solved

re: Tabnav - how do I lock the subnav?

Posted on 2005-03-17
2
Medium Priority
?
235 Views
Last Modified: 2011-10-03
Hi,
   I have a dhtml tabnav that I would like to lock the subnav layer. In other words, it currently displays the layer id="sc1".  When you rollover the other toptabs in the toplink layer, I don't want the sublayer to change.
Here is the code that I have so far:
*******************************************************
<!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>
    <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/css/new/base.css" title="SB base styles" />
<link rel="stylesheet" type="text/css" href="css/portal.css" title="" />
<script type="text/javascript">

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

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes


////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
cleartabs()
aobject.className="current"
}

function cleartabs() {
for (i=0; i<tabobjlinks.length; i++)
{
if (i!=initialtab[0]-1)
tabobjlinks[i].className=""
}
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
</head>
<body class="fclinx">
<!--#include virtual="/includes/01_pagetop_prospect3.inc"-->


<!-- Start CONTAINER -->
<div id="min780">

<!-- Start TOPLINK layer -->
<div id="backgroundline">
      <div id="ddimagetabs">
            <a href="#" onMouseover="expandcontent('sc1', this)" onmouseout="cleartabs()">Financial Consultant</a>
            <a href="#" onMouseover="expandcontent('sc2', this)" onmouseout="cleartabs()">Wealth Management</a>
            <div id="ddimagetabs2"><a href="products_services.html" class="longer" onMouseover="expandcontent('sc3', this)" onmouseout="cleartabs()">Research &amp; Commentaries</a></div>
            <a href="fee_based.html" onMouseover="expandcontent('sc4', this)" onmouseout="cleartabs()">Products &amp; Services</a>
            <a href="specialized_services.html" onMouseover="expandcontent('sc5', this)" onmouseout="cleartabs()">Site Features</a>
      </div>
</div>  
<!-- End TOPLINK layer -->

<!-- Start SUBLINK layer -->
<div id="tabcontentcontainer">
      <div id="sc1" class="tabcontent">
            <div id="submenu">
                  <a href="#" class="highlight">Working with a Financial Consultant</a>
                  <a href="#">Developing a Financial Plan</a>
                  <a href="#" class="end">Find a Financial Consultant</a>
            </div>
      </div>
      
      <div id="sc2" class="tabcontent">
            <div id="submenu">
                  <a href="#">Wealth Management Platform</a>
                  <a href="#">Under the Citigroup Umbrella</a>
                  <a href="#" class="end">The Smith Barney Advantage</a>
            </div>
      </div>
      
      <div id="sc3" class="tabcontent">
      
      </div>
      
      <div id="sc4" class="tabcontent">
            <div id="submenu">
                  <a href="#">Services</a>
                  <a href="#">Planning</a>
                  <a href="#">Products</a>
                  <a href="#" class="end">Managed Money</a>
            </div>
      </div>
      
      <div id="sc5" class="tabcontent">
            
      </div>
</div>
<!-- END SUBLINK layer -->



<!-- End CONTAINER div -->
</div>            

</body>
</html>

*******************************************************
Thanks,
-Ron.
0
Comment
Question by:ron4721
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 13570208
Change the onMouseOver to onClick???

onClick="expandcontent('sc1', this); return false"
0
 

Author Comment

by:ron4721
ID: 13572117
Thanks much!
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question