Issue
At the moment all the pages that I have recently viewed on the site have changed to the color that I have assigned. What I am trying to accomplish is to have only the last that was page viewed to have the color that I have assigned.
Thanks!
Solution
I was bored, so I took this as a challenge. Keep in mind though, that this example will not work if it's just pasted in, since it isn't modular at all, and this limited example has the flaw that you need to manually refresh the page to see the effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Visited Test</title>
<style>
/* What visited links should look like */
.lastVisitedLink {
color: purple;
border: 1px groove black;
}
/* What all other links should look like */
a:not(.lastVisitedLink) {
color: blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#a">Link 1</a></li>
<li><a href="#b">Link 2</a></li>
<li><a href="#c">Link 3</a></li>
<li><a href="#d">Link 4</a></li>
</ul>
<script>
var localStorageKey = 'lastVisitedLinkSave';
var links = document.getElementsByTagName('a');
//Since "links" is a nodeList, not an array
Array.prototype.forEach.call(links, function(link) {
var lastClicked = localStorage.getItem(localStorageKey);
if (lastClicked === link.href) {
link.className = 'lastVisitedLink';
} else {
link.className = '';
}
link.onclick = function(event) {
event.preventDefault();
localStorage.setItem(localStorageKey, this.href);
this.className = 'lastVisitedLink';
location.href = this.href;
}
});
</script>
</body>
</html>
The CSS class lastVisitedLink defines what you want visited links to look like. That class will be added to the last clicked link. Obviously, in a real website, this will be defined externally instead of internally.
This is the key part:
//Find all anchor(link) tags
var links = document.getElementsByTagName('a');
//Using the prototype since "links" is a nodeList, not an array
//Here, we're going over all the links found on the page.
//For each link, we're checking if it's the last clicked link. If it is, add the CSS class to it to style it. If it's not the last clicked, remove all other classes associated with it.
Array.prototype.forEach.call(links, function(link) {
var lastClicked = localStorage.getItem(localStorageKey);
if (lastClicked === link.href) {
link.className = 'lastVisitedLink';
} else {
link.className = '';
}
//Whenever a link is clicked, we save it as the last clicked link (to local storage), set the class name (same as above), then have the link change the page as usual.
link.onclick = function(event) {
event.preventDefault();
localStorage.setItem(localStorageKey, this.href);
this.className = 'lastVisitedLink';
location.href = this.href;
}
});
I wrote this in like 5 minutes, so it's far from perfect. As noted in the comments, this will remove ALL other classes associated with a link if that link isn't the last clicked. You'll need a more complex solution if you want to only remove the lastClickedLink class, since AFAIK, vanilla JavaScript doesn't have an easy way to do this.
You'll also need to have a basic understanding of localStorage to use this properly. It's a handy tool to save data to the client computer.
Answered By - Carcigenicate Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.