CODEWITHSUNDEEP
javascriptcsshyperlink
dougfelt
dougfelt

Reputation: 335

using javascript to mark a link as visited

FF2 (at least) doesn't mark as link as :visited if it triggers the onclick handler without following the href. I'm using onclick to fetch data from a server and modify the page and the link styling seems appropriate here. But the link is not marked as visited.

Is there a cross-browser way to mark the link as visited? Failing that, is there a way to determine the browser's a:visited styling and apply it to the link?

Thanks to all who replied.

Looks like the answers are:

Upvotes: 23

Views: 25067

Answers (5)

Nathan Manousos
Nathan Manousos

Reputation: 13858

Here is how I did it. Only works in browsers that support HTML5 history api.

// store the current URL
current_url = window.location.href

// use replaceState to push a new entry into the browser's history
history.replaceState({},"",desired_url)

// use replaceState again to reset the URL
history.replaceState({},"",current_url)

Using replaceState means that the back button won't be affected.

Upvotes: 29

John Middlemas
John Middlemas

Reputation:

Is there a way to determine the browser's a:visited styling?

I would say yes since the current document is visited and you can find it's link color like this:-

alert(mys_getLinkColor(top.location))


function mys_getLinkColor(href) {
var x, body, res=''
x = document.createElement('a')
x.href = href
body = document.getElementsByTagName('body')[0]
body.appendChild(x)
if(x.currentStyle) {
   res = x.currentStyle.color
}
else if(window.getComputedStyle) {
   res = window.getComputedStyle(x,null).color
}
return mys_rgbToHexColor(res) }


function mys_rgbToHexColor(v) { 
// E.g. 'rgb(5,2,11)' converts to "#05020b". All other formats returned unchanged.
var i
v = v.split('(')
if(!v[1]) return v[0]
v = v[1].replace(/ /g, '').replace(/\)/, '')
v = v.split(',')
for(i=0; i<v.length; i++) {
   v[i] = Number(v[i]).toString(16)
   if(v[i].length==1) v[i] = '0' + v[i]
}
return '#'+v.join('')}

Upvotes: 0

Till
Till

Reputation: 22436

The only workaround I know of would be something like the following.

Say, your visited links are red:

<a href="#" onclick="someEvent();this.style.color='#ff0000'">link</a>

But that doesn't mean that when the page is reloaded, the links are still marked visited.

To achieve this, I'd suggest give all links IDs, which are of course unique across your entire app, or namespaced per page. In your onclick, you'll trigger another method, which saves the link's ID to a cookie.

The most easiest would be a comma-separated list, which you can split() before reading. Which is what you do when the page is reloaded. When it's split, you iterate over all IDs and set the color on your links.

E.g, using jQuery:

// onclick
function saveID(id) {
  if ($.cookie('idCookie')) {
    $.cookie('idCookie', $.cookie('idCookie') + "," + id);
  } else {
    $.cookie('idCookie', id);
  }
}

// make all links colored
function setVisted() {
  var idArray = $.cookie('idCookie').split(',');
  for (var x=0; x<idArray.length; x++) {
    $('#' + idArray[x]).css('color', '#ff0000');
  }
}

// assign saveID()
$(document).ready(function(){
  $('a').click(function(){
    saveId($(this).attr('id'));
  });
  setVisited();
});

I haven't tested this code, but it should get you started and give you an idea. If you get lucky, it's paste and win. ;-) I also haven't researched how much you can store in a cookie and what the performance implications are, or what other restrictions apply, also see my comments.

Upvotes: 3

Peter Bailey
Peter Bailey

Reputation: 105914

Strictly speaking, there's no such thing as a "visited" state for individual links. It's the URLs themselves that are interpreted as "visited" by the browser. Any links that point at a URL in the browser's history will receive styling as defined by the :visited pseudo-style in your CSS.

You could try to fake it by setting the location of a hidden iframe to the desired URL, but that won't force the current page to re-draw so I doubt you'd see the :visited style updates w/o a refresh.

For the 2nd part of your question, I'd probably go with Jordan Jones' answer.

Upvotes: 1

Jordan S. Jones
Jordan S. Jones

Reputation: 13903

Apply a class that has the same definition as :visited.

Upvotes: 1

Related Questions