How to make fixed (static) HTML elements on every page of site

Question

How to make static fixed HTML element on every page of site?

I mean - for example, it is music player on site. It's displaying in corner of page, and while navigating on site - it doesn't reload.

Also, If you open many pages of site (different tabs) than state of this element is the same on all pages. (If I change something in this element on one page - it's changed on every page).

For real example I can provide a link (I think, it's allowed to do this on this site): http://www.jamendo.com/en/album/40689

If you click "Play" - music player is opened. If you open other artist in other window - two players will be the same. If you have changed volume in one window - volume is changed in other too.

What techniques are used here? Can you give some references to read about such technologies?

Answer 1

Well I can give you a general idea of how I would do it.

You would need to persist the data of the feature you wan't to be the same across all pages.

For example: if you wanted something to be in the same position across all pages, you could store the current position of that variable in a session variable, cookie, or database for that particular user/ip address. Then you would make GET requests to the server "asking" for the most recent position of whatever you're tracking. And if it's different update the position accordingly.

You would need to make use of Javascript, A programming language, and some kind of data persistence.

If you want to read about the newest stuff, you could easily do this with node.JS. There is a library out there that makes it very easy to reflect server side changes on the client w/o making GET requests (making it a good for chat applications).

Answer 2

You can use local storage to store the current settings and poll them from each open instance. You won't need to use AJAX or the server if you only care about the settings being synchronized across one machine.

Answer 3

Hopefully the site is working the same as it was when you posted the link...

This site is using Flash which seems to be using LocalConnection and ExternalInterface . The Flash object in the popup is the one actually playing the music. The controls on the page are calling a Flash object on the page which just sends commands to the popup.