I'm interested in the way lala.com works. They have a header that remains fixed at the top of the browser and they have a flash music player in it.
You can click on other links in the site and they are displayed below the header but the header is not disrupted and can continue playing music.
If the target is a modern browser say IE8 & FF 3.6, what's the best way to achieve this?
Thanks for any help.
Frames / Iframes
One way to achieve this is to create a frameset or use iframes to show the sub pages. The top (or bottom) frame would be a very tiny one, and containing your music player. The big frame would contain the page that is being browsed. This technique is used e.g. by Google when clicking on an image search result.
This method has its downsides: The user will see your URL in the address bar and not the one of the page being browsed. If the user enters something in the address bar, they will leave your frameset. It is not possible e.g. to write down the URL of the current page.
Ajax
The second, better way is to build a navigation that loads the other pages into the current page through AJAX. See an example implementation here. This will provide for smooth loading, music will continue to play. If done right, it is even possible to retain a healthy link structure that won't break external references, and have the "back" button work. The tutorial I link to covers both aspects. Just be careful, it's a 3-part tutorial. It works with JavaScript enabled only, though, but there are solutions that downgrade gracefully (falling back to the "normal" behaviour of switching pages when JavaScript is turned off).
Besides frames, you can do partial page refreshes with ajax. Instead of fully loading a new page on each action, you would do partial page refreshes. You can keep bookmarking and the back button functionality through careful coding. Libraries such as jQuery (and lots of others) make using ajax across different browsers signficantly simpler. EDIT A quick search revealed a Stack Overflow question on back button plugins for jQuery. So, if you use jQuery you can make this approach even easier.
Here's some stub code:
HTML
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="music-header">
<!-- ...Music header content goes here -->
</div>
<div id="content">
<!-- ...Body of different pages goes here -->
</div>
</body>
</html>
Javascript is provided in the link I provided on how to handle bookmarking and the back button.