We Keep Coding

How to make an Anchor Tag link erase past visited page?

I have a anchor tag. For the first time(color deep blue link) when I click it, it redirects me to my dynamic graph which forms a curve, you can see the curve being rendered.
But when for the second time when I click the anchor tag(pale pink color), it redirects me to the same dynamic graph but the graph is already loaded/rendered, you don't see the curve being rendered.
Can I solve this problem, as I always want the link and graph react as if its always rendered for the first time
How to solve this by either using JavaScript or PHP.
Thanks in advance.
Image showing link has already been visited

If you have issue with just colour of the link then you can change the colour in css
a:visited{
color: ' #00008B'
}
For re-rendering the links on map . Try clearing cache because browsers stores cache of the all websites that you have visited. This answer talks about how programmatically empty browser cache.

You could trick the browser by changing the URL everytime by adding a random parameter. You may name it totally different if you like.
printf('Visit my graph', microtime(true));
So the URL looks like different on every call and won't get the cache hit, because it is not the same.
Visit my graph
Visit my graph

How to scroll back to an element wherever it is when route changes?

I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.

So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.

URL changed with pushState function is removed when I click to some parts of my website

I'm using a Javascript, Jquery , Backbone.js page. I have all the code in the same file, so I don't want to change between HTML files. I don't use Backbone.js routes. I want to change the URL dynamically and I used history.pushState() function, and it works correctly. But when I click to some parts of the website, the URL returns to the inital one. I don't know why...

I found the problem!!
My code has a hidden . Clicking an anchor with href="#" will move the scroll position to the top. But in my case it causes an unwanted behavior.

How to detect url change using jquery (or javascript) for urls without a hash

I've been searching for an answer to this and the most I can find is to use window hashchange. However my urls do not contain hashes.
Please note that I do not have any control over the urls or the code for the sites.
So here is what I am doing. I create a drop down button with a few options.
Button A -> Option 1, Option 2, Option 3, etc....
How the site is designed is this. The base url is
http://example.com/12345zzzyyyxxx
To modify anything on that page, you need to click on the edit button. This will take you to the url (which is the edit page)
http://example.com/12345uuuyyyttt/e
As you can see above, 12345 is a constant and anything after that (up to the /e on the second url) is dynamic. But no hashes.
So I am trying to automate the following:
1. Click on Edit
2. Fill in the required fields based on option selected.
3. Save the changes. Once save is triggered, the site will take automatically take you back to /12345zzzyyyxxx base url.
So I have it working from the edit page, but that means you have to manually click on edit. I want to automate that.
I have tried using setTimeout and setInterval to detect when this happens, but what I have found out during debugging is that both of these go out of scope when the frame changes.
Also note that the entire page does not change, the frame changes keeping the logo and a few other items untouched and you can physically see that they stay while the frame changes.

History JS is basically the standard js-lib to handle all History state changes, check their github account for more information.
https://github.com/browserstate/history.js/

Maintain Scroll Position of large HTML page when client returns

I'm serving very long html pages (short ebooks)
When client returns, too much of a hassle to try to find exact place where left off due to long html page.
Is there a simple way to maintain the scroll position automatically so that next time the client returns to the page the page scrolls down automatically to where he left off.
this needs to be transparent, i.e. no clicking to "store" scroll position.

The steps are simple, but the solution to this question depends on your app implementation, you can:
Retrieve the current scroll position, you can use:
window.pageYOffset
Store the position, this has two parts, when and where:
You can chose to store the data, when the window closes, or every time the user scroll, or on a set interval...
for the "where", depending on your app, you may want to store it, in a cookie, local-storage, on the server-side (if the user needs to log in to read the eBook)...
Restore the position when the user return, by retrieving the stored data, and scroll to that position using
window.scrollTo(0, position);
so the real problem here is, when and where to store the position, and that depends on your application.

I made small jquery plugin that you can include and have this functionallity without cookies etc. Include just before end of body tag.
<script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script>
</body>
https://github.com/evaldsurtans/maintainscroll.jquery.js

You could always use the onbeforeunload event to check when the window is being closed, and set a cookie with the current position. Than every time the page is loaded just check if that cookie is set. If it is - use the value to redirect the user to the saved position.
Update
You should understand the concepts in order to make it work. You can read about cookies and how to interact with them in javascript here. The link contains a live example.
The onunload and onbeforeunload are javascript events which you can use to detect when your page is being closed. You should google what they are and how to use them.
You could check this stack-overflow question for an answer how to jump to a specific offset and this one to see how to retrive it.
I gave you all the puzzle pieces, it's up to you to put them together.