Javascript menu modifications

[Jay]

I've been using Travis's Expanding Menu
(http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i'm
working on. The problem is I need to add some functionality to it.

I need the the ability to define a subsection to be open when you land
on a page, but when you select another option for it to open that
section and close the previously open one.

I though i'd got round this by adding a class to the nested ol and
setting it to display: inline; in the CSS, but unfortunatly, because
the CSS forces the nested section open it remains open when you click
another section.

Any javascript experts out there fancy helping me out? Code posted
below...


// Node Functions

if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] ||
node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children, filter))
result[result.length] = children;
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children;
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling =
sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu(){
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display =
"none";
}
if(this == activeMenu){
activeMenu = null;
}else{
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||

if(document.createElement) window.onload = initMenu;

 

[Stephen Chalmers]

I've been using Travis's Expanding Menu
(http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i'm
working on. The problem is I need to add some functionality to it.

I need the the ability to define a subsection to be open when you land
on a page, but when you select another option for it to open that
section and close the previously open one.

I though i'd got round this by adding a class to the nested ol and
setting it to display: inline; in the CSS, but unfortunatly, because
the CSS forces the nested section open it remains open when you click
another section.

Any javascript experts out there fancy helping me out?

Here's a kludge that seems to work. Replace initMenu() with this code, and
set 'startWith' to the section you want to display initially, where 0 ==
first.

function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially displayed
section
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++)
{
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");

menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)

getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di
splay = "block";
}

}

 

[Jay]

Here's a kludge that seems to work. Replace initMenu() with this
code, and

set 'startWith' to the section you want to display initially, where 0 ==
first.

function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially displayed
section
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++)
{
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");

menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)

getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di
splay = "block";
}

}

Stephen,

thanks for taking the time to help me out with this one, unfortunatly
my knowledge of javascript is rubbish, hense my asking for some help.
Your 'kludge' as you put it works great so thanks in advance! Although
I have a couple of other questions,.. is there an easy way to add these
two features...

(1) The script is currently, held in an external javascript document,
so is there any way of putting the 'StartWith' trigger onto the page?

(2) Also in some cases the menu needs to display as default i.e with no
sub menu displayed.

If you (or anyone else) could spare the time to have a look at this
then I would be most grateful!

James

 

[Stephen Chalmers]

Here's a kludge that seems to work. Replace initMenu() with this code, and
set 'startWith' to the section you want to display initially, where 0 ==
first.

function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially displayed
section
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++)
{
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");

menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)

getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di

splay = "block";
}

}

Stephen,

thanks for taking the time to help me out with this one, unfortunatly
my knowledge of javascript is rubbish, hense my asking for some help.
Your 'kludge' as you put it works great so thanks in advance! Although
I have a couple of other questions,.. is there an easy way to add these
two features...

(1) The script is currently, held in an external javascript document,
so is there any way of putting the 'StartWith' trigger onto the page?

Delete the declaration of startWith in the initMenu() function, then define
startWith within script tags in the page containing the menu:

<script type='text/javascript'>
var startWith=1;

(2) Also in some cases the menu needs to display as default i.e with no
sub menu displayed.

Then under those circumstances, assign startWith a value of -1.

 

[RobB]

Here's a kludge that seems to work. Replace initMenu() with this code, and
set 'startWith' to the section you want to display initially,

where 0
==

first.

function initMenu()
{
var menus, menu, text, a, i, startWith=1; // Sets initially displayed
section
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++)
{
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");

menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
a.id="mLink"+i
if(i==startWith)

getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di

Stephen,

thanks for taking the time to help me out with this one, unfortunatly
my knowledge of javascript is rubbish, hense my asking for some help.
Your 'kludge' as you put it works great so thanks in advance! Although
I have a couple of other questions,.. is there an easy way to add these
two features...

(1) The script is currently, held in an external javascript document,
so is there any way of putting the 'StartWith' trigger onto the

page?

Delete the declaration of startWith in the initMenu() function, then define
startWith within script tags in the page containing the menu:

<script type='text/javascript'>
var startWith=1;

(2) Also in some cases the menu needs to display as default i.e with no
sub menu displayed.

Then under those circumstances, assign startWith a value of -1.

Or...

function initMenu(item)
{
var menus, menu, text, a, i;
if (item) item = new RegExp(item);
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++)
{
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
if (item && item.test(text.nodeValue))
a.onclick();
}
}

...and in specific pages:

if(document.createElement)
window.onload = function()
{
initMenu('Menu Item 3');
}