4

I am a relatively new web designer. I have a question that I can't really figure out how to phrase that I was hoping I could have some help with! I am wondering how I can make it so my header doesn't "reload" when users click another page on my website. A good example is on the website for "Invisible Creature" (right here in particular: http://www.invisiblecreature.com/#/work/all/hexapillar). When you click on the different links, the header stays loaded (it doesn't "turn white" like it does on most sites). Sorry if it's a little confusing - Im having a hard time putting my thoughts into words. Thanks so much!! :-)

Chris Laplante
  • 29,338
  • 17
  • 103
  • 134
Jane M
  • 43
  • 4
  • 3
    You're looking for AJAX and HTML5 history and single-page applications. – SLaks Oct 14 '12 at 15:45
  • 2
    What you can do, instead of using the normal mechanism for loading a new page is to use AJAX to get the new page content and then swap it into the DOM. – Paul Tomblin Oct 14 '12 at 15:46

1 Answers1

2
  1. Build the site so it works normally (including reloading the shared content)
  2. Set up the server side part of the site so you can request the normal page or, with a modified URI, just the content.
  3. Using JavaScript, set up event handlers so that when a link is activated you test to see if it is to another page on your site, or elsewhere.
  4. If it is to a page on your site: preventDefault then use XMLHttpRequest to fetch the content of the page and DOM to replace the content section of the page with the new content
  5. Use pushState to change the URL to the URL that the link would have gone to
  6. Set up a popstate event handler so the right content is rendered when the user presses Back.

Make sure you use feature detection to fallback to regular links if the browser doesn't support any of XHR, pushState, etc.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335