We Keep Coding

Add to browser History without changing current URL

I have a 3 step signup process where each step is shown on the page using javascript without a page refresh. What I am trying to do now is add a back reference to what step the user was on so if they click the browser back button they will not lose all of their progress.
So for example, as the user navigates from Step 2 to Step 3 the URL stays at www.example.com. The user then clicks the browser back button. The URL should now be www.example.com?step-2.
I'm thinking that I will somehow need to use the History API to accomplish this but if I use window.history.pushState(null, null, 'www.example.com?step-2'), the current URL would be changed as well.
How would I accomplish adding to the history without changing the current URL?

If your objective is to not change the URL, but to still allow back and forth history state changes, your best bet would be to utilize the window's hashchange event listener. This would of course utilize hash references within the URL, but the base URL won't change:
function locationHashChanged() {
if (location.hash === '#step-2') {
// Do something here
}
}
window.onhashchange = locationHashChanged;
For further info on this, refer to official documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

back button - cookies

I have a search-page, and when I get the results (100 results/page) I use a counter/cookie to see how many times the user clicked on another page result. I use this counter for the "back button" to go back to the search page (and remember the inserted search values).
If the user goes to another search-page, it's the same result-page with other results.
Two examples:
1.
searchpage > result page (counter = 1)
=> back button = window.history.go(-1);
2.
searchpage > result page (counter = 1) > another result page (counter = 2) > another result page(counter = 3)
=> back button = window.history.go(-3);
This is working fine, but now I have a problem. The user can send the result page to another user by mail, if he clicks on the result page and clicks on the back button, I can't use something like window.history.go(X);
I tried with window.location.href("[url of the searchpage]");, but how can I check in my code if the user came from the search page or from a link in a mail?
I can use document.referrer.indexOf("[url of the searchpage]"). This is ok for the first page, but not if the user goes to another page-result. Because then my document.referrer.indexOf check is always false because he never comes from the search-page.
I work with cookies, if he clicks on the "back"-button I can change the value of the cookie, but if the user just close the page and reopen another result-page, the cookies are still existing and they have a wrong value...
Any idea?

Cookies are not shared between sessions. When a user opens a website in a new browser (e.g. by clicking a link in an email) that user will start a fresh session with new cookies.
Cookies will be remembered for a period of time in the same browser, even if the user closes the tab/window and returns to it later.
For this reason, it is conventional to use URLs to remember the current pagination in search results, e.g.:
search?q=term&p=4
Then your "Go back" link would have an href value of:
search?q=term&p=3
And for the page before that
search?q=term&p=2
etc.
And to switch to the same page but for a different search term:
search?q=new-search-term&p=2
This works universally and has become a design convention. Don't reinvent the wheel! You should modify the existing program to adopt this methodology, in my opinion.

Website duplicates query string parameters in in-site links

I have an issue with IsaFYI.com when Google URL tracking code is used.
For example, if one goes to the page: http://isafyi.com/mom-of-two-covers-college-expenses-with-isagenix-business/then clicks on the recognition link at the bottom of the story, they will be taken to the page http://isafyi.com/category/recognition/. If one were to then click on the link for Sales Promotions, they would be brought to the page http://isafyi.com/sales-promotions/.
However, if tracking code is placed on the first page, (in this case, ?utm_source=test&utm_medium=test&utm_campaign=test,) the first url looks like this:
http://isafyi.com/mom-of-two-covers-college-expenses-with-isagenix-business/?utm_source=test&utm_medium=test&utm_campaign=test
If one clicks on this link, and now clicks on the recognition link at the bottom of the page, they are brought to
http://isafyi.com/recognition/?utm_source=test&utm_medium=test&utm_campaign=test?utm_source=test&utm_medium=test&utm_campaign=test
If you look carefully, you can see that the tracking code is now on the link twice:
http://isafyi.com/recognition/
?utm_source=test&utm_medium=test&utm_campaign=test
?utm_source=test&utm_medium=test&utm_campaign=test
If from this page one were then to click on the Sales Promotion link, they would be brought to:
http://isafyi.com/salespromotions/utm_source=test&utm_medium=test&utm_campaign=testutm_source=test&utm_medium=test&utm_campaigtestutm_source=test&utm_medium=test&utm_campaign=testutm_source=test&utm_medium=test&utm_campaign=test
The doubled code has been doubled again. This increases exponentially with each click on an internal link.
If a user now clicks on a link leading to an outside site, it is rejected by the server. The message that appears is:
The requested URL was rejected. Please consult with your administrator.
Your support ID is: XXXXXXXXXXXXXXXXXXXXX

You have a javascript file "isafy.js". There you have a piece of code:
var curUrl = window.location.href; // Gets the url of the current page
var qs = curUrl.slice(curUrl.indexOf('?utm_')); // Checks url for Google Analytics Query string and if it exists, it is stored in variable 'qs'
// If 'qs' has 1 character or less it is cleared out
if(qs.length <= 1){
qs = ""
}
// Goes through every a link on the page and appends the Google query string to every link
$('a').each(function() {
var href = $(this).attr('href');
href += qs;
$(this).attr('href', href);
});
This code adds the utm strings but does not check if the parameters have already been appended. So with every clicked link you get another instance of the parameters added to the url (so Crayons comment was spot-on).
I couldn't even tell what this is for - for Google Analytics it's enough if the parameter is set on the landing page. If you need the utm values somewhere else in the page you should consider using a cookie, if not drop this piece of script.

remember most recent click

So I want to be able to have a different styling for a link after you go to the page it's clicked on. I have been using the following code:
$(document).ready(function(){
var url = document.URL;
function contains(search, find) {
return search.indexOf(find) !== -1;
};
$('#topbar a').each(function(){
var link = $(this).attr('href');
var answer = contains(link,url);
if(answer === true){
$(this).addClass('check');
}
else{
$(this).addClass('nocheck');
};
});
});
This goes through the links in my navigation bar and checks if it's on the same page as the link, and it works, but I can't use it in one specific case: Random.
I have a link that generates a random page from the pages I have, so it does not have a specified link as it links to a function to randomly generate the page (note: I cannot change the function or access information from it).
So how can I detect that the random link was clicked previously so i can give it the .check class

If i understand your question correctly, your function does not work for the randomlink because this has a href like http://mysite.com/random, but the server will actualy redirect you to a different page, like http://mysite.com/about-me, and therefore the url of the active page does not match the href of the random button, and it will not get the active state.
One could argue if you would want it to get the active state, cause clicking it again would not (likely) bring you to the same page, but that is besides the question.
I can see to ways to solve this.
server side:
In stead of redirecting to ie. http://mysite.com/about-me in the random function, you could also redirect to http://mysite.com/about-me?random. By adding this get variable, you should not change the behaviour of the link (unless you have some very strict controller, or that variable is actually used, but that is unlikely). You could then detect with javascript if that variable is present in the url, and then activate the random button.
Something like this:
$(document).ready(function(){
var url = document.URL;
// check for random
if (url.indexOf('?random') >= 0) {
$('#topbar a.random').addClass('check');
}
// check all other
$('#topbar a:not(.random)').each(function(){
if($(this).attr('href').indexOf(url) >= 0){
$(this).addClass('check');
}
else{
$(this).addClass('nocheck');
};
});
});
cookie:
If you do not have acces to the server side random controller, you could do it entirely with javascript, by the use of a cookie (the only way I know to make a variable persist trough page requests).
On click of the random button, you would first set a random cookie to true with javascript, before letting the actual link do it's thing. On entering the page, you could then do a similar check as in my previous option, but in stead of the url you check if the cookie is tre. If so, you change it to false (so on the next page request the random button will not be active again) and set the randombutton to active.
As I believe the first solution is to be preferred (cookies should only be used as a last resort, they are sent on every page request, which means extra data, and your user might have cookies disabled, or there might be laws against using cookies, so the function could not always work), I will not write the javascript yet. Feel free to ask if you prefer this solution and need further help however.

URL change ajax call in Facebook

In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.
For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar
FROM >facebook.com/foo?bar=foobar&xxxx=
TO > >>facebook.com/foo?bar=boobar&xxxx=
and this is not hashed change also
like
FROM >facebook.com/xxxxx#xxx=xxxx
TO > >>facebook.com/xxxxx#xxx=yyyy
How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.
If using an iFrame, how to implement this ?

I use somehting similar to this
try {
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page", href);
loadPage(href);
}
catch(e) {
window.location.hash = "#!/"+href;
}
If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.

wow. I just asked it few minutes ago ... use search next time ;)
Dynamic favicon when I'm proccessing ajax data
Modify the URL without reloading the page

There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.

They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.