Easy JavaScript Problem (i hope)

[thetechturf.com]

I have got a small problem getting my dropdown menu to work. I want to
change the style with javascript.

Here is the code in my HTML:

<div id="navigation">

<ul>
<li id="lnot"><a href="index.html">Home</a></li>
<li id="lnot"><a href="graphics.html">Graphics</a></li>
<li id="lnot"><a href="templates.html">Templates</a></li>
<li id="lselected"><a href="software.html"
onMouseover="dropdownmenu(this, event, menu1, '150px')"
onMouseout="delayhidemenu()">Software</a></li>
<li id="lnot"><a href="services.html">Services</a></li>
<li id="lnot"><a href="contact.html" onmouseover="dropdownmenu(this,
event, menu2, '150px')" onMouseout="delayhidemenu()">Contact</a></li>

</ul>

</div>

Here is the code in my javascipt file:
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

How do I apply the style (this is in my style sheet):
#navigation a:active
{
color: #ffffff;
background-color: #485573;
}

On the javascipt function delayhidemenu so my background will change
when the menu dissappears?

[Evertjan.]

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

I have got a small problem getting my dropdown menu to work. I want to
change the style with javascript.

Here is the code in my HTML:

<div id="navigation">

<ul>
<li id="lnot"><a href="index.html">Home</a></li>
<li id="lnot"><a href="graphics.html">Graphics</a></li>
<li id="lnot"><a href="templates.html">Templates</a></li>
<li id="lselected"><a href="software.html"
onMouseover="dropdownmenu(this, event, menu1, '150px')"
onMouseout="delayhidemenu()">Software</a></li>
<li id="lnot"><a href="services.html">Services</a></li>
<li id="lnot"><a href="contact.html"
onmouseover="dropdownmenu(this,
event, menu2, '150px')" onMouseout="delayhidemenu()">Contact</a></li>

</ul>

</div>

Here is the code in my javascipt file:
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

How do I apply the style (this is in my style sheet):
#navigation a:active
{
color: #ffffff;
background-color: #485573;
}

On the javascipt function delayhidemenu so my background will change
when the menu dissappears?

Use different classes:

..firstClass a:active {color: #f00;background-color: #123456;}
..secondClass a:active {color: #fff;background-color: #485573;}
...............

<div id="navigation" class='firstClass'>
......

document.getElementById('navigation').className = 'secondClass';

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[thetechturf.com]

On Mar 17, 12:33 pm, "Evertjan." <[e-mail]>
wrote:

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

I have got a small problem getting my dropdown menu to work. I want to
change the style with javascript.

Here is the code in my HTML:

<div id="navigation">

<ul>
<li id="lnot"><a href="index.html">Home</a></li>
<li id="lnot"><a href="graphics.html">Graphics</a></li>
<li id="lnot"><a href="templates.html">Templates</a></li>
<li id="lselected"><a href="software.html"
onMouseover="dropdownmenu(this, event, menu1, '150px')"
onMouseout="delayhidemenu()">Software</a></li>
<li id="lnot"><a href="services.html">Services</a></li>
<li id="lnot"><a href="contact.html"
onmouseover="dropdownmenu(this,
event, menu2, '150px')" onMouseout="delayhidemenu()">Contact</a></li>

</ul>

</div>

Here is the code in my javascipt file:
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

How do I apply the style (this is in my style sheet):
#navigation a:active
{
color: #ffffff;
background-color: #485573;
}

On the javascipt function delayhidemenu so my background will change
when the menu dissappears?

Use different classes:

.firstClass a:active {color: #f00;background-color: #123456;}
.secondClass a:active {color: #fff;background-color: #485573;}
..............

<div id="navigation" class='firstClass'>
.....

document.getElementById('navigation').className = 'secondClass';

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Can you give me more detail?(where to put the data) I tried to get it
to work but no luck. Like I said, I have a css file, a javascript
file, and the HTML file.

[Evertjan.]

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

>Use different classes:

.firstClass a:active {color: #f00;background-color: #123456;}
.secondClass a:active {color: #fff;background-color: #485573;}
..............

<div id="navigation" class='firstClass'>
.....

document.getElementById('navigation').className = 'secondClass';

Can you give me more detail?(where to put the data) I tried to get it
to work but no luck. Like I said, I have a css file, a javascript
file, and the HTML file.

That is the wrong approach, meseems, test these things ou in a single
html file, and if all goes well, you van make seperate files.

Try this [I changed active to hover, easier to test]:

=========== test.html ==================================
<style type='text/css'>
.firstClass a:hover {color: #f00;background-color: #123456;}
.secondClass a:hover {color: #fff;background-color: #485573;}
</style>

<script type='text/javascript'>
function doit(){
document.getElementById('navigation').className = 'secondClass';
}
</script>
</head>

<body>
<div id="navigation" class='firstClass'>
<a href=''>========= hover test ===========</a>
</div>

<button onclick='doit()'>click me</button>
================================================== ========
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[thetechturf.com]

On Mar 17, 2:23 pm, "Evertjan." <[e-mail]:

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

Use different classes:

.firstClass a:active {color: #f00;background-color: #123456;}
.secondClass a:active {color: #fff;background-color: #485573;}
..............

<div id="navigation" class='firstClass'>
.....

document.getElementById('navigation').className = 'secondClass';

Can you give me more detail?(where to put the data) I tried to get it
to work but no luck. Like I said, I have a css file, a javascript
file, and the HTML file.

That is the wrong approach, meseems, test these things ou in a single
html file, and if all goes well, you van make seperate files.

Try this [I changed active to hover, easier to test]:

=========== test.html ==================================
<style type='text/css'>
.firstClass a:hover {color: #f00;background-color: #123456;}
.secondClass a:hover {color: #fff;background-color: #485573;}
</style>

<script type='text/javascript'>
function doit(){
document.getElementById('navigation').className = 'secondClass';}

</script>
</head>

<body>
<div id="navigation" class='firstClass'>
<a href=''>========= hover test ===========</a>
</div>

<button onclick='doit()'>click me</button>
================================================== ========

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Take a look at:
http://thetechturf.com/software2.html
I want the hover to still work when I drop down the menu.
I am still trying to get this to work.

[thetechturf.com]

On Mar 17, 2:28 pm, "thetechturf.com" <[e-mail]>
wrote:

On Mar 17, 2:23 pm, "Evertjan." <[e-mail]:

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

>Use different classes:

>.firstClass a:active {color: #f00;background-color: #123456;}
>.secondClass a:active {color: #fff;background-color: #485573;}
>..............

><div id="navigation" class='firstClass'>
>.....

>document.getElementById('navigation').className = 'secondClass';

Can you give me more detail?(where to put the data) I tried to get it
to work but no luck. Like I said, I have a css file, a javascript
file, and the HTML file.

That is the wrong approach, meseems, test these things ou in a single
html file, and if all goes well, you van make seperate files.

Try this [I changed active to hover, easier to test]:

=========== test.html ==================================
<style type='text/css'>
.firstClass a:hover {color: #f00;background-color: #123456;}
.secondClass a:hover {color: #fff;background-color: #485573;}
</style>

<script type='text/javascript'>
function doit(){
document.getElementById('navigation').className = 'secondClass';}

</script>
</head>

<body>
<div id="navigation" class='firstClass'>
<a href=''>========= hover test ===========</a>
</div>

<button onclick='doit()'>click me</button>
================================================== ========

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Take a look at:http://thetechturf.com/software2.html
I want the hover to still work when I drop down the menu.
I am still trying to get this to work.

Some clarification on that last post, If you look, when you drop down
the menu on "Contact", "Contact" will not retain the hover color. I do
not want the hover color do disappear until I am off of the dropdown
menu, OR click something on the menu.

[Evertjan.]

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

>=========== test.html ==================================
<style type='text/css'>
.firstClass a:hover {color: #f00;background-color: #123456;}
.secondClass a:hover {color: #fff;background-color: #485573;}
</style>

<script type='text/javascript'>
function doit(){
document.getElementById('navigation').className = 'secondClass';}

</script>
</head>

<body>
<div id="navigation" class='firstClass'>
<a href=''>========= hover test ===========</a>
</div>

<button onclick='doit()'>click me</button>
================================================= =========

Take a look at:
http://thetechturf.com/software2.html
I want the hover to still work when I drop down the menu.
I am still trying to get this to work.

No, I am not going to do your work.
The above should set you to workt yourself.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[thetechturf.com]

On Mar 17, 2:54 pm, "Evertjan." <[e-mail]:

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

=========== test.html ==================================
<style type='text/css'>
.firstClass a:hover {color: #f00;background-color: #123456;}
.secondClass a:hover {color: #fff;background-color: #485573;}
</style>

<script type='text/javascript'>
function doit(){
document.getElementById('navigation').className = 'secondClass';}

</script>
</head>

<body>
<div id="navigation" class='firstClass'>
<a href=''>========= hover test ===========</a>
</div>

<button onclick='doit()'>click me</button>
================================================== ========

Take a look at:
http://thetechturf.com/software2.html
I want the hover to still work when I drop down the menu.
I am still trying to get this to work.

No, I am not going to do your work.
The above should set you to workt yourself.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

I appreciate the help, but you musta told me something wrong, because
its not working. I can get the test file to work, but as soon as I try
to implement it, it doesn't do anything. I'm just gonna forget it and
go with it.

[Evertjan.]

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

>No, I am not going to do your work.
The above should set you to workt yourself.

I appreciate the help, but you musta told me something wrong, because
its not working. I can get the test file to work, but as soon as I try
to implement it, it doesn't do anything. I'm just gonna forget it and
go with it.

If the testfile works, jour jump to youe application is to large.

Try to expand the idea in small debuggable tests, and you wil not only get
to it working, but also learn.

btw, why did you mention is was an easy problem?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[thetechturf.com]

I will plug away at it in my spare time. I blew most of today trying
to get it to work. The reason I thought it was going to be easy is
because I thought there was an easier way to do it. It seemed like a
simple problem, therefore I thought a simple solution. GUESS NOT! Well
anyway, thanks for you help.

Bryan Burkholder
www.thetechturf.com

Evertjan. wrote:

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:

No, I am not going to do your work.
The above should set you to workt yourself.

I appreciate the help, but you musta told me something wrong, because
its not working. I can get the test file to work, but as soon as I try
to implement it, it doesn't do anything. I'm just gonna forget it and
go with it.

If the testfile works, jour jump to youe application is to large.

Try to expand the idea in small debuggable tests, and you wil not only get
to it working, but also learn.

btw, why did you mention is was an easy problem?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)