Easy JavaScript Problem (i hope)

T

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?
 
E

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?
Click to expand...

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';
 
T

thetechturf.com

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';
Click to expand...

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

Evertjan.

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:
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.
Click to expand...

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>
==========================================================
 
T

thetechturf.com

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:
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.
Click to expand...

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>
==========================================================
Click to expand...

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

thetechturf.com

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:
Click to expand...
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.
Click to expand...
Try this [I changed active to hover, easier to test]:
Click to expand...
=========== test.html ==================================
<style type='text/css'>
.firstClass a:hover {color: #f00;background-color: #123456;}
.secondClass a:hover {color: #fff;background-color: #485573;}
</style>
Click to expand...
<script type='text/javascript'>
function doit(){
document.getElementById('navigation').className = 'secondClass';}

<body>
<div id="navigation" class='firstClass'>
<a href=''>========= hover test ===========</a>
</div>
Click to expand...
<button onclick='doit()'>click me</button>
==========================================================
Click to expand...

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.
Click to expand...

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

thetechturf.com

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.
Click to expand...

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

Evertjan.

thetechturf.com wrote on 17 mrt 2007 in comp.lang.javascript:
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.
Click to expand...

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?
 
T

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Horizontal menu bar header 2
I need help fixing my website 2
Need help with code on website (noob) 2
Is it possible an iframe can overlapp another? 3
Help needed with code 5
Only one table shows up with the information 2
Recreating CNN.com 4

Members online

Total: 26 (members: 1, guests: 25)
Robots: 191

Forum statistics

Threads
473,773
Messages
2,569,594
Members
45,120
Latest member
ShelaWalli

Latest Threads

Top