How do I change the li class dynamically using a menu.html includefile?

PLEASE HELP!

I would like to include a UL as a menu, styled by an included CSS
Style Sheet.

The problem I am having is how do I dynamically set the "active" page
class using JavaScript to change each time I click on a new list
item? I have found a bunch of examples but none that really
accomplish what I need.

As I choose from the list, I want the current page selected, evm.htm
for example, to have the following automatically populate using JS so
that the included menu HTML would look like this after tab 2 is
selected:


<ul id="menu">
<li><a href="home.htm">Home</a></li>
<li class="active"><a href="evm.htm">EVM</a></li>
<li><a href="finance.shtml">Finance</a></li>
<li><a href="investments.shtml">Investments</a></li>
<li><a href="OpsAdmin.shtml">Administration</a></li>
<li><a href="subsidiaries.shtml">Subsidiaries</a></li>
</ul>





Home Page: index.shtml

Include File: <!--#include file="menu.html" -->

menu.html
<ul id="menu">
<li><a href="home.htm">Home</a></li>
<li><a href="evm.htm">EVM</a></li>
<li><a href="finance.shtml">Finance</a></li>
<li><a href="investments.shtml">Investments</a></li>
<li><a href="OpsAdmin.shtml">Administration</a></li>
<li><a href="subsidiaries.shtml">Subsidiaries</a></li>
</ul>


CSS (separate file as well)


#menu {
float: right;
background: #fff url(../images/barul.gif) no-repeat bottom right;
color: #808080;
padding: 18px 1px 11px 0;
margin: 0;
}
#menu li{
list-style-type:none;
}

#menu li a{
color:#666;
background:url(baractive.gif) transparent top right no-repeat;
display:block;
padding:0 10px 0 0;
}


#menu li.active,
#menu li.over,
#menu li:hover
{
color: #0066FF;
background: #f8f8f8;
background-color: #EAEAEA;
}
#menu li strong,
ul#menu li.active a{
background: #fff url(../images/baractive_blue4.gif) no-repeat bottom
left;
}
ul#menu li.over a,
ul#menu li:hover a
{
background: #fff url(../images/baractive_blue4.gif) no-repeat bottom
left;
font-weight: bolder;
padding: 14px 18px 14px 18px;
color:#000000;
background-color: #FFFFFF;
text-decoration: none; background:none;
}

Response to MLD <mldboston (AT) gmail (DOT) com>:

PLEASE HELP!

That screams, "Please help me do my homework!"

I would like to include a UL as a menu, styled by an included CSS
Style Sheet.

The problem I am having is how do I dynamically set the "active"
page class using JavaScript to change each time I click on a new
list item? I have found a bunch of examples but none that really
accomplish what I need.

As I choose from the list, I want the current page selected,
evm.htm for example, to have the following automatically populate
using JS so that the included menu HTML would look like this after
tab 2 is selected:

Are you dynamically switching these tabs? If not, your issue is
server-side and you'd need to detect the current URL and apply the
class server-side.

Otherwise:

http://developer.mozilla.org/en/docs...ment.className

....should suffice.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

This runs on the window.onload

I am new to javascript/server script and what runs where and when.
The code below doesn't change the class name, what am I doing wrong?



function getCurrent()
{
if(!document.getElementById || !document.createTextNode){return;}
var n=document.getElementById('menu');
if(!n){return;}
var lis=n.getElementsByTagName('li');
for (var i=0;i<lis.length;i++)
{

if(window = document){
this.className=this.className=='active'?'active':' ';
this.className+=this.className?' '+'active':'active';
}
}
}

Response to MLD <mldboston (AT) gmail (DOT) com>:

if(window = document){

Assignment, not comparison.

this.className=this.className=='active'?'active':' ';
this.className+=this.className?'
'+'active':'active';

Find out how to use "this" properly. You are not referencing your LI's
in this loop at all.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

Response to "-Lost" <maventheextrawords (AT) techie (DOT) com>:

Response to MLD <mldboston (AT) gmail (DOT) com>:

if(window = document){

Assignment, not comparison.

this.className=this.className=='active'?'active':' ';
this.className+=this.className?'
'+'active':'active';

Find out how to use "this" properly. You are not referencing your
LI's in this loop at all.

Oh, and for the record... I did not mean to imply that, that was all
there was wrong with your code.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

You are not adding any value or ANSWERING my questions or showing me
HOW to do what I need to do... All you are doing is pointing out what
I am doing wrong.

thanks anyway.
M


On Jan 2, 11:57 am, "-Lost" <maventheextrawo... (AT) techie (DOT) com> wrote:

Response to "-Lost" <maventheextrawo... (AT) techie (DOT) com>:

Response to MLD <mldbos... (AT) gmail (DOT) com>:

if(window = document){

Assignment, not comparison.

this.className=this.className=='active'?'active':' ';
this.className+=this.className?'
'+'active':'active';

Find out how to use "this" properly. You are not referencing your
LI's in this loop at all.

Oh, and for the record... I did not mean to imply that, that was all
there was wrong with your code.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

MLD said the following on 1/2/2008 12:36 PM:

You are not adding any value or ANSWERING my questions or showing me
HOW to do what I need to do... All you are doing is pointing out what
I am doing wrong.

thanks anyway.

Umm, go slap yourself and wake up. This is Usenyt, you ask a question,
it gets discussed. If you get an answer, great. If you don't, then you
don't. This is not your personal help desk.
TGFY.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

You know what, you can all go and have a WONDERFUL day! If you don't
have anything nice to say, why don't you keep your big mouth shut.
If you don't have an answer, don't use this board to harass people
with your unresolved anger issues.

I am not looking for a personal help desk, I am looking for someone
who might have a simple answer which I already figured out in between
this nonsense.

You must be male and on most days spending most of your time alone.

I will now drop this post and you can say whatever else you want and I
am not going to read it, so save all your sarcasm and useless words
for someone who actually cares...

happy new year to you
xoxo


On Jan 2, 12:47 pm, Randy Webb <HikksNotAtH... (AT) aol (DOT) com> wrote:

MLD said the following on 1/2/2008 12:36 PM:



You are not adding any value or ANSWERING my questions or showing me
HOW to do what I need to do... All you are doing is pointing out what
I am doing wrong.

thanks anyway.

Umm, go slap yourself and wake up. This is Usenyt, you ask a question,
it gets discussed. If you get an answer, great. If you don't, then you
don't. This is not your personal help desk.
TGFY.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

MLD said:
[snip]

[Prepended line numbers]

1 function getCurrent()
2 {
3 if(!document.getElementById || !document.createTextNode){return;}
4 var n=document.getElementById('menu');
5 if(!n){return;}
6 var lis=n.getElementsByTagName('li');
7 for (var i=0;i<lis.length;i++)
8 {
9
10 if(window = document){
11 this.className=this.className=='active'?'active':' ';
12 this.className+=this.className?' '+'active':'active';
13 }
14 }
15 }


If I could get a little more clarification on exactly what it is you're
trying to do in the evaluations in the for loop, I'd be happy to give
you a hand.

What is it you are trying to do with the two ternary operators in the
middle there?


Here are some things I did notice:

globally:

What is going to happen if the menu element is not found because it
hasn't loaded into the DOM quite yet? Different browsers use onload
differently, so it's a distinct possibility that the element would be
there, just not yet, and then you'd skip over your whole function.


The variable names are a tad on the obscure side. A little more
descriptive naming will serve you well when you need to maintain this
code in a month or six.

"menu" instead of "n"
"menuItems" instead of "lis"

IMHO, of course.

line 3:
You don't call document.createTextNode in the function, so feature
detection for it seems extraneous to your purpose. I think feature
testing for document.getElementById is enough. And if I recall, there is
a better way than that, but I cannot recall.

line 5:
In checking for an element, I find that this serves me better:

if (typeof n == "object") {
// element is there and grabbed
} else {
// no element (or not element _yet_)
}

line 10:
The single "=" in this line assigns instead of compares. In either case,
this isn't going to help a bunch in checking to see if your elements are
available. Check for the elements specifically, or for their next
sibling to make sure they exist.

line 11, 12:
I think you're trying to say "if this li has no class, name it active,
and if it has a class, append ' active' to it. If that is indeed the
case, then don't overcomplicate your life with the ternaries when you're
just starting out. A simple if would suffice:

if (lis[i].className.length) {
lis[i].className += ' active';
} else {
lis[i].className = 'active';
}


I'm curious to know if this is a first attempt, and if so, you've come
to the right place. I understand a lot of the things people say here can
be upsetting at times, but Randy had it right when he told you this is
usenet, and an unmoderated group with some of the best javascript coders
I've ever had the privilege to be torn apart by residing here. Sometimes
there is a price to be paid for that kind of skill and talent.

Them telling you what's wrong I_is_ helping you. I'm one of the junior
guys around here, and I am always amazed when I post code that I've been
using forever and I get trampled by people who know better. It has
improved my Javascript quite a bit, and continues to do so. And they're
good guys.

Watch, someone will come and tell us how the code I just displayed could
be better, too. And they'll tell me by telling me what I did wrong, not
right. Once I know what's wrong, I can modify on my own research, and
then ask them to have another look, and the process continues.

Ok, enough pontification from me. Hope this helps.

~A!

On Jan 2, 2:42*pm, Anthony Levensalor <killf... (AT) mypetprogrammer (DOT) com>
wrote:

MLD said:
[snip]

[Prepended line numbers]

1 function getCurrent()
2 {
3 * if(!document.getElementById || !document.createTextNode){return;}
4 * var n=document.getElementById('menu');
5 * if(!n){return;}
6 * var lis=n.getElementsByTagName('li');
7 * for (var i=0;i<lis.length;i++)
8 * {
9
10 * * *if(window = document){
11 * * * * * * *this.className=this.className=='active'?'active': '';
12 * * * * * * * * * * * * * * *this.className+=this.className?' '+'active':'active';
13 * * *}
14 *}
15 }

If I could get a little more clarification on exactly what it is you're
trying to do in the evaluations in the for loop, I'd be happy to give
you a hand.

What is it you are trying to do with the two ternary operators in the
middle there?

It appears to be a very clumsy attempt to add or remove a class.
Another question is what are they trying to do with the "this"
identifier. Still another is why this isn't being done server side.

Here are some things I did notice:

globally:

What is going to happen if the menu element is not found because it
hasn't loaded into the DOM quite yet? Different browsers use onload
differently, so it's a distinct possibility that the element would be
there, just not yet, and then you'd skip over your whole function.

No. When the load event fires, the element is there or it is not.
It's insertion can't be pending at that point.

The variable names are a tad on the obscure side. A little more
descriptive naming will serve you well when you need to maintain this
code in a month or six.

"menu" instead of "n"
"menuItems" instead of "lis"

IMHO, of course.

line 3:
You don't call document.createTextNode in the function, so feature
detection for it seems extraneous to your purpose. I think feature

It is certainly unneeded.

testing for document.getElementById is enough. And if I recall, there is
* a better way than that, but I cannot recall.

See the isHostMethod function in the CWR repository.

line 5:
In checking for an element, I find that this serves me better:

if (typeof n == "object") {
* *// element is there and grabbed} else {

* *// no element (or not element _yet_)

No element for sure if this code runs in a load listener.

}

The gEBI method will return an element object or null, so testing by
boolean type conversion is appropriate.

line 10:
The single "=" in this line assigns instead of compares. In either case,

Of course, no operator will make sense of that line.

this isn't going to help a bunch in checking to see if your elements are
available. Check for the elements specifically, or for their next
sibling to make sure they exist.

It appears the OP was trying to determine if the anchor linked to the
current location. Why they are comparing the window and document
objects (or trying to assign document to window) is anyone's guess.
As the OP has since scuttled away, that mystery will likely remain
unsolved.

line 11, 12:
I think you're trying to say "if this li has no class, name it active,
and if it has a class, append ' active' to it. If that is indeed the
case, then don't overcomplicate your life with the ternaries when you're
just starting out. A simple if would suffice:

if (lis[i].className.length) {
* *lis[i].className += ' active';} else {

* *lis[i].className = 'active';

}

See the addClass function in the CWR repository.

I'm curious to know if this is a first attempt, and if so, you've come

It looks like a homework assignment to me.

to the right place. I understand a lot of the things people say here can
be upsetting at times, but Randy had it right when he told you this is

From the righteously indignant tone of the OP's responses, it appears
that the right place is wherever they can get their work done for them
without comment. If that place exists, this certainly isn't it.

[snip]

Ok, enough pontification from me. Hope this helps.

There is no helping some people.