I'm well aware of the technique of using URL fragments to track state on an AJAX powered webpage, but lately I've noticed a lot of sites that are doing something similar but without fragments.
The picture viewer in the latest version of Facebook for example operates this way. The left and right navigation buttons are simple links with no fragments that when clicked change the browsers URL without doing a full page load.
Another example is GitHub's repository browser, each of the files/folders is a simple link that changes the page state and browser URL without reloading or using page fragments.
Can anyone explain, or point me to an explanation of how this works? I've done some searching, but there is so much content on using fragments that I haven't been able to find anything.
I believe this is due to the new History pushState HTML5 feature
They are using new HTML5 History API. I think this is what you want. check the menu items in this page http://tinywall.info/demos/html5-history-api/menu1.php
The tutorial to implement is right here : http://t.co/M4RvnvoQ
Related
i was on Spotify's web player and was looking to build a similar website.
Everything on their i understand except how they can update the url without refreshing the entire page. I know how to do this with hashtags but they do not use this!
does anyone have any idea how they do this?
They seem to be using the HTML5 onpopstate event that is implemented using JavaScript.
See this article, HTML5: Changing the browser-URL without refreshing page, which explains all.
I have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. Then I came across a website that does it differently.
If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections.
How is this done? I looked for explanations on how to do this but never found a good answer. Any help in determining how this is done would be great.
Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded.
The technique you're talking about is using history.pushState() which is quite new feature of html5. More info you can find on MDN - Manipulating the browser history
The trick this page does to move from page A --> page B involves 3 main steps:
Load the whole page B or only the content that is different from
page A (probably using XMLHttpRequest).
Swap in the changed content (e.g. updating the body,..)
Update the browser location bar with the URL of page B without
refreshing the page, using a particular HTML5 history method called
pushState.
I'm developing a simple one page website, where the pages scroll horizontally using the scrollTo() javascript library. I have a home / about / contact page. I was wondering if there was a way to still use some form of URL routing like www.example.com/about, to get the about page, and would get updated in the browser when the page was clicked in the navigation.
Your easiest bet is going to be to use hashes. i.e. www.example.com/#about
You can then use window.history (more reading) in order to change the URL without a page reload. Specifically, you will be looking for history.pushState() or history.replaceState()
Depending on what browser support you need, you might need something like History.js to fall back in IE.
You could load the page with Ajax
How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.
I'm trying to use history.back() inside of my Facebook app to go up our site hierarchy since the browser back button is obviously useless in this sort of situation. I'm using javascript to avoid having to manage history site on the backend but it's proving to be very buggy. Clicking a link with href="javascript:history.back()"causes the page to scroll around a couple times then actually causes top to go back...
Any help with this subject is greatly appreciated.
So it turns out that history.back() is not possible due to the way Facebook hacks around with the iframes that run apps. I ended up having to implement a pseudo-back link via an implementation in the server-side framework I was using.