The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.
See if your editor made the list.
COURSE of the MONTH
12 days, 14 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3
2
2- +3
12 Comments
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
a, a:link {
color: lime;
}
a:visited {
color: green;
}
a:hover {
color: pink;
}
a:active {
color: red;
}
</style>
</head>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a id="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
</body>
</html>
<html>
<head>
<title>test</title>
<style type="text/css">
a, a:link {
color: lime;
}
a:visited {
color: green;
}
a:hover {
color: pink;
}
a:active {
color: red;
}
</style>
</head>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a id="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
</body>
</html>
You can use a javascript to overcome this, to some extent, with a mod of your CSS. Something like this:
CSS MOD: Replace A:VISITED with the following
A .visit { color: green }
JavaScript: Using a cookie object set to expire in one month, and onClick dynamic changes, we provide a new visited link setup:
<script type="text/javascript">
if(document.cookie == "") {
var dt = new Date();
var yr = dt.getYear();
if(yr < 1900) yr += 1901; else yr += 1;
document.cookie = "expires: "+new Date(yr, dt.getMonth(), dt.getDate()).toGMTString(
}
if(document.location.toStr
var id = document.location.toString
visitLink(id);
}
function visitLink(id) {
document.cookie = id + "=V";
document.getElementById(id
}
</script>
This should assure that outside links to this page content at one of the #id positions will be covered as well as same-page links.
CSS MOD: Replace A:VISITED with the following
A .visit { color: green }
JavaScript: Using a cookie object set to expire in one month, and onClick dynamic changes, we provide a new visited link setup:
<script type="text/javascript">
if(document.cookie == "") {
var dt = new Date();
var yr = dt.getYear();
if(yr < 1900) yr += 1901; else yr += 1;
document.cookie = "expires: "+new Date(yr, dt.getMonth(), dt.getDate()).toGMTString(
}
if(document.location.toStr
var id = document.location.toString
visitLink(id);
}
function visitLink(id) {
document.cookie = id + "=V";
document.getElementById(id
}
</script>
This should assure that outside links to this page content at one of the #id positions will be covered as well as same-page links.
Oops... Cookie expires in one year. To make the expire in one month, change the if(document.cookie == "") { } part to this:
if(document.cookie == "") {
var dt = new Date();
var yr = dt.getYear();
if(yr < 1900) yr += 1900;
var mo = dt.getMonth() + 1;
if(mo > 11) mo -= 11;
document.cookie = "expires: "+new Date(yr, mo, dt.getDate()).toGMTString(
}
if(document.cookie == "") {
var dt = new Date();
var yr = dt.getYear();
if(yr < 1900) yr += 1900;
var mo = dt.getMonth() + 1;
if(mo > 11) mo -= 11;
document.cookie = "expires: "+new Date(yr, mo, dt.getDate()).toGMTString(
}
Sorry... my code doesn't seem to work as I expected now that I've tested it, although I presume something very similar could do the trick. Perhaps it will give you, or another EE Expert, the inspiration you need to find the answer. In the meantime... I'm going to bed! :-P
Use an extra css class:
<a class="anchorlink" href="#C4">See also chapter 4</a>
<style type="text/css">
a.anchorlink:visited {color:lime;}
</style>
Regards
-r-
<a class="anchorlink" href="#C4">See also chapter 4</a>
<style type="text/css">
a.anchorlink:visited {color:lime;}
</style>
Regards
-r-
Not sure why you would need any extra CSS.
You just need to code the anchor like this:
<h2><a name="C4" id="C4">Chapter 4</a></h2>
Anchor tags are not supposed to be styled like a link (since they aren't links...)
Because you left out the name attribute, the browser assumed it was a link.
Sean
You just need to code the anchor like this:
<h2><a name="C4" id="C4">Chapter 4</a></h2>
Anchor tags are not supposed to be styled like a link (since they aren't links...)
Because you left out the name attribute, the browser assumed it was a link.
Sean
@Sean: That would be correct if Joana had used the word anchor like you expected her to.
In her example she refers to an anchor link as a hyperlink linking to an anchor on the same page:
<a href="#C4">See chapter 4</a>
Obviously these links are always in visited state, because they always link to the page the visiter is currently on. Therefor the page will be visited.
To counteract this effect she could add a class="anchorlink" which colors this type of links as if they are always unvisited.
Regards
-r-
In her example she refers to an anchor link as a hyperlink linking to an anchor on the same page:
<a href="#C4">See chapter 4</a>
Obviously these links are always in visited state, because they always link to the page the visiter is currently on. Therefor the page will be visited.
To counteract this effect she could add a class="anchorlink" which colors this type of links as if they are always unvisited.
Regards
-r-
The current CSS specs do not allow you to do that inside a single document.
You will have to use either some js or frames.
tried with frames and it works.
there is another similar question that gives you the answer: its not possible inside same document.
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20257755.html
Sorry it cant be done the way you described it :(
Hope you can do some workaround.
Regards,
Alex
You will have to use either some js or frames.
tried with frames and it works.
there is another similar question that gives you the answer: its not possible inside same document.
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20257755.html
Sorry it cant be done the way you described it :(
Hope you can do some workaround.
Regards,
Alex
Featured Post
Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing.
Set up your basic HTML file. Open your form tag and set the method and action attributes.:
(CODE)
Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month12 days, 14 hours left to enroll
777 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.