How can I keep a music player in the page footer that doesn't reload when I click a link to a subpage?

Question

I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!

I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.

Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.

Answer 1

Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.

This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.

Answer 2

You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).

Answer 3

What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.

Answer 4

what are the SEO implications for this method? I have the same problem for a client site.

Answer 5

Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...

http://jonandroy.ca/

The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.