Visited plugin

The idea that you can track which links users have visited re-emerged earlier this month.

In my (rather drawn out) blog redesign process, I considered that when showing a list of del.icio.us link, I could hide those ones my visitor had already been to.

Here’s a jQuery plugin to filter for just visited links:

jquery.visited.js

The plugin is written to filter to the visited links, and does so by plugging in an iframe and inserting all the links of interest and filtering through until it finds all the visited links.

The plugin also allows you to drop in a function to easily run against each visited link.

Usage

$('#sidebar a').visited().addClass('visited');

Or

$('#sidebar li > a').visited(function () {
  // hides the li element
  $(this).parent().hide();
});

Demo

I’ve quickly included a working demo that shows a list of del.icio.us links, and hides the ones that you’ve already visited. If you click on ‘show visited links’ it will run the filter and show the correct links.

Note that in the demo, I’ve used a more complicated selector than above because I don’t want to match the ‘show’.

See the demo making use of the visited plugin

…and yes, that is the re-design I’ve been working on. It’s pretty plain, but purposefully as my blog focuses so much on code.

6 Responses to “Visited plugin”

  1. This is a great plugin. Thanks for sharing.

  2. Very neat plugin. I got it working in FF2 and Safari on XP, but not IE6 and Opera 9. Any insight on browser compatibilities?

  3. For the script to work in IE the code must look something like this (at around 37 – 40 lines).

    $('a', win).each(function (i) {
      var visited = getStyle(this, 'color', win);
      visitedList[i] = !!(visited == 'rgb(0, 255, 0)' || visited == '#0f0');
    });

    This is because IE returns not the ‘rbg(…)’ string, but the HEX code of the color. So for it to work correctly for IE in this case we need to check the HEX code as well. Hope it helps to anyone else. It worked for me :)

    P.S. Because this is a string check, different browsers may return a different string, so if it’s not working for you, try to output the color string to the screen [ e.g. alert(visited); ] and check if it’s the same as in the “if” statement. If not then just add another “OR” in the “if” with the returned value. And it should work.

  4. I’ve found a weird problem with this plugin – I’ve asked on Stack Overflow, but if you have any insight it would be greatly appreciated. :)

    http://stackoverflow.com/questions/2712710/safaris-never-ending-loading-message-when-an-iframe-does-not-have-a-src

  5. Seems Firefox4 has rolled out several privacy fixes related to CSS :visited (i.e. getComputedStyle) and thus this plugin won’t work with FF4.
    http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

  6. That is a bug, :visited is supposed to work in firefox4 if you enable it, layout.css.visited_links_enabled, but its broken

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight