How to save the music player in the page footer, which does not reload when I click on the subpage link?

Question

I tried to solve this problem for a while and looked at numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!

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

Basically, I'm looking for code or something that will allow the use of headers and footers (it doesn't have to be a JS header and footer) so as not to get updated when someone clicks on the navigation links located in my header. Thanks again to everyone who has a solution to this problem.

Answer 1

Make it like Facebook - use JavaScript to intercept link navigation, load content using XMLHttpResponse, and then refresh the parts of the page that need to be changed.

This preserves the static integrity of the page for search engines, allows most sites to continue to work perfectly for users with a disabled script, and does not allow to reset music for everyone else.

Answer 2

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

Answer 3

Here is another example of a group that uses the AJAX method to reload the contents of a page while still maintaining the player ...

http://jonandroy.ca/

The hashtag url gets updates every time you click on something, and if you copy this url when you visit it, you will see the main page load for a second of a second, and then load the contents of the page specified in the hashtag . Not an ideal, but an overall good solution to this age-related problem.

Answer 4

You can see how thesixtyone.com works. They have unrivaled music, using AJAX to rearrange the page when the link is clicked, rather than loading a new one. This is achieved by the fact that all links are anchors for the current page (that is, all links are relative and begin with a hash symbol).