2

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

http://letras.mus.br/

http://palcomp3.com/

porém, que não seja com ajax, se é que é possível ?

2
  • Lendo o título e a pergunta, eu pensei da mesma forma que o Nickolas Carlos. Tanto que o letras deixa o player de música fixo quando o usuário usa o scroll na página. Talvez "como manter um bloco sempre visível/ativo enquanto se navega por um site?" ou "como impedir que um elemento seja recarregado ao acessar outras páginas de um mesmo site?" facilite o entendimento de quem for responder. Até onde eu sei: AJAX. Commented 21/12/2014 às 18:14
  • Obrigado pela observação,corrige a pergunta ;) Commented 21/12/2014 às 18:26

1 Resposta 1

1

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.

8
  • Gostei da ideia do iframe, porém, como você disse, também não sou muito fã, mas você conhece uma técnica ajax, que não deixe a URL tão poluída ? Commented 21/12/2014 às 17:31
  • @UellingtonPalma, Depende muito do contexto... Vou deixar um exemplo de como eu faria algo com AJAX para você.
    – waghcwb
    Commented 21/12/2014 às 20:12
  • Muito obrigado @waghcwb, vou testar aqui, e marco sua resposta. Commented 22/12/2014 às 3:04
  • @UellingtonPalma, Sim, existe. Fiz uma atualização no código, agora ele pega o title da página e também muda a URL... Caso queira URL's mais 'personalizadas', você pode usar data-attr no seu HTML para a URL que quiser usar. Por exemplo: <a href="link" data-url="link-personalizado">Link</a>. E então use o método .data() do jQuery para ler isso...
    – waghcwb
    Commented 22/12/2014 às 14:25
  • @UellingtonPalma, pode nos disponibilizar o código que está usando ai? Nos meus testes o código funcionou bem.
    – waghcwb
    Commented 23/12/2014 às 15:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .