how to prevent an element from being reloaded when accessing other pages of the same site?

Question

How to keep an element fixed and without being changed even changing page, on a website.

Like a music player, like websites

http://letras.mus.br/

http://palcomp3.com/

but not with ajax, if at all possible ?

Answer 1

If I understand correctly, what you want is to do an AJAX navigation. I know two ways to do this, which is by using AJAX (but you yourself mentioned that you don’t want this) and the other is a sketch using two iframes, I don’t like to use, but it’s a possibility.

Take 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>
<iframe src="http://letras.mus.br/mag/1751246/"></iframe>

I’m not a fan of the technique, but it works. It’s the only way I can think of how to do what you 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.

But supposing there’s 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 very easy to adapt to anything you do with AJAX.