How to keep a fixed and unchanged element even by changing pages on a website.
Type, a music player, just like the sites
However, other than ajax, if that's possible?
If I understand correctly, what you want is to do AJAX navigation. I know two ways to do this, which is using AJAX (but you yourself mentioned that you do not want this) and the other is a schematic using two iframes, I do not like to use it, but it's a possibility.
See the example:
iframe {
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
border: none;
}
<iframe src="http://letras.mus.br/charlie-brown-jr/300373/"></iframe><iframesrc="http://letras.mus.br/mag/1751246/"></iframe>
I'm not a fan of technique, but it works. It's the only way I can think of how to do what I want without using AJAX.
@Edit
If you want to do with AJAX, it will depend a lot on the type of page you are working on and everything else.
But supposing there is a menu with multiple links and a div
main that will have your content always updated, you could use something like this:
;$(function() {
var content = $('#conteudo'),
menuLink = $('#menu a'),
loading = 'Carregando...';
// Captura o evento de clique no link do menu;
menuLink.click(function(event) {
// Previne que o usuário seja redirecionado para o link;
event.preventDefault();
// Troca o HTML da div#conteudo para o texto "Carregando...";
content.html(loading);
// Pega o href do link que foi clicado;
var link = $(this).attr('href');
// Faz a requisição AJAX;
$.get(link, function(data) {
// Pega o conteúdo da div#conteudo na página que será carregada;
var newContent = $('#conteudo', data ),
newTitle = $('title', data ).text();
// Troca o conteúdo atual pelo que foi carregado;
content.html(newContent);
// Seta o title da página;
$('title').text(newTitle);
// Muda a URL;
window.history.pushState(null, newTitle, link);
}).success(function() {
// Callback para sucesso;
}).error(function() {
// Callback para erro;
});
});
});
But there goes your need, the code above is quite easy to adapt to anything you do with AJAX.