CODEWITHSUNDEEP
htmlpersistentaudio-player
Tanase Butcaru
Tanase Butcaru

Reputation: 992

Stop refreshing a specific div when browsing

I'm working on my website where I have a music player. The annoying part is that when I browse to another page the player stops and starts from begining... What I want is to have a persistent music player. So how can I make the div that contains the music player to be static when browsing to another page? The website: demo(dot)zdringhi-art(dot)com

Thanks!

Upvotes: 1

Views: 3722

Answers (4)

ZippyV
ZippyV

Reputation: 13028

Using frames is one solution but since you are using JQuery on your site you should check out .load (http://api.jquery.com/load/). It allows you to load the content of another page and put it somewhere in the current page. Something like this:

$(function () {
  $("a").click(function (e) {
    e.preventDefault(); // don't follow the link
    $("#ja-container").load($(this).attr("href") + " #ja-container");
    /* Load the new page using ajax request, take the content in #ja-container from that new page and put it in the current page's #ja-container */
  });
});

This is not a complete solution: when someone clicks Concerts -> Agenda you should keep Agenda visible.

Personally, instead of forced background music I'd rather like to see a page with Youtube videos of the people playing the music.

Upvotes: 1

kamui
kamui

Reputation: 3419

Gurav shah is correct, the web is stateless so if you are changing pages you only have a few options for this.

Frames, yes before anyone shouts this is what they were designed for. You could have the music player in one HTML frame and the rest of the page in another so when you move around you are only updating the main content frame.

Or do as gurav suggests and make your whole site one page and update the content with Ajax, so the music Div does not change.

Pass the current position of the player to the next page when you click a link. 

     <a href="#" onclick="window.location.href='{new page}?musicpositionseconds="+getsecond()+"'; return false">to another page</a>

Where getseconds() returns the current position of the music player and passes it to the next page then when that page is loaded you read in the variable from the URL and start the player from there.

Upvotes: 1

user900360
user900360

Reputation:

Well, yes HTTP is stateless. what you can do is create a cookie, and update it with current location/time value of the player, constantly. This way, when you go to any other page you can read time/location from cookie.

otherwise, in a cookie less approach, sending AJAXed location/time data back-forth server-client will be too much network.

If I was doing this, I would have gone cookie way.

Upvotes: 0

Gaurav Shah
Gaurav Shah

Reputation: 5279

WEB is stateless. So if you move to another page there is no way for a div to remain the same.

Although what you can do is that... Hmm as follows. Have a single page and have your div in there. Then the other part of the page is loaded via ajax. also when a link is clicked only parts of pages will be loaded. Seems too much of coding , but is the only feasible option. For eg take facebook

Upvotes: 1

Related Questions