?
Solved

how to reset visited links color

Posted on 2006-05-09
13
Medium Priority
?
1,485 Views
Last Modified: 2013-12-24
Our online analyst app is driven by Coldfusion MX 7. The basis of the app is client cases. My users view a lot of documents opened by a hyperlink. They want the link color to change to the normal visited link color (purple, I think) but once they close a client's case they want the link color reset...is there a way to do this?
0
Comment
Question by:stacey14
  • 4
  • 3
  • 2
  • +3
13 Comments
 
LVL 35

Expert Comment

by:mrichmon
ID: 16640733
Not directly

Link behavior is driven by the browser.  You can control the following attributes:
link: the color a normal unvisited link is
visited: the color a visited link is
hover: the color a link is when you hold the mouse over it
active: the color a link is as it is clicked

(Note when I say color I mean entire style look/feel etc)

So if you want a "link" to be one behavior when a case is open and another when the case is completed/closed then you have to make it use a different class when the case is closed.

<a href="case1.cfm" class="open">Case 1</a>
<a href="case2.cfm" class="closed">Case 2</a>
<a href="case3.cfm" class="open">Case 3</a>

Then you control the styles for open links differently than closed links.

For more info on styling links see many many tutorials via google such as:
http://www.echoecho.com/csslinks.htm

0
 
LVL 3

Expert Comment

by:siva350
ID: 16644040
Myybe setup an if statement around your css and check to see if a case is open then display the purple visited link, but if it is closed set the visited and link color the same. Example below:

<cfif case.open is "yes">
<style type="text/css">
<!--
a:link {
      color: #0000FF;
}
a:visited {
      color: #9900FF;
}
a:hover {
      color: #FF0000;
}
a:active {
      color: #0000FF;
}
-->
</style>
<cfelseif case.open is "no">
<style type="text/css">
<!--
a:link {
      color: #0000FF;
}
a:visited {
      color: #0000FF;
}
a:hover {
      color: #FF0000;
}
a:active {
      color: #0000FF;
}
-->
</style>
</cfif>
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 16649398
No siva350's answer will not work.  It will set the color for ALL links.

You need separate classes per link so open ones look different than closed ones.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 3

Expert Comment

by:pcaioo
ID: 16654593
just put this
<style type="text/css" >
a:link
{
      color:#526D7B;
}
      a:visited
{
      color:#526D7B;
}
      a:active
{
      text-decoration : underline;
      color:#ff00ff;
}
      a:hover
{
      color:#33aaff;
}
</style>
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 16655212
pcaioo,

that also will not work.  They want open cases to have one color link and closed case to have a different color
0
 

Accepted Solution

by:
mar_fab earned 75 total points
ID: 16655428
Hi  stacey14

Just put this

<style type="text/css">
        /* Define class for open link */
        a.open {color: #00FF00;}
 
       /* Define class for closed link */
        a.closed {color: #FF0000;}
</style>

0
 
LVL 3

Expert Comment

by:pcaioo
ID: 16656566
I am sure it work as i am using it.
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 16659554
pcaioo,

It works to change the link color of all links.  It does not work to have different looks/effects for open cases vs closed cases.

TO get that you need to assign a class to the links and then define the classes such as mar_fab showed.
0
 
LVL 3

Expert Comment

by:pcaioo
ID: 16659598
Hi stacey14 and mrichmon I think the best way isstacey14 can try this out himself and see which is working.
0
 
LVL 7

Expert Comment

by:JeffHowden
ID: 16672696
I've got to way in with stacey14 and mrichmon.  pcaioo, your solution will *not* work.  To expand on stacey14's suggestion, it's important to include the pseudo-classes or you won't adequately color links in all various states if you've defined those document wide elsewhere in the CSS document.

Assuming the following HTML:

<a href="" class="open">Open Case</a>
<a href="" class="closed">Closed Case</a>

Use the following CSS:

<style type="text/css" >
  a:link {
    color:#526D7B;
  }
 
  a:visited {
    color:#526D7B;
  }
 
  a:focus, a:hover {
    color:#33aaff;
  }
 
  a:active {
    text-decoration : underline;
    color:#ff00ff;
  }

  a.open:link, a.open:visited, a.open:focus, a.open:hover, a.open:active {
    color: lime;
  }

  a.closed:link, a.closed:visited, a.closed:focus, a.closed:hover, a.closed:active {
    color: red;
  }
</style>

You can split the various pseudo-classes up as necessary to get the right coloring based on the various states.

Notice I've added the :focus pseudo-class.  This allows you to affect the color of the link when it receives focus when the user tabs.

Additionally, the order you place the pseudo-classes in is important or they won't work as expected.  Unlike pcaioo's response, the order is :link, :visited, :focus, :hover, :active.
0
 

Author Comment

by:stacey14
ID: 16683155
let me give these a try and I will get back with the results. thanks for your help.
0
 

Author Comment

by:stacey14
ID: 16754199
I'm still working on it guys, thanks.
0
 
LVL 7

Expert Comment

by:JeffHowden
ID: 16834924
Stacey14, you realize that marfab's solution will fail on all but unvisited links, right?
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A web service (http://en.wikipedia.org/wiki/Web_service) is a software related technology that facilitates machine-to-machine interaction over a network. This article helps beginners in creating and consuming a web service using the ColdFusion Ma…
Have you ever sent email via ColdFusion and thought of tracking this mail to capture the exact date and time when the message was opened ?  If yes, then this article is for you ! First we need a table user_email with columns user_id , email , sub…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question