URL change without flicker

Question

How can a page be reloaded with a new URL and the corresponding contents smoothly, so that the header does not flicker? For instance if on Twitter I click the menu items Home, Connect, Discover, the header stays displayed, no flicker. The only way I know this can be done is using Javascript, but Javascript cannot change URLs. What is the magic behind Twitter's website?

Thanks, your answer is useful in that you mention AJAX. But I still have to find out how to change the URL. This is not clear to me. — ideaboxer, Dec 20 '12 at 00:23
http://stackoverflow.com/questions/136458/change-the-url-in-the-browser-without-loading-the-new-page-using-javascript - here is how. — , Dec 20 '12 at 14:55

score 0 · Answer 1 · answered Dec 19 '12 at 23:10

0

You could use history.pushState to manipulate the currient url. And reload the page with ajax functions.

answered Dec 19 '12 at 23:10

rekire

45,039
29
149
249

history.pushState is available in only IE 10 – freedev Dec 19 '12 at 23:14
Who cares for IE? It is normal that nothing work in that browser. – rekire Dec 19 '12 at 23:16
@Jason... I mean about IE, pushState is available only in version 10 – freedev Dec 19 '12 at 23:44

score 0 · Accepted Answer · edited May 23 '17 at 12:10

They are simply using ajax.

The header does not flicker because it does not change. The ajax call ask for data, and when it gets it, it inserts it into the body.

For the body,

You could use an effects function to fade in the new content if you do not want an abrupt change when it is ajaxed in.

If you want to load your static data in one upload, you can then flip through static content using the CSS display property.

You can see that the browser is not loading a new url because there is no indicator.

Also, you can see the ajax indicator for twitter is running.

To keep a history of your ajax calls use info. from this post:

For ajax - Hashes vs HTML 5 History API?

For Twitter:

They are using CSS to flip through the page as the ajax indicator and the load indicator do not light up after the initial ajax call.

You can verify that they are using history by doing window.history.back() in the console.

To change the URL dynamically see:

Change the URL in the browser without loading the new page using JavaScript

URL change without flicker

2 Answers2