June 26th, 2003, 01:01 PM
-
active navigation state w/JavaScript
In the following file I have a simple list of nav links. They all have rollovers and it is set to change to an active state(yellow) when it is clicked. However, only one nav item should be active(yellow) at any given time, which it currently isn't. It should perform the same way the active state works in CSS except in CSS when you click anywhere else on the page and loose focus you loose the active state. Any help would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
a.MainNav:link {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
a.MainNav:visited {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
a.MainNav:active {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #FFFF00;
text-decoration: none;
}
a.MainNav:hover {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #92B7D1;
text-decoration: none;
}
a.activenav:link {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #FFFF00;
text-decoration: none;
}
a.activenav:visited {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #FFFF00;
text-decoration: none;
}
a.activenav:active {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #FFFF00;
text-decoration: none;
}
a.activenav:hover {
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #FFFF00;
text-decoration: none;
}
</style>
</head>
<body bgcolor="#000000">
<a href="#" onclick="this.className='activenav';" class="MainNav">Link 1</a> <br>
<a href="#" onclick="this.className='activenav';" class="MainNav">Link 2</a> <br>
<a href="#" onclick="this.className='activenav';" class="MainNav">Link 3</a> <br>
<a href="#" onclick="this.className='activenav';" class="MainNav">Link 4</a> <br>
<a href="#" onclick="this.className='activenav';" class="MainNav">Link 5</a> <br>
</body>
</html>
June 26th, 2003, 01:11 PM
-
See if this helps...
Code:
<script type="text/javascript">
function hilite(oLink) {return
var link, i = 0, links = document.getElementsByTagName('a');
while (link = links.item(i++))
if (link == oLink) link.className = 'activenav';
else link.className = 'MainNav';
}
</script>
</head>
<body bgcolor="#000000">
<a href="#" onclick="hilite(this)" class="MainNav">Link 1</a> <br>
<a href="#" onclick="hilite(this)" class="MainNav">Link 2</a> <br>
<a href="#" onclick="hilite(this)" class="MainNav">Link 3</a> <br>
<a href="#" onclick="hilite(this)" class="MainNav">Link 4</a> <br>
<a href="#" onclick="hilite(this)" class="MainNav">Link 5</a> <br>
</body>
June 26th, 2003, 01:29 PM
-
It now performs the same way as using the CSS active state. It sets only one nav item to the active state or class, but once you click anywhere else on the page and loose focus you loose the active state. Is there any other work around for this? Any help would be greatly appreciated.
June 26th, 2003, 01:57 PM
-
Oops...you're correct. I'm sure there's a shorter way of doing this (multiple class names) but, see if it helps:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
a {
display: block;
width: 36px;
margin: 4px 0px;
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
a.MainNav:link {
color: #ffffff;
}
a.MainNav:visited {
color: #ffffff;
}
a.MainNav:hover {
color: #92B7D1;
}
a.activenav:link {
color: #ffff00;
}
a.activenav:visited {
color: #ffff00;
}
a.activenav:hover {
color: #ffff00;
}
</style>
<script type="text/javascript">
function hilite(oLink) {
var link, i = 0, links = document.getElementsByTagName('a');
while (link = links.item(i++))
if (link == oLink) link.className = 'activenav';
else link.className = 'MainNav';
}
</script>
</head>
<body bgcolor="#000000">
<a href="#" onclick="hilite(this)" class="MainNav">Link 1</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 2</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 3</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 4</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 5</a>
</body>
</html>
Last edited by adios; June 26th, 2003 at 02:00 PM.
June 26th, 2003, 02:10 PM
-
Adios,
this works great as is but theres one thing i left out. on the page there are other links as well. i only want this effect to occur with the given navigation links. but when i click on one of the nav links all of the links on the page change their class as well. Are there any other workarounds? Thanks once again for all your help adios.
June 26th, 2003, 02:36 PM
-
This should fix it, a lot more efficient as well.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
a:link {
color: darkorange;
}
a:visited {
color: orange;
}
a:hover {
color: tomato;
}
a:active {
color: crimson;
}
a.MainNav:link {
display: block;
width: 36px;
margin: 4px 0px;
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
a.MainNav:visited {
color: #ffffff;
}
a.MainNav:hover {
color: #92B7D1;
}
a.activenav:link {
display: block;
width: 36px;
margin: 4px 0px;
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
color: #ffff00;
text-decoration: none;
}
a.activenav:visited {
color: #ffff00;
}
a.activenav:hover {
color: #ffff00;
}
</style>
<script type="text/javascript">
hilite.current_link = null;
function hilite(oLink) {
oLink.className = 'activenav';
if (hilite.current_link)
hilite.current_link.className = 'MainNav';
hilite.current_link = oLink;
}
</script>
</head>
<body bgcolor="#000000">
<a href="#" onclick="hilite(this)" class="MainNav">Link 1</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 2</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 3</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 4</a>
<a href="#" onclick="hilite(this)" class="MainNav">Link 5</a>
<hr>
<a href="#">plain old link</a>
</body>
</html>
June 26th, 2003, 02:44 PM
-
Why dont you just use " :Active " instead of javascript
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
a {
display: block;
width: 36px;
margin: 4px 0px;
font-family: arial, tahoma, verdana;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
a.MainNav:link {
color: #ffffff;
}
a.MainNav:visited {
color: #ffffff;
}
a.MainNav:hover {
color: #92B7D1;
}
a.MainNav:Active {
color: #ffff00;
}
</style>
</head>
<body bgcolor="#000000">
<a href="#" class="MainNav">Link 1</a>
<a href="#" class="MainNav">Link 2</a>
<a href="#" class="MainNav">Link 3</a>
<a href="#" class="MainNav">Link 4</a>
<a href="#" class="MainNav">Link 5</a>
</body>
</html>
Eclipce
June 26th, 2003, 02:46 PM
-
Just Perfect! ... a million thanks for your help once again Adios.