New Topic/Question
Reply
There is a way to work around the privacy restrictions that are enforced on visited links. You can't simply alter their style freely using the :visited pseudo-selector, but there is nothing stopping you from using Javascript to maintain a record of which links are clicked, and then alter the styles manually according to your own records.
For example, in this page I use the HTML5 localStorage to capture the URL of clicked links, and then use that to style visited links using a CSS class. Although this example only works in the modern browsers, and IE9+, the method should also work in IE8. The even handling just has to be downgraded to work with IE8. (It doesn't support addEventListener or DOMContentLoaded.) - To work with browsers even older than that, you could try exchanging the localStorage for cookies.
<!DOCTYPE html>
<html>
<head>
<title>:visited Javascript workaround example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="visitedLinks.css">
</head>
<body>
<div id="links">
<a href="http://google.com/">Google</a>
<a href="http://bing.com/">Bing</a>
<a href="http://yahoo.com/">Yahoo</a>
<a href="https://duckduckgo.com/">DuckDuckGo</a>
</div>
<script src="visitedLinks.js"></script>
</body>
</html>
/** File: visitedLinks.js */
window.addEventListener("DOMContentLoaded", function() {
// --
// Step #1: Record every click on the target links to
// the local storage, so they can be used later to
// alter the style of said links.
var onLinkClick = function(evt) {
var url = evt.target.getAttribute("href");
var visitedLinks = localStorage.getItem("visited");
if (!visitedLinks) {
visitedLinks = {}
}
else {
visitedLinks = JSON.parse(visitedLinks);
}
if (visitedLinks.hasOwnProperty(url)) {
visitedLinks[url] += 1;
}
else {
visitedLinks[url] = 1;
}
localStorage.setItem("visited", JSON.stringify(visitedLinks));
}
var links = document.querySelectorAll("#links > a");
for (var i = 0; i < links.length; ++i) {
links[i].addEventListener("click", onLinkClick);
}
// --
// Step #2: Read the link counters and update the links to
// indicate they have been previously visited.
var linkCounters = localStorage.getItem("visited");
if (linkCounters) {
linkCounters = JSON.parse(linkCounters);
for (var url in linkCounters) {
var link = document.querySelector("a[href='" + url + "']");
if (link) {
link.className = link.className + " visited";
}
}
}
});
/** File: visitedLinks.css */
/* This is the style that will be applied to the visited links */
a.visited {
color: #aaa;
text-decoration: line-through;
}
MultiQuote
| 