Background: Our main menu is built using a simple unordered list
containing other ULs. There is a table on a page that holds the subnav.
Because of certain circumstances, I need to build the subnav dynamically
on each page. I wrote this script in about 15 minutes because it was a
"scope-creep" kinda thing. Now that I have a bit of time, for education
reasons, I want to optimize this thing as much as possible.
Notes: DOM is a heaven send :). By my own admission, the variable names
could be a little more descriptive. "nav" is the master navigation.
"subNav" is a table row which holds the sub-navigation. This script works
good enough. But, I'm always interested in the opinions of those more
experienced than I.
Here's a shortened version of the main nav:
<ul id="nav">
<li>
<div>
<a href="/home/newstory.aspx" alt="">Home</a>
</div>
</li>
<li>
<div>
<a href="/about/default.aspx" alt="ABOUT ASBA">About Asba
</a>
</div>
<ul>
<li>
<a href="/about/missionvisionph ilosophy.aspx">
Mission/Vision/Philosophy</a>
</li>
<li>
<a href="/about/board.aspx">Boa rd of Directors</a>
</li>
</ul>
</li>
</ul>
Here's the subnav:
<table class="subnav" border="0">
<tr>
<td class="subparen t" id="subNavHeade r">Benefits</td>
<td width="15" rowspan="2">&nb sp;</td>
</tr>
<tr>
<td class="subbody" id="subNav">
</td>
</tr>
</table>
Here's the script:
function makeSubNav(){
var navs = document.getEle mentById('nav') .getElementsByT agName('a');
var subNav = document.getEle mentById('subNa v');
var path = formatPath( document.locati on.pathname );
var anchor, link, parentNodeName, listToPass, altText;
for(var i = 0; i < navs.length; i++){
anchor = navs[i];
link = formatPath( anchor.pathname );
listToPass = null;
if(path == link){
switch(anchor.p arentNode.nodeN ame.toUpperCase ()){
case "LI":
listToPass =
anchor.parentNo de.parentNode.p arentNode;
break;
case "DIV":
listToPass = anchor.parentNo de.parentNode;
break;
}
break;
}
}
try{
altText = listToPass.getE lementsByTagNam e('div')
[0].getElementsByT agName('a')[0].attributes.get NamedItem('alt' ).value;
}catch(err){
altText = '';
}
subNav.appendCh ild( createList(list ToPass, altText, path) );
}
function formatPath(path ){
if(path.charAt( 0) != '/') path = '/' + path;
return path.toLowerCas e();
}
function createList(ul, altText, currentPage){
document.getEle mentById('subNa vHeader').inner HTML = altText;
var toReturn = document.create Element('ul');
var items = ul.getElementsB yTagName('li');
var img, existingLink, existingPath, newItem, newLink, span;
for(var i = 0; i < items.length; i++){
existingLink = items[i].getElementsByT agName('a')[0];
existingPath = formatPath( existingLink.pa thname );
newItem = document.create Element('li');
img = new Image();
img.height = 6;
img.width = 10;
img.border = 0;
img.src = "/Common/Images/LinkBullet.gif" ;
newItem.appendC hild( img );
if(existingPath == currentPage){
toReturn.append Child( document.create Element('br') );
newItem.classNa me = "subcurrent ";
span = document.create Element('span') ;
span.innerHTML = existingLink.in nerHTML;
newItem.appendC hild( span );
toReturn.append Child( newItem );
toReturn.append Child( document.create Element('br') );
}else{
newLink = document.create Element('a');
newLink.href = existingLink.hr ef;
newLink.innerHT ML = existingLink.in nerHTML;
newItem.appendC hild( newLink );
toReturn.append Child( newItem );
}
}
return toReturn;
}
TIA
--
( )
)\ ) ) ( /(
(()/( ( /( ( ( ( )\())
/(_)))\()))\ ( )\))( ((_)\
(_)) (_))/((_) )\ ) ((_))\ _ ((_)
/ __|| |_ (_) _(_/( (()(_)| |/ /
\__ \| _| | || ' \))/ _` | | ' <
|___/ \__| |_||_||_| \__, | |_|\_\
|___/
containing other ULs. There is a table on a page that holds the subnav.
Because of certain circumstances, I need to build the subnav dynamically
on each page. I wrote this script in about 15 minutes because it was a
"scope-creep" kinda thing. Now that I have a bit of time, for education
reasons, I want to optimize this thing as much as possible.
Notes: DOM is a heaven send :). By my own admission, the variable names
could be a little more descriptive. "nav" is the master navigation.
"subNav" is a table row which holds the sub-navigation. This script works
good enough. But, I'm always interested in the opinions of those more
experienced than I.
Here's a shortened version of the main nav:
<ul id="nav">
<li>
<div>
<a href="/home/newstory.aspx" alt="">Home</a>
</div>
</li>
<li>
<div>
<a href="/about/default.aspx" alt="ABOUT ASBA">About Asba
</a>
</div>
<ul>
<li>
<a href="/about/missionvisionph ilosophy.aspx">
Mission/Vision/Philosophy</a>
</li>
<li>
<a href="/about/board.aspx">Boa rd of Directors</a>
</li>
</ul>
</li>
</ul>
Here's the subnav:
<table class="subnav" border="0">
<tr>
<td class="subparen t" id="subNavHeade r">Benefits</td>
<td width="15" rowspan="2">&nb sp;</td>
</tr>
<tr>
<td class="subbody" id="subNav">
</td>
</tr>
</table>
Here's the script:
function makeSubNav(){
var navs = document.getEle mentById('nav') .getElementsByT agName('a');
var subNav = document.getEle mentById('subNa v');
var path = formatPath( document.locati on.pathname );
var anchor, link, parentNodeName, listToPass, altText;
for(var i = 0; i < navs.length; i++){
anchor = navs[i];
link = formatPath( anchor.pathname );
listToPass = null;
if(path == link){
switch(anchor.p arentNode.nodeN ame.toUpperCase ()){
case "LI":
listToPass =
anchor.parentNo de.parentNode.p arentNode;
break;
case "DIV":
listToPass = anchor.parentNo de.parentNode;
break;
}
break;
}
}
try{
altText = listToPass.getE lementsByTagNam e('div')
[0].getElementsByT agName('a')[0].attributes.get NamedItem('alt' ).value;
}catch(err){
altText = '';
}
subNav.appendCh ild( createList(list ToPass, altText, path) );
}
function formatPath(path ){
if(path.charAt( 0) != '/') path = '/' + path;
return path.toLowerCas e();
}
function createList(ul, altText, currentPage){
document.getEle mentById('subNa vHeader').inner HTML = altText;
var toReturn = document.create Element('ul');
var items = ul.getElementsB yTagName('li');
var img, existingLink, existingPath, newItem, newLink, span;
for(var i = 0; i < items.length; i++){
existingLink = items[i].getElementsByT agName('a')[0];
existingPath = formatPath( existingLink.pa thname );
newItem = document.create Element('li');
img = new Image();
img.height = 6;
img.width = 10;
img.border = 0;
img.src = "/Common/Images/LinkBullet.gif" ;
newItem.appendC hild( img );
if(existingPath == currentPage){
toReturn.append Child( document.create Element('br') );
newItem.classNa me = "subcurrent ";
span = document.create Element('span') ;
span.innerHTML = existingLink.in nerHTML;
newItem.appendC hild( span );
toReturn.append Child( newItem );
toReturn.append Child( document.create Element('br') );
}else{
newLink = document.create Element('a');
newLink.href = existingLink.hr ef;
newLink.innerHT ML = existingLink.in nerHTML;
newItem.appendC hild( newLink );
toReturn.append Child( newItem );
}
}
return toReturn;
}
TIA
--
( )
)\ ) ) ( /(
(()/( ( /( ( ( ( )\())
/(_)))\()))\ ( )\))( ((_)\
(_)) (_))/((_) )\ ) ((_))\ _ ((_)
/ __|| |_ (_) _(_/( (()(_)| |/ /
\__ \| _| | || ' \))/ _` | | ' <
|___/ \__| |_||_||_| \__, | |_|\_\
|___/
Comment