Using "a:visited" isn't working.

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 5172 Views - Last Post: 20 December 2012 - 11:45 PM

#16 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: Using "a:visited" isn't working.

Posted 20 December 2012 - 01:56 PM

Just to add something to the original discussion, about altering the style of visited links.

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;
}


Was This Post Helpful? 1
  • +
  • -

#17 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: Using "a:visited" isn't working.

Posted 20 December 2012 - 11:45 PM

View PostAtli, on 20 December 2012 - 01:56 PM, said:

Just to add something to the original discussion, about altering the style of visited links.

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;
}


Interesting, haven't used a lot of Javascript, just played a bit around with it but not much. I'm going to try this method, thanks for the heads up! ^^
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2