Thanks for reading my question.
I saw Gizmodo & Lifehacker has this feature.
Take a look at this http://lifehacker.com/
When you click link in right sidebar, example (http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers). The address bar show "http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers", it means new page are opened. But contents of current page is not changed, like AJAX load. But the different is: when using AJAX load, we will make request to new page, but address bar is still current URL. And lifehacker.com's address bar shows destination URL, not current URL.
I tried to inspect request, and saw Lifehacker.com make POST request to opened page (http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers), and then render contents, like AJAX load does, but my problem is Why their addres shows new URL instead of URL (or hashbang URL like http://lifehacker.com/#something).
I tested in different browsers, and this feature only work with Chrome & FF, not Opera and IE, so I think is features of Chrome & FF, is it right ?
Thankyou
This is achieved through the HTML5 history API or older hacks that included an iFrame..
See this article on information on HTMl5 History:
http://diveintohtml5.ep.io/history.html
See this demo for the code in question.
You may also want to look at the PJax library that provides this functionality (through the above means)
Related
I found on a google website, that they realized a url-change without reloading of the whole page.
Example:
you are on www.googleio.com/first
click a button
url changes to www.googleio.com/first/second
the content "first" disappears with an transition to the left, and the content of "second" appears with another transition. the page isnt reloading.
how is this done?
someone told me, that you use the Javascript function 'Header("Location: ../second")', which is aborted after the browser types the url into the adressbar, but before he reloads. the you just let the new content appear with some other javascript. is this true? i couldnt find anything about this.
or is there another solution?
thx a lot!
This does not seem like an actual page reload, however an use of AJAX with a pushState router.
What is actually happening is that your browser is making an AJAX call to fetch the next page, and then displaying it when it has received it.
It is using the HTML5 pushState feature to update the URL.
pushState (which you can read more about here) is an HTML5 feature which is similar to the hashes (#) that sites used to use.
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 have an ASP.NET MVC 3 app that I have built as a single page app that following the example(s) in the BigShelf SPA using Knockout.js and History.js to handle user interaction and navigation. Everything works fine, but I'm noticing a weird quirk with the title being displayed in the browser tab:
When the app loads, the browser tab title properly displays the content of the <title> tag, i.e., My Single Page App
When History.js uses either pushState or hashChange (depending on the capability of the browser) to modify the URL, the browser's tab title is set to the newly modified URL, i.e., the browser tab now reads http://www.mysinglepageapp.com/modified/url
Again, functionally there's no problem, but it's odd to me that the tab title is also modified. This is happening in all browsers that I've tested (IE6+, FF, Chrome, Safari).
Is their anyway to change or control this behavior?
Going off of Bergi's comment, I took a closer look at History.js and the wrapper provided in the BigShelf SPA example.
Turns out that History.js provides a method that accepts a parameter of which title should be displayed history.pushState(params, title, url). The wrapper in the SPA passes the url as the title. I changed that to the name of my app and that solved the "issue".
I am trying to dynamically change the URL displayed to the user and change the id of the body without refreshing the page. The function I require is very similar to flickr.com when you click on an image, the pop-up appears. The id of the body has a word appended to it, and the url of the website also has a word appended to it.
An example would be:
http://www.flickr.com/photos/orangeacid/459207903/
There is an image there, if you click on the image the URL changes to as follows:
http://www.flickr.com/photos/orangeacid/459207903/lightbox/
(This new page is just overlaying the old one)
Before clicking on the link the body tag is as follows:
document.body.className = [document.body.className, 'js'].join(' ');
...
After clicking on the picture it changes to:
document.body.className = [document.body.className, 'js'].join(' ');
...
Flickr uses Yahoo's YUI library and what you are talking about is the lightbox component, and the history utility.
There is no all-in-one function, you have to build it yourself, using the library.
Note about the url : HTML5 adds a new history API that allows javascript to change the url (pushState) without reloading the page and without using the "hash" hack. It's available in webkit (Chrome, Safari) since a while and in Firefox 4. Using history from YUI will help you implementing this.
I have recently started to repatch the jquery fancybox plugin to work with the History API. Which does something similar to flickr's implementation.
However, it might just be the history API you are talking about
Click here to see my plugin on github
Click here to see an introduction to the History API
Click here to see my talk on the history API
:)
Hope it helps
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?