Solved

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

Posted on 2010-08-28
14
441 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
[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
  • 6
  • 2
  • 2
  • +4
14 Comments
 
LVL 11

Expert Comment

by:Rajesh Dalmia
ID: 33552080
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
ID: 33552124
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
ID: 33552183
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 3

Assisted Solution

by:konathala
konathala earned 50 total points
ID: 33552187
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
ID: 33552188
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
ID: 33552394
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
ID: 33552557
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 33554384
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
ID: 33554568
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
ID: 33554636
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
ID: 33554673
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
ID: 33554741
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
ID: 33555459
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
ID: 33631162
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

734 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