Free Web Developer Tools
Advanced Search

Thread: active navigation state w/JavaScript

    June 26th, 2003, 01:01 PM
    #1
  1. No Profile Picture
    onvio
    Contributing User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14

    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>
    2. June 26th, 2003, 01:11 PM
    #2
  2. No Profile Picture
    adios
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)
    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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>
    3. June 26th, 2003, 01:29 PM
    #3
  3. No Profile Picture
    onvio
    Contributing User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14
    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.
    4. June 26th, 2003, 01:57 PM
    #4
  4. No Profile Picture
    adios
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)
    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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.
    5. June 26th, 2003, 02:10 PM
    #5
  5. No Profile Picture
    onvio
    Contributing User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14
    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.
    6. June 26th, 2003, 02:36 PM
    #6
  6. No Profile Picture
    adios
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)
    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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>
    7. June 26th, 2003, 02:44 PM
    #7
  7. No Profile Picture
    Eclipce
    Contributing User
    Devshed Novice (500 - 999 posts)
    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    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
    Baptism By The Scriptures | Fifty Objections to Baptism Answered | HTML Bible | God's Salvation Plan

    Lifetime Residual Income
    8. June 26th, 2003, 02:46 PM
    #8
  8. No Profile Picture
    onvio
    Contributing User
    Devshed Newbie (0 - 499 posts)
    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14
    Just Perfect! ... a million thanks for your help once again Adios.
« Previous Thread | Next Thread »
IMN logo majestic logo threadwatch logo seochat tools logo