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

2

How to keep a fixed and unchanged element even by changing pages on a website.

Type, a music player, just like the sites

link

link

However, other than ajax, if that's possible?

    
asked by anonymous 21.12.2014 / 05:07

1 answer

1

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.

    
21.12.2014 / 07:52