Implement Ajax to keep background animation at same place throughout all pages.

Question

I was wondering what the best way to keep my background.asp file playing throughout all of my web pages.

My website www.marioplanet.com uses ASP #includes in order to keep certain parts of my website the same. So, if I want to change a link in my header, I just need to update 1 file.

Now, I was wondering how to keep my background.asp file loaded throughout my entire site, which has all of my music functionality, even when changing pages.

Therefore, the music and backgrounds are continuous throughout the entire site.

How can I most easily do this without restructuring my entire site? Or would I have to completely redo my site?

Answer 1

Hi BOSS

From what I understand, you're looking for a way to keep track of the state of e.g. a music player while your visitor is navigating around on your site.

The following ideas might help:

• Make your entire website an AJAX application where state is given through hash identifiers (take a look at Facebook and the jQuery History Forward plugin). With this you could start playing music and the user would navigate around the site without reloading the entire page (hence, without stopping the music).
• Set a cookie with the timestamp of when the music player starts (via Javascript). Now, when a page loads, check for the existence of such a cookie and, if returned, calculate the offset between cookie timestamp and current timestamp. Setting the player to that offset will pick up the music approximately where it stopped on the last page.
• Control the music in a separate pop-up window. Old fashioned and not really nice in terms of usability.
• Control the music in an invisible frame that doesn't reload. Very old fashioned and with major backlashes for the user (there is a reason why traditional frames are out-dated).

Hope this helps. :)

Answer 2

If I understand you correctly, you are essentially wanting to have the background and music (which can be loaded in the background) never reload once the user visits the site. THe best way to do this is to make the site a completely AJAX based application, and use jQuery to load pages into divs when the user is navigating through the site.

Essentially you will want to create an index page which holds your backgound, and also contains a 'content' div. When a user clicks on a navigation button using the jQuery .load() method to load the requested page into the content div.

Another option is to go with jQuery UI, and have an element like their tabs component where you define all of the different pages of the site, and then it takes care of all the heavy lifting for you.

There are a few tutorials around for using jQuery with ASP.Net. I would definately go with it while trying to do something like this.