css and js to change navigation links

A

Andrea

Hi everyone. I'm working on a navigation menu (in a frameset) that I
want to set the "active" link to black (the link that corresponds to
the page displayed in the right side of the frame) to black.

http://www.personal.psu.edu/axg251/wc

In the original external style sheet, I set the a:link, a:visited,
a:active, and a:hover. That works fine.

In the navigation page, I call a function for onclick - it sets the
link just clicked to black:

document.getElementById(id).style.color="black";

AND sets the link that was black back to the original color:

document.getElementById(oldclass).style.color="#394B8E";

The problem is then I lose the "hover" feature. I've tried instead of
setting the "color" in the function actually setting "a:link.color",
"a:visited.color", etc. (for link, visited, active, and hover) but it
doesn't work AND I read in this ng that you can't use a javascript
function to change a pseudo class. Is that true?

Here's the site: http://www.personal.psu.edu/axg251/wc

Note that the "hover" works until you've clicked on the link - then
it no longer works.

Any ideas are appreciated. I'm happy to post all the code here - I
thought it would be easier for you to just look from the site - if
not, just let me know.

Thanks for your help!
Andrea :)

p.s. It's a test site - I *know* it's ugly! ;-)
 
A

Andrea

I apologize for multi-posting. I wan't sure how to cross post - I'll
look into it for the next time I post.

I hope people will still respond with ideas if you have them on my
css/js issue.

thanks!
 
R

R

There's a nice (less javascript, more css) way to do this:

I have simplified your code to just include the stuff important to
your problem, and have moved the css inline just for explanation
purposes:

<html>
<head>
<style>
body{
background-color: #FFFFFF;
font-family: Verdana, Helvetica, Arial, "Sans Serif";
}

/*create two different classes 'selected' and 'unselected'. They will
define the two states of your links*/
..selected, .selected:link, .selected:visited, .selected:active,
..selected:hover{
color: black;font-weight: bold;text-decoration: none;
}
..unselected, .unselected:link, .unselected:visited, .unselected:active
{
color: #394B8E;font-weight: bold;text-decoration: none;
}
..unselected:hover{
color: #00B4FF;
}
</style>
<script type="text/javascript">
var oldClass=null
//when a link is selected simply change is class to 'selected'. Also
change the old link to 'unselected'.
// the null check is just to prevent the oldclass from being updated
when the page first loads
function changelink(navItem) {
if (oldClass != null){
oldClass.className = "unselected"
}else{
window.alert('notyet')
}
navItem.className = "selected"
oldClass=navItem;
}
</script>
</head>
<body>
<!-- set the default class to 'unselected' and when clicked just pass
the whole object 'this' -->
<a class="unselected" target="workshop_home" id="homepage"
href="content.html" onClick="changelink(this);">Home</a><br>
<br />
<a class="unselected" target="workshop_home" id="PSU"
href="http://www.psu.edu" onClick="changelink(this);">PSU</a> <br>
<a class="unselected" target="workshop_home" id="w3"
href="http://www.w3schools.com" onClick="changelink(this);">w3</a>
<br>
<a class="unselected" target="workshop_home" id="WC"
href="http://www.worldcampus.psu.edu"
onClick="changelink(this);">World Campus</a><br>
<a class="unselected" target="workshop_home" id="Page2"
href="page2.html" onClick="changelink(this);">Page2</a><br>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

R said:
There's a nice (less javascript, more css) way to do this:
Click to expand...

There is no more or less JavaScript/CSS involved than with my
solution, you are simply using another CSS-related property.
I have simplified your code to just include the stuff important to
your problem, and have moved the css inline just for explanation
purposes:
[...]
function changelink(navItem) {
if (oldClass != null){
oldClass.className = "unselected"
}else{
window.alert('notyet') ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Nonsense.

}
navItem.className = "selected"
oldClass=navItem;
Click to expand...
}
Click to expand...

The only problem is that assigning to the "className" property
does not work in all DHTML capable browsers, while assigning to
a specific format property, like "color" does. Besides, you
replied to my posting, without any reference to its content.
Please read <http://www.allmyfaqs.com/faq.pl?How_to_post>, thanks.


PointedEars
 

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

How to change the color in this script 1
Working on mobile css menu with plenty of frustration! 2
JS querySelector addEventListenerer index getElementsByClassName parent div only 1
I want to Display Excel As HTML In js 2
How to change star rating color on mouseenter, on mouseout, and on onclick 0
Using JS to verify registration info? 1
Color for hover over 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

No members online now.
Total: 38 (members: 1, guests: 37)
Robots: 446

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top