Como manter um elemento fixo e sem ser alterado mesmo mudando de página, em um site.
Tipo, um player de música, igual aos sites
porém, que não seja com ajax, se é que é possível ?
Como manter um elemento fixo e sem ser alterado mesmo mudando de página, em um site.
Tipo, um player de música, igual aos sites
porém, que não seja com ajax, se é que é possível ?
Se eu entendi bem, o que você quer é fazer uma navegação AJAX. Conheço duas formas de fazer isso, que é usando AJAX (mas você mesmo citou que não deseja isso) e a outra é um esqueminha usando dois iframes, não gosto de usar, mas é uma possibilidade.
Veja o exemplo:
iframe {
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
border: none;
}
<iframe src="http://letras.mus.br/charlie-brown-jr/300373/"></iframe>
<iframe src="http://letras.mus.br/mag/1751246/"></iframe>
Não sou fã da técnica, mas funciona. É a única maneira que consigo pensar de como fazer o que quer sem usar AJAX.
@Edit
Caso queira fazer com AJAX, vai depender muito do tipo de página que está trabalhando e tudo mais.
Mas supondo que tenha ali um menu com vários links e uma div
principal que terá seu conteúdo sempre atualizado, você poderia usar algo assim:
;$(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;
});
});
});
Mas ai vai da sua necessidade, o código acima é bem fácil para adaptar para qualquer coisa que for fazer com AJAX.