Solved

Anchor Links Visited State

Posted on 2004-10-20
12
1,428 Views
Last Modified: 2012-06-21
Hello
I have a page with anchor links
Whenever i go into the page the links are set to the visited state - even if tehy have never been clicked on.

How do i stop this from happening?

Thanks Heaps

JO
0
Comment
Question by:Joana
  • 3
  • 2
  • 2
  • +3
12 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12364617
We need to see the code.

Cd&
0
 

Author Comment

by:Joana
ID: 12364765
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>test</title>
      <style type="text/css">
      a, a:link {
            color: lime;
        }
        
       a:visited {
            color: green;
        }
        
       a:hover {
            color: pink;
        }

       a:active {
            color: red;
        }       
      
      </style>
</head>
<body>

<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>

<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<a id="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>


</body>
</html>
0
 
LVL 3

Expert Comment

by:Daedalus05
ID: 12366992
You can use a javascript to overcome this, to some extent, with a mod of your CSS. Something like this:

CSS MOD: Replace A:VISITED with the following
A .visit { color: green }

JavaScript: Using a cookie object set to expire in one month, and onClick dynamic changes, we provide a new visited link setup:
<script type="text/javascript">
 if(document.cookie == "") {
  var dt = new Date();
  var yr = dt.getYear();
  if(yr < 1900) yr += 1901; else yr += 1;
  document.cookie = "expires: "+new Date(yr, dt.getMonth(), dt.getDate()).toGMTString();
 }

 if(document.location.toString().indexOf("#") > 0) {
  var id = document.location.toString().substring(document.location.toString().indexOf("#") + 1);
  visitLink(id);
 }

 function visitLink(id) {
  document.cookie = id + "=V";
  document.getElementById(id).className = "visit";
 }
</script>

This should assure that outside links to this page content at one of the #id positions will be covered as well as same-page links.
0
 
LVL 3

Expert Comment

by:Daedalus05
ID: 12367007
Oops... Cookie expires in one year. To make the expire in one month, change the if(document.cookie == "") { } part to this:
if(document.cookie == "") {
 var dt = new Date();
 var yr = dt.getYear();
 if(yr < 1900) yr += 1900;
 var mo = dt.getMonth() + 1;
 if(mo > 11) mo -= 11;
 document.cookie = "expires: "+new Date(yr, mo, dt.getDate()).toGMTString();
}
0
 
LVL 3

Expert Comment

by:Daedalus05
ID: 12367148
Sorry... my code doesn't seem to work as I expected now that I've tested it, although I presume something very similar could do the trick. Perhaps it will give you, or another EE Expert, the inspiration you need to find the answer. In the meantime... I'm going to bed! :-P
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 49

Expert Comment

by:Roonaan
ID: 12367359
Use an extra css class:

<a class="anchorlink" href="#C4">See also chapter 4</a>

<style type="text/css">
a.anchorlink:visited {color:lime;}
</style>

Regards

-r-
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12368029
Not sure why you would need any extra CSS.

You just need to code the anchor like this:
<h2><a name="C4" id="C4">Chapter 4</a></h2>

Anchor tags are not supposed to be styled like a link (since they aren't links...)
Because you left out the name attribute, the browser assumed it was a link.

Sean
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12368109
@Sean: That would be correct if Joana had used the word anchor like you expected her to.

In her example she refers to an anchor link as a hyperlink linking to an anchor on the same page:
<a href="#C4">See chapter 4</a>

Obviously these links are always in visited state, because they always link to the page the visiter is currently on. Therefor the page will be visited.

To counteract this effect she could add a class="anchorlink" which colors this type of links as if they are always unvisited.

Regards

-r-
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12368140
Thanks Roonon - perhaps I misunderstood the question.

Wouldn't be the first time :-)

Sean
0
 
LVL 5

Accepted Solution

by:
Alex Ene earned 125 total points
ID: 12629904
The current CSS specs do not allow you to do that inside a single document.
You will have to use either some js or frames.
tried with frames and it works.
there is another similar question that gives you the answer: its not possible inside same document.
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20257755.html


Sorry it cant be done the way you described it :(

Hope you can do some workaround.

Regards,

Alex
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now