Repositioning a webpage while keeping some elements static?

Question

Not sure if the best way to describe what I mean, the best way is to take a look at Facebook as I explain.

The bottom of Facebook will always remain the same, when all chat windows will open and will not move when the page changes, however the web page and address bar will change to the new requested page, it seems to me that the web page does not change at all, instead, the URL of the address bars, as well as the content of the page, changes.

I am working on a music player for a band website that I want to keep static on all pages of the site, without reloading and restarting each new page.

Answer 1

Looks like you want to create a template and use jQuery or a similar language to dynamically upload new content to part of the site? This way, jQuery will use ajax to load new content into part of the main window if you never experience most of the reloading of the main page.

You can use css to create the line below

#somelink{ position:absolute; bottom:0px; } 

HTML

 <a href="" id="somelink">click me</a> <div id="news">Replace me with new content</div> 

JQuery

 $("#somelink").click(function(){ $("#news").get("album.html",function(data){$(this).html(data);}); }); 

Answer 2

The bottom panel is position: fixed , which makes it relative to the viewport, not the document.

Other pages are loaded using XHR or AJAX.

Changing the URL is probably the identifier of the fragment unless you have a cutting edge browser that apparently uses the HTML5 history API ( GitHub now too).

Zach Wright, an engineer with our infrastructure team, implemented the story API to enable selective loading of page content via AJAX while maintaining readable URLs. Previously, the current state of the application was stored in a fragment of the URL, which led to indecent URLs such as "profile.php? Id = 1586010043 #! / Pages / Haskell / 401573824771". Now, since HTML5 allows you to separate the display URL from the current state of the application, it was able to display pages faster, save bandwidth and avoid polluting location bars of users.

Source