By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,652 Members | 1,451 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,652 IT Pros & Developers. It's quick & easy.

Javascript menu modifications

P: n/a
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[i], filter))
result[result.length] = children[i];
}
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[i];
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[i];
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;

Jul 23 '05 #1
Share this Question
Share on Google+
16 Replies


P: n/a


Jay <jv*****@hotmail.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
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[i];
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.getEl ementById(a.id))).style.di
splay = "block";
}

}

--
S.C. http://makeashorterlink.com/?H3E82245A

Jul 23 '05 #2

P: n/a
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[i];
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.getEl ementById(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

Jul 23 '05 #3

P: n/a


Jay <jv*****@hotmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com...
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[i];
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.getEl ementById(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;
</script>

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

--
S.C. http://makeashorterlink.com/?H3E82245A

Jul 23 '05 #4

P: n/a
Stephen Chalmers wrote:
Jay <jv*****@hotmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com...
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[i];
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.getEl ementById(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;
</script>

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

--
S.C. http://makeashorterlink.com/?H3E82245A


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[i];
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');
}

Jul 23 '05 #5

P: n/a
Stephen,

I have been unable to get your last chunk of code to work.. it maybe
that i've
implemented it wrong or something the actual page is here..

Page with your code
http://www.supplyplan.co.uk/betasite/index.asp

External javascript
http://www.supplyplan.co.uk/betasite/scr/navigation.js

Any ideas?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #6

P: n/a
Stephen,

Hope this doesn't double post (as the last one seemed not to work!)

I have tried to implement your last chunk of code, but it doesn't seem
to
work, this may be due to me implementing it wrong!

Page here...
http://www.supplyplan.co.uk/betasite/index.asp

External JS here...
http://www.supplyplan.co.uk/betasite/scr/navigation.js

Any ideas?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #7

P: n/a
Stephen,

you still about, any chance of helping me finish this one?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #8

P: n/a
James Bates wrote:
Stephen,

you still about, any chance of helping me finish this one?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!


My name isn't 'James' but I took the time to look at your problem. Not
clear why you posted in a public forum...

Jul 23 '05 #9

P: n/a
Jay
RobB,

I'm sorry what was the problem, with posting on this forum? I was hoping
to
get some help to finish my javascript problem, I though it would be
useful to
keep it within the thread incase someone else found it useful!

Did you have a look, at the code? Can you see what the problem might be
with the last bit of code?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #10

P: n/a
Jay wrote:
RobB,

I'm sorry what was the problem, with posting on this forum? I was hoping to
get some help to finish my javascript problem, I though it would be
useful to
keep it within the thread incase someone else found it useful!

Did you have a look, at the code? Can you see what the problem might be with the last bit of code?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!


Jeez...my name is right there. Just look up. #:o

I posted an alternative. Would be glad to explain it but it's a bit
difficult if you can't see that earlier post.

Jul 23 '05 #11

P: n/a
Jay
RobB

Sorry if I'm getting your username wrong!! All I get next to your posts
is..
From: RobB, Date Posted: 2/16/2005 2:33:00 PM

Where did you post that explanation, because I can't see it at all?!! is
there
any reason why that should be.

Are you viewing this thread from http://www.developersdex.com ? As I
notice
that these forums are fed to several sites!

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #12

P: n/a
Jay wrote:
RobB

Sorry if I'm getting your username wrong!! All I get next to your posts
is..
From: RobB, Date Posted: 2/16/2005 2:33:00 PM

Where did you post that explanation, because I can't see it at all?!! is
there
any reason why that should be.

Are you viewing this thread from http://www.developersdex.com ? As I
notice that these forums are fed to several sites!
NO! This forum isn't fed to several sites, several sites hijack Usenet,
claim its a forum, and then unsuspecting people as yourself assume that
its a forum when it's not. Go to :
<URL:
http://groups-beta.google.com/group/...n&lr=&ie=UTF-8


And you will see the archives of comp.lang.javascript, which is where
you are actually posting to, and you will undoubtedly find your posts there.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #13

P: n/a
Jay wrote:
RobB

Sorry if I'm getting your username wrong!! All I get next to your posts
is..
From: RobB, Date Posted: 2/16/2005 2:33:00 PM

Where did you post that explanation, because I can't see it at all?!! is
there
any reason why that should be.


Make the following into a single line URL (cut 'n paste into say
notepad, remove new lines), then paste into your browser's
address bar to see the entire thread:

http://groups-beta.google.com/group/...ng.javascript/
browse_frm/thread/1a55751b92390295/1e4744fd429479a0?
tvc=1&q=Re:+Javascript+menu+modifications&_done=%2 Fgroup%2
Fcomp.lang.javascript%2Fsearch%3Fgroup%3Dcomp.lang .javascript%26
q%3DRe:+Javascript+menu+modifications%26qt_g%3D1%2 6searchnow%3
DSearch+this+group%26&_doneTitle=Back+to+Search&sc rollSave=&&
d#1e4744fd429479a0
It's broken 'cos many group hijackers simply trunkate long URLs.
Hopefully manual wrapping will avoid that...
--
Rob
Jul 23 '05 #14

P: n/a
Resubmitted:

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[i];
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');
}

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #15

P: n/a
Rob B wrote:
Resubmitted:

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[i];
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');
}


If you are going to post code that will error-out and fail
uncontrollably on known user agents (due to inadequate feature
detection), the least you should do is list the subset of browsers on
which you know it should work, so that readers can appreciate how far
short of being cross-browser they can expect your code to be.

Richard.
Jul 23 '05 #16

P: n/a
Richard Cornford wrote:
Rob B wrote:
Resubmitted:

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[i];
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');
}


If you are going to post code that will error-out and fail
uncontrollably on known user agents (due to inadequate feature
detection), the least you should do is list the subset of browsers on
which you know it should work, so that readers can appreciate how far
short of being cross-browser they can expect your code to be.

Richard.


If I understand you correctly, there's a simple answer: it's not my
('your') code. The only thing I appended to it was a regular expression
construction and method, invocation of an HTML event handler
explicitly, and extraction of a text node's cdata for comparison. Are
there any user agents that will render the original menu yet fail with
these simple additions?

I agree that 'if (document.createElement)...' is insufficient sniffing
for an application of this sort - but I don't feel it's the
responsibility of contributors here to rewrite third-party scripts to
make them less prone to 'error-out and fail'. Most - OK, *some* - of
these scripts come with caveats about their coverage, and users will
hopefully be aware of these.

Jul 23 '05 #17

This discussion thread is closed

Replies have been disabled for this discussion.