11 replies to this topic

[jjisles]

I have a navigation menu (all text and the menu is on most every page) and each menu item is a link to a particular service on my "services" page. On my services page there is a brief description of each item linked to by an anchor tag. The problem is, for example, when I am on the home page (or any page) and I click on a link in the nav. bar, I am taken to the correct anchor spot on my services page but, ALL my text links in the nav. bar have changed to the visited text link color, and not just the one item I clicked on.
If this is unclear I can give you the address so you can see.

I asked for help on another forum and this is the response someone posted...
"That's probably because you have used "#" for your links at the moment, no?"

I told him that is true. Then he responded with...

"They are all the same link, therefore when you hit one, you hit them all. By the way, it's better to use "java script:;" (that's colon semicolon) than "#".

So I just removed the # sign and replaced it with java script:;
I did this to the links that are on the same page as the anchor tags as well as other pages that link to that page, at that anchor spot.
I followed his advice but then the links just went to a blank white page, they stopped working. I have never, ever used javascript so please treat me like someone who doesn't even know a word of english.
Any help is appreciated. By the way, I am using dreamweaver 3.
Thanks,
Jarrod

[Edvin Eshagh]

You should realize that people who have JS disabled wont be able to use your links.
Having said that, here is how you would use the JS:
<a href="javascript:location='/mypage.htm#anchorName'">Link Text</a>

[Jill]

Jarrod, there was nothing wrong with doing it the way you were to begin with.

[jjisles]

Thank you to "you" for the info. By the way, do I need to do anything else to my site to make this javascript tag work.

Jill, I missed you at SES. The show is huge isn't it?
The issue I was having was that as soon as someone clicked on one of the links it would correctly take them to the correct anchor spot on the page - whether they clicked the nav bar from the same page the anchor spot was located or another page in the site. But after one of the links was clicked, all the links that were anchor links, or whatever the correct term is, would show up with the visited link color and I did not want that to occur.
Do you know of a way I can just make each link act separately? Is it preferable to not use javascript?

[Randy]

Personally I wouldn't use javascript for those links. Not because of the adverse reaction that search engine spiders have to JS, but because of the accessibility and usability concerns for real users.

What I would probably do is use a bit of CSS to give those particular links that contain a # in-page link a class of their own. Then make the A and A:visited both the normal text color.

They won't ever get the visited coloring that way, but that's better than have a series of links change all at once.

[jjisles]

Doing it that way would leave the links the original color even after they've been visited or active? Is that right?

Could you elaborate on this please...
"What I would probably do is use a bit of CSS to give those particular links that contain a # in-page link a class of their own. Then make the A and A:visited both the normal text color".

I think I understand the general thought (if what I said up top is right) but the details you mentioned don't ring a bell with me.

[Randy]

Doing it that way would leave the links the original color even after they've been visited or active? Is that right?

Essentially, that's the gist of it. Though you could control the hover and active colors separately if you wanted.

Let's say for instance your same page link text was a darkish blue color and you wanted it to change to a lighter blue when someone hovered over it or when it was clicked on, or active. But you wanted it to be the normal dark blue any other time.

We simply create a little class for those same page links and we're good to go. Something like the following should work after being tweak to match what you're doing with your links.

CODE

<style type="text/css">
<!--
.samepagelink, a.samepagelink, a.samepagelink:visited {
font-family: Arial, Helvetica, sans-serif;
color: #333399;
font-size: .9em;
font-weight: normal;
}
a.samepage:hover, a.samepage:active {
font-family: Arial, Helvetica, sans-serif;
color: #660033;
font-size: .9em
text-decoration: none;
font-weight: normal;
text-decoration: none;
}
-->
</style>

Then in your HTML when you link to these same page anchors, simply add a class to the A HREF tag to tell the browser which class to use. Like:

CODE

<A HREF="/somepage.html#someanchor" CLASS="samepagelink">This is a link to a specific section of somepage.html</A>

[jjisles]

Randy,
Thanks a bunch. I'll take a shot at it and see what disaster I can cause. LOL
I appreciate you taking the time.
One question as of now...
When you started the code... <style type="text/css"> where do I insert this?
Jarrod

[Randy]

My pleasure Jarrod.

If you're going to put it in each page of your site, the <style.. section would optimally go inside the <head> section of your page. If you're doing across all pages of your site, especially if you have other CSS being used, I would use an External CSS file and call it into each page with a single <link rel= line.

[jjisles]

Cool. Got it.
This nav scheme will be in almost every page (the site will be approx. 12 pages more or less). I'm not using any CSS. Would you recommend using the external CSS file, which would be a first for me as well.
Thanks

[Randy]

You could go either way.

Putting it into the head section of each page for a 12 page site is probably the easiest. 100 pages would be another story.

[jjisles]

Allrighty then. I'll give it a go tonight and see how it works.
Much thanks.