Blog (my web musings)

Ever wanted to flag newly added content to individual visitors, and then remove the flag once they've read it? Here's how to do it using local storage (like cookies) to save tracked, internal links on your website:

Demo

Where you might use this script

• to indicate new and unread blog entries
• to highlight important notices on your home page
• to track read chapters of an instruction manual or tutorial
• to flag viewed demos that have changed since last visit

The Idea

This idea came about while I was reading an interesting article about tracking :visited links, where a "seen" indicator is added to links once they've been visited. This works similar to YouTube videos where a "WATCHED" label appears over a video thumb once you've watched the clip.

While reading the article, I had a current project in mind, but I was also reminded of one of my earlier forum posts from March 2010: Indicate new content since last visit (for 3 days) - I didn't persevere with a solution back then (I didn't have the knowledge), but now things are different, so I set myself a little challenge to solve my problem of yester-year using modern techniques.

Setting up the HTML to track "new" content links

Tracked links are setup like this;

<a class="track-new" data-added="2015-05-19" href="/path/to/page.htm">Tracked Link - Page 1</a>

So, for all links that you want to track, the track-new class must be added. This is the base requirement.

An optional setting is the data-added="2015-05-19" attribute. The date here, if present, is used by the scripts to indicate what is "new" for a set time period (default is 30 days). If this date falls within the last 30 days, an unread link will be flagged as "new". However, if this date is more than 30 days old, an unread link will just look like any other (no "new" indicator).

If you want to indicate "new" unread content, regardless of how long ago it was added, just leave this data-added="2015-05-19" attribute out, and that link will be tracked until the visitor clicks on it.

How the script works

We've established that the script uses the track-new class and data-added="2015-05-19" attribute to identify trackable links. The clever part that checks the links against those saved in local storage is here;

if(links[i].hostname == window.location.hostname && localStorage.getItem('new-'+(links[i].pathname.replace(/^\/+|\/+$/g,'')))){
    links[i].removeAttribute('data-new'); 
    } else { 
    links[i].setAttribute('data-new', true); 
    }

When conditions are met, another data- attribute is added (or removed) - this one called 'data-new'.

This 'data-new' attribute can be targeted by CSS to insert a "new" pseudo element alongside the tracked link when it is present (i.e. while the link has not been visited);

a[data-new]:before { content:'\2605\0020New\0020\2605'; display:inline-block; font-size:0.75em; overflow:hidden; line-height:1; color:teal; text-decoration:none; margin-right:0.5em; -webkit-animation:blink 1s infinite; animation:blink 1s infinite }
@-webkit-keyframes blink { 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }
@keyframes blink { 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }

Feel free to change the content of the pseudo element if you like - you can use an image or alter the text to your liking. Or go for special character entities, like the stars that I used.

Compatibility

Good for modern browsers and IE8+ (no blink animation in IE8/9).

Tracked 'New' Links:

Demo

Click around the links for page 1, 2, 3 and 4 to see the "new" indicator vanish as you visit them.

You can reset the demo at any time by clicking on "Clear Tracked Links". This is an additional function that you may also use in your projects if you wish - maybe alongside a notice for public computers as an instruction to clear tracking history of past users.