473,386 Members | 1,841 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

css and js to change navigation links

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="#39 4B8E";

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! ;-)
Jul 20 '05 #1
4 3086
"Andrea" <am*****@yahoo.com> wrote in message
news:99**************************@posting.google.c om...
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

<snip>

Note: message multi-posted to
news:comp.infosystems.www.authoring.stylesheets

==================
What is multi-posting?
Multi-posting is the posting of the same question to more than one newsgroup
but without cross-posting. Cross-posting is an efficient way of sending
messages to more than one group because only one message actually exists
despite it being seen in potentially many other groups. Also when someone
takes the effort to reply to that question in one newsgroup, the other
groups will also see the answer. That way people know to stop replying to
that question if it's been answered, or may correct mistakes in someone's
reply. With multi-posting people send the same message as individual
messages to many groups. When a person in one group replies to it the other
identical messages aren't updated with the reply. This leads to the
situation where many people take time out in different groups to answer the
same question, despite it being answered already. It's a waste of their time
when they could be helping someone else. Also it's a waste of resources
since news servers around the world have to store your 15 (say) identical
messages, as opposed to just one message when you use cross-posting.
==================
--
Andrew Urquhart
- FAQ: http://jibbering.com/faq
- Archive: http://groups.google.com/groups?grou...ang.javascript
- Reply: http://www.andrewu.co.uk/about/conta...=newsgroup_clj
Jul 20 '05 #2
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!
Jul 20 '05 #3
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>
Jul 23 '05 #4
R wrote:
There's a nice (less javascript, more css) way to do this:
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; }


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
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Catherine Lynn Smith | last post by:
I am creating a webpage with dhtml <DIV> layers and I want a link on one layer to modify the content on another but I seem to keep running into errors. Basically I create a layer in the middle...
10
by: Richard | last post by:
The style sheet shown below is from the suckerfish vertical menu. http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html I've added in a few minor changes to color code the...
5
by: Sangeetha Nagaraj | last post by:
We are building a MEGA web site which is having more than 1000 links, sometimes we will mesh-up with the filenames and the links. Navigation become complex because of this issue. I dont know how...
3
by: Mike Barnard | last post by:
Hi all, newbie here. Odd sounding subject but I can't describe it any better. I'm trying to teach myself a little about CSS. In a test site (not published) I am trying to use CSS to make...
0
by: Veli-Pekka Tätilä | last post by:
Hi, My first post here. I've found some serious accessibility flaws in the Python 2.4 docs and wish they could be rectified over time. I'm very new to Python and initially contacted docs at python...
4
by: Sandy.Pittendrigh | last post by:
I don't want to get into a frames discussion here. We all know they have numerous drawbacks, especially with search engine visibility. (Google, ironically, uses framesets for displaying individual...
9
by: mosscliffe | last post by:
I am struggling to find a python example of the scenario - I have. I have a python script, which generates a page with a search button (actually an input field). The data from the above...
6
by: Roland Dick | last post by:
Hi, this must have been asked a thousand times, but for some reason I couldn't find anything on this.. I have an ASP.NET 2 website with a masterpage, which contains some navigation links...
10
by: The Bicycling Guitarist | last post by:
Hello. I have a navigation bar at the top of all my pages with css-styled buttons that change color when hovered over. I am a little confused on how to disable that for the link that the page is...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.