We Keep Coding

HTML5/Javascript: Content changing without adress changing

I have a question which I haven't been able to find the answer for. I hope you can help me.
I am about to build a simple website, containing text and hyperlinks. I want the site to have the same adress no matter which hyperlink is clicked. For example, if my website is www.website.com - when one clicks a hyperlink, the content of the whole page should change, but the adress should still be www.website.com, instead of www.website.com/hyperlink.html for example. In other words, I want to disable people to use the "back" button to return to an earlier page, and prevent them from navigating the page by writing in the adress bar. They should experience a single page, but still be able to navigate through a lot of changing content through links - which means that if they click the "back"-button, they will be navigated away from the website, and if they refresh the page, it will go back to 'index'. Can you point me in the right direction to which methods might be useful here? Earlier, I would have done it in Flash, and embedded the flash-construction into the website, but as far as I have heard, Flash is not the best solution anymore?
Thanks in advance.

First of all, that is not the best idea for SEO.
But that puts aside, you should use javascript to make AJAX call and alter the partial part of your page with the response.
So basically, what you will do is from your home page, capture all link clicked event, and process the request through an AJAX call, and display the result of that call on the same page.
That allow you to refresh a list of item, or a menu, or the entire page if you want.
Since it will be AJAX call, the user won't see any difference in the URL.

pushState on navigating off page and back

I am trying out popstate and pushState and I am wondering how to handle off page navigation.
Lets say I have an index page which generates a 'new page' when clicking something and it's loaded in with ajax. With popstate I change the url. In the page loaded are links that go outside of the current 'index' page. When somebody presses back they get a dumped state object.
How to prevent it so it actually loads the url that was given during the pushState?
Thanks in advance.

It seems you're doing something that causes the browser to replace its cached version of your index page with something else. Make sure your server sets the
Vary: Accept
header when returning the index page and later requests. See this Chromium issue for more information.

Have the link also use an anchor so the browser has a reference to fall back on.
Throw one of these at the beginning of each of the pages with a unique name attribute.
So your links would be:
Load the first page
and the page HTML would have this at the top somewhere:
<a name="first"></a>
Funny you made this post cuz I've got the exact same problem right now with this site I just started making yesterday: http://asims.fleeceitout.com - had to put arrows everywhere to keep people from gettin lost haha. I'll end up taking my own advice here but I'm too lazy for now. Plus I'm trying to see how much of the site I can make without a single <a></a> used.

url change without hash

I want to change url when i open big image in pop up window on a current page with preview images. I don't want use window.location.hash feature because i want to manipulate with new url through PHP next and i found this complex to made it with hash. So, I found that I can use HTML5 feature to make this.
window.history.pushState(“object or string”, “Title”, “/new-url”);
My problem is: I want to remove this new-url from page when i close big image. How can i make this, without using
window.history.back();
?
Thanks.

Closing the image is not analogous to pressing the back button in the browser. It is analogous to following another link back to the original page. So there's no need to go back. Just pushState again, back to the original URL.
On the other hand, if the person does click the back button in their browser, you want that to bring them back to the original page too. So you need to listen for the popstate event, and, when it's fired, run a function which will remove the popup image:
window.addEventListener("popstate", function(e) {
hideimage();
}
Read more about the HTML5 history API.

Using the BACK button to revert to the previous state of the page

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.

Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.

to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !

You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..

If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.

You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.

Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites

Back Button with iFrames

I'm using an iframe to display content that has links. When the user clicks around in the iFrame and hits "back," it goes back in the iFrame. This behavior is OK. However, once they're back to the first page of the iFrame and they hit "back" again, the entire window is taken back to the previous page. This is unwanted.
To prevent this behavior, I've put a fake "back" button within the iFrame. (In most cases this is bad UI, in this case, it works well). I'd like this fake back button to only go back if the previous page is the iFrame's page -- not the entire page. When they hit the fake back button in the iFrame, it should only move that iFrame back, nothing else. Is there a way to do this? Does an iFrame get its own history object?
Something that might be of benefit: the domain of the iFrame and the main window can be assumed to be distinct. So, if it's possible to read the "global" history object, I can check to see if the previous page was mine by checking to see if the domain is mine. If the domain is not mine, the fake back button will be hidden or not do anything.
Help greatly appreciated, and happy holidays!

document.location.href = document.referrer;

You should be able to use the javascript history object to push the user back; but you won't be able to stop it when the iframe-clicking runs out and the main page wants to go back. And you can't stop it because that's intentionally locked down pretty well in most browsers to prevent people from messing around with it maliciously.
You could write your own history tracking code and have the back button pop items off that stack, stopping when the stack is empty...
If you're using some complicated nesting of links - perhaps some javascript-based tree menu? That way the iframe never has a page refresh?
Without having an example, I have to say your design seems like poor UI... when I hit back, I don't want the navigation to change; I want to go back to whatever page I was just on.