Web page Hash
There’s been a solution to the problem, not very elegant, but good for workaround. Many people and developers used to use the hash key to enable users to use the browser navigation buttons. One of the big players on the web scene, Facebook and Twitter, use this approach as well. The following links show how they have implemented it:
What is specific in the following examples is that they use hash key in the URL but also they have a separator: “!” this one makes sure that the following data has to be parsed in their application. You could use something like: explode(‘/’, $hash); to het all parts of the URL. In same time each different hash provides different URL for the browser and enables the navigation buttons so the user can go back and forth in the browser history. For jQuery there is a plugin thet enables you to use the hash and the browser history:
But now with HTML5 raise we have new option and solution for the former problem. HTML5 and in particular W3C has announced new document features and methods: jQuery History Plugin. Also there is pretty simple implementation of this functionality:
// Initialize Tabs
//get the index from URL
tabSelect = document.location.hash.substr(1,document.location.hash.length);
With these two options web developers can change the state of the page on-the-fly based on any event that occures on the page that the user is browsing. You can change the page title, URL and the state object which can be serialized and save on the client computer.
The former code will update the page URL the title will be changed to "Tab 2" and the state object parameter "test" will be set to 1. Thus if you have a image slider or tabbed content every time the user click on any of the tabs you can update the document state.
[cc escaped="true" lang="text"]http://yysource.com/tab1.html
The only problem is that the pushState is not supported by all browsers. At the time of writing the latest versions of Chrome and Firefox supported this functionality hopefully sooner than later will see all browser supporting HTML5 and will be able to use its full power and features.