1

I just noticed when I click a photo on my facebook news feed, the window location changes, the photo appear's, but the content from the previous page is still at the back of the photo. You can see it because the background of the photo viewer is transparent.

How can this be achieved?

Jhon Andrew
  • 188
  • 3
  • 14
  • 6
    Look at this post to find your answer: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – David Esteves Apr 09 '12 at 19:33
  • I've answered assuming you mean you want to change the location without a page refresh. Is that correct, or do you just mean showing a photo over the existing content? – Phil H Apr 10 '12 at 20:12

2 Answers2

1

Well. the URL changes to something like this: /photo.php?fbid=10150643780577073&set=a.446526812072.240769.709452072&type=1&theater

There is enough information in the query string to know what page the user came from. This information is used to display the photo in the foreground and to include the original page in the background. So both pages use some if facebooks backend code to generate the html frontend and in the case of the photo.php page include something extra: the forground picture plus the necessary css & scripts.

Koen Peters
  • 12,798
  • 6
  • 36
  • 59
0

In the future it will be using HTML5's history API. But for cross-browser compatibility and backward-compatibility use the history.js library.

Pre-HTML5, the way to set the location without causing a page refresh is to append a # anchor position to the url, as though you had moved to an anchor position (traditionally used to move to and link to a specific paragraph on a page), e.g. url/to/page#someposition.

This generalises to representing a page state in the anchor; for example, a specific message in gmail has the URL https://mail.google.com/mail/?shva=1#inbox/2h42c4ahe7fge7 etc.

If you use history.js, you should be able to easily upgrade to pushState etc as and when they become widely supported.

Phil H
  • 19,928
  • 7
  • 68
  • 105