What's the easiest way to have one element on a webpage stay static while the rest changes?

Not sure if this is a really obvious question or not, but I need to have an embedded music player continue playing while the user views the rest of the website (clicking links to view different pages, etc.). So basically splitting the page into different segments, that load seperately. Years ago I would have done 开发者_JAVA百科this with the HTML frames but that's obviously not such a hot idea anymore.

Hopefully this makes sense, and thanks in advances for all responses.

Let's resolve the ambiguity in our use of the word 'frame'. While it is true that the <frame> tag will be discontinued in future versions of HTML, the <iframe> tag will continue to be supported, and it makes for an ideal solution to your problem. Your whole website will consist of two major elements in the body:

1. The music player, and
2. A nice big <iframe> to hold the navigable portion of your website.

This will allow the music player to play continuously while all the navigation occurs in a separate frame, effectively keeping the music player 'static', and the rest of the page dynamic. Best of all, once browsers begin to support HTML 5, you will be able to use the new seamless attribute to help integrate the frame into the look of your page. Until then, you will need to manually remove the border and scrollbars, to stay consistent across all browsers. You can achieve this with the following:

<iframe src="navigable_page.html"
             frameborder="0" 
             scrolling="no" 
             marginwidth="0" 
             marginheight="0" 
             vspace="0" 
             hspace="0">
</iframe>

Remember to set the height using CSS. With this approach, you also have a lot of flexibility in your layout, and you don't have to redesign anything if you don't want to. Options include having the frame take up the whole webpage, with the music player in front of everything else, draggable, resizable, etc. Web designers would wonder how you created a music player that is independent of the rest of the changing content. You could also have a table that occupies the whole page, with two rows. The top row could have the music player, and the bottom row could contain the frame with height set to 100%. Use frames, as in iframes, and you won't be disappointed.

You'll have to use javascript to load each section upon user request if you don't want to use a frame. Use something like the jQuery library to make it easy on yourself, you can set it up so that all requests update certain containing DIVs based upon what was clicked.

The "hot" idea of today is to make everything become AJAX. All the navigation and stuff. It's technically thought of a bad thing but is used for the usage you describe in some big sites, namely Facebook (for chat, very similar to your case) and Twitter (for header and updates).

You'd give each page a URL like mysite.com/#some-folder/some-page/someQueryKey/someValue

Note that it is "#/" because all the pages will be only ajax calls in the same page.

Since it is the same page, you can leave the part you want unchanged when doing your AJAX transfers

For technical details on how to implement this, search for stuff about implementing hash bang AJAX (that's what it's called as the official format Google can index is called so, and the URLs usually an exclamation mark after hash sign "#!/".

It's not the easiest to implement though, and means re-design of the whole site, so, you may want to consider other options:

1. Pop-ups: They are not 100% dead yet, and "may" be suitable for your situation.
2. Reloading: Maybe just store in some cookie every short time (using JS) the data you want and check for it on page load to resume from where you ended, the user will get slight stop in between though. hence, It may not be for music player.

For the UI of the widget itself, if you need it to be in a certain place in the page regardless of the scroll or whatever (always visible) you can use CSS positioning:

.music-player
{
    position:fixed;
    bottom:5px;
    right:5px;
}