Solved

How do you reset the visited state of your buttons on each page view?>

Posted on 2010-08-28
14
421 Views
Last Modified: 2012-05-10
Hi,
I am setting up a site here http://amandawatson.com.au/alkaway/index.html  and when you click on the buttons down the bottom the visited state turns red.
I would like the visited state to be removed after you shut the browser so when you return to the site a second time, the visited state has been removed and you are back to the normal colour?
0
Comment
Question by:Amanda Watson
  • 6
  • 2
  • 2
  • +4
14 Comments
 
LVL 11

Expert Comment

by:Rajesh Dalmia
Comment Utility
u can try one thing.
remove the a:visited part from your css file...
move the script of a:visited into a:hover...
this way the red color will be visible only on mouse hover
0
 
LVL 6

Assisted Solution

by:radnbne
radnbne earned 400 total points
Comment Utility
Alternatively you can manually manage the links.

A Javascript option is provided here: http://stackoverflow.com/questions/217749/resetting-visited-status-on-links

about half way down the page
0
 
LVL 11

Author Comment

by:Amanda Watson
Comment Utility
Do you mean this solution here?
 1  down vote
      

So you just want to make "visited" links look different for a certain amount of time? This is easy if you bypass the browser's :visited pseudoclass and just assign a custom class name. Use cookies; they've got built-in expiration.

Set up a JavaScript handler for when you click on links. Pseudo-code:

function clickHandler(event) {
  var href = /* (figure out which anchor was clicked and get the href) */
  // (you might need to escape the href)

  setCookie(href, "visited", 5); // set cookie for 5 days
}

It'll run this function right before it follows the link.

Then, on page load, you can do something like this:

function markVisitedLinks() {
  var anchors = document.getElementsByTagName("a");

  for (var i = 0; i < anchors.length; i++) {
    if (readCookie(anchors[i].href) == "visited") {
      anchors[i].className += " visited";
    }
  }
}

Grab the setCookie and readCookie functions from QuirksMode.


How do I do this.
Can you supply more steps.  Also I don't want it to reset after days but after they visit the site again?
0
 
LVL 3

Assisted Solution

by:konathala
konathala earned 50 total points
Comment Utility
Hi there,
You need to plan something with cookies. Follow the link to get some basic idea on cookie deletion. Once you delete the cookies on browser exit your problem will be solved,

http://www.quirksmode.org/js/cookies.html

Its a simple document.cookie function.
0
 
LVL 11

Author Comment

by:Amanda Watson
Comment Utility
Here is another solution, but I don' t know how to do timestamps?
http://www.siteexperts.com/tips/html/ts17/page1.asp

Can someone please explain the simplest solution with steps.   I am not using a dynamic site, this is just a simple plain html site?
0
 
LVL 2

Expert Comment

by:ozi_lion
Comment Utility
Just make all color codes the same for a,a:visited, a:click,a:hover etc. or what color is you want in CSS file. otherwise color changes when state is changed.
0
 
LVL 8

Assisted Solution

by:dmeeren
dmeeren earned 25 total points
Comment Utility
Or... You can add a random session code to your url of the links. But it's a bit overdone in my opinion, but it works.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Author Comment

by:Amanda Watson
Comment Utility
Ok I am really finding this a bit beyond me... I really need some steps to follow from start to finish to accomplish this.

I can't change the colors, then must remain the colors they are for visited etc.

What file do I need, where do I add it on the server, what do I need to add to my html document or css?
0
 
LVL 2

Expert Comment

by:ozi_lion
Comment Utility
please look at this site for how to use CSS in your HTML file

http://www.w3schools.com/css/default.asp
0
 
LVL 2

Assisted Solution

by:sami_20031
sami_20031 earned 25 total points
Comment Utility
if i think this problem is related to  visitors browser. You can solve this by simply go to your browser setting and remove all the cookies and others and if u have new brower you only keep  your browsing history but some visitors my view your page as your trying to do by default
 
0
 
LVL 11

Author Comment

by:Amanda Watson
Comment Utility
ozi lion, I am pretty clear on using css thanks.  I am also understanding how to use active, hover, visited etc.
If you read my post you will see I am trying to work out a way to have the visited link reset when you come back to the website.  that is I want the cache to be cleared so the visited state is removed once you have left the site
0
 
LVL 6

Accepted Solution

by:
radnbne earned 400 total points
Comment Utility
snowball77

Things are getting a little confusing here.......

What you are trying to achieve is out of the range of your control within the browser unless you manually manage the visited state.  This is because the actual state of the visited links is maintained on the clients browser and not on the server.  Unless you have control over every client visiting you cannot clear the visited state.

Is the desire to remove the visited link a request from the client or a personal preference?  I ask because the visited link state is by design, and has worked that way for years.

From the information above you have a couple of options:

1) Use CSS to simply hide the visited state completely
2) Use one of the coding solutions linked to and modify it to reset the link on page load

From your earlier comment you have ruled out removing the visited state completely stating you still want it to work.  The sticking point is when to expired the visited link.

You essentially will need to change the code to reset when the session ID changes.  This is needed because if you are building a static page and someone clicks on one of the links and then comes back to the page it reloads.  If the code resets on load then the visited links would disappear each tiem the page is loaded.

So to make this work you need to do the following:

When the page is loaded check if a cookie exists with the current session ID, if it does, don't reset anything, if it doesn't, reset the visited link and update the cookie with the current session ID.

Before we can do this we need to know a few things.  What sort of web server is this running on (windows or unix) and are you using php or asp?

Does this make sense or have I confused you more ?


0
 
LVL 11

Author Comment

by:Amanda Watson
Comment Utility
Thanks for your response Rad.... I clear on what needs to happen from this point:
-------------------------------------------------------------------------------------------------------------------------------
When the page is loaded check if a cookie exists with the current session ID, if it does, don't reset anything, if it doesn't, reset the visited link and update the cookie with the current session ID.

Before we can do this we need to know a few things.  What sort of web server is this running on (windows or unix) and are you using php or asp?

------------------------------------------------------------------------------------------------------------------------------------

I will test out this site on my server to begin with which is running windows and has php enabled.

I will need to find out if the live server is unix or windows but I am pretty sure it will have php enabled too.

The current site is SO basic...its just static html pages...no php is currently running on it, but it can
0
 
LVL 11

Author Closing Comment

by:Amanda Watson
Comment Utility
Thanks for the help, I never had to finish this solution, but it certainly was the correct one...and hopefully will help someone else out..
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now