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?

Answer 1

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