• Tweet
• Email

• Tweet
• Email

Quantas vezes, ao longo da sua carreira enquanto blogueiro, ficou pensando no que meter na barra lateral do seu blog? No final, terá variadas soluções e se calhar nem todas fazem falta. Que quantidade de conteúdo deverá estar na barra lateral? Idealmente, a altura da área de conteúdos e barra lateral deverá ser praticamente a mesma, para evitar que hajam espaços sem conteúdo, que tanto valor têm, tanto na barra lateral, como na área de conteúdos. Se tiver uma área de conteúdos com um artigo extenso, e uma barra lateral com pouco conteúdo, a página irá ficar descompensada e menos atrativa para os visitantes. Se tiver uma barra lateral com muitos conteúdos e tiver um artigo pequeno, vai ficar com uma página horrível e super descompensada, sem conteúdo a acompanhar essa mesma barra lateral Uma solução interessante é utilizar a barra lateral de seu blog para ganhar dinheiro com programas de afiliados por exemplo, sendo que esta é apenas carregada quando existe espaço para isso mesmo.

Pois bem, para resolver de uma vez por todas estes problemas, trazemos até si um truque super útil que vimos no CSS-Tricks, que irá deixar os seus visitantes espantados com a sua criatividade e bom gosto na programação do visual da sua página. Iremos explicar de forma detalhada e directa como conseguir aplicar esta dica com sucesso. Esta solução consiste em carregar conteúdo na barra lateral apenas quando é necessário, de forma automática e limpa.

MEDIÇÃO DA ALTURA DA ÁREA DE CONTEÚDOS

É necessário fazer a medição da altura da área de conteúdos, para que se possa identificar se é necessário carregar mais algum módulo para a barra lateral ou não. Para isso é necessário algum código:

Imaginando que temos:

<section id="main-content">
</section>

<aside>
</aside>

Primeiro vamos introduzir estes elementos em cache para que não seja necessário seleccioná-los mais do que uma vez, optimizando tempo e linhas de código:

var
   mainContent = $("#main-content"),
   aside       = $("aside");

Irá ser necessário testar repetidamente a altura da barra lateral, então não iremos cachear a sua altura. No entanto vamos criar uma variável para a altura da área de conteúdos principal.

var height = mainContent.outerHeight();

Agora vamos correr um pequeno testo para ver se a barra lateral tem espaço para introduzir mais conteúdo. Isso irá ser feito comparando a altura da área de conteúdos com a altura da barra lateral. Se a altura da área de conteúdos for superior à barra lateral, irá carregar mais conteúdo.

if (height > aside.outerHeight()) {
        // Carregar mais conteúdo para a barra lateral
}

CARREGANDO OS MÓDULOS

Vamos usar uma livraria de JavaScript, jQuery, que torna o carregamento de conteúdo AJAX bastante simples. Imaginemos que temos um ficheiro chamado sidebarmodule.php que tem o código para um módulo adicional da barra lateral, poderia ser carregado desta forma:

$.get("sidebarmodule.php", function(data) {

  // Criar a caixa na barra lateral
  $("<div />", {
    "class"  : "sidebar-box",
    "html"   : data

  // Carregar o novo módulo
  }).hide().appendTo(aside).fadeIn();

});

No entanto, este procedimento apenas carrega um módulo. É boa política ter opção de poder carregar mais do que 1 módulo adicional, para que possam ser inseridos à medida da necessidade. Então vamos tornar o ficheiro sidebarmodule.php um pouquinho mais inteligente e vamos ensiná-lo a introduzir o módulo correcto baseado no parâmetro GET:

<?php

        $module = $_GET['module'];

        if ($module > 3) { echo "Não existem mais módulos"; return; }

        echo "<h3>Módulo Lateral #$module</h3>";

        switch($module) {

                case 1: ?>
                        <p>Aqui poderá introduzir o que quiser.</p>
                        <?php break;

                case 2: ?>
                        <p>Aqui poderá introduzir o que quiser.</p>
                        <?php break;

                case 3: ?>
                        <p>Aqui poderá introduzir o que quiser.</p>
                        <?php break;

                default:
                        // No caso de ser necessário dar informação de erro
                        echo "<p class='error'>Sem mais módulos</p>";
        }
?>

Criámos apenas 3 módulos. Agora vamos certificar que nada irá ser feito se obtermos uma resposta que não há mais módulos:

var module = 1;

$.get("sidebarmodule.php", { "module": module }, function(data) {

  if (data != "Não existem mais módulos") {

    module++;

  }

});

CONSIDERAÇÕES

Iremos necessitar de recorrer constantemente ao pedido AJAX para carregar mais módulos quando fazemos o teste e se verifica que há espaço para módulos. Então iremos criar uma função e depois chamar essa função quando for necessário. Também se deve certificar que a função para quando ficámos sem mais módulos para carregar, então cria-se uma variável done que é um ponto de paragem se a resposta do script for “Não existem mais módulos”. Por último criamos uma salvaguarda para a altura, pois se a diferença de altura for pequena, não há necessidade de carregar um novo módulo, então define-se por exemplo a salvaguarda com 80px. Desta forma só irá ser carregado um novo módulo se a diferença for superior a 80px.

Aqui fica todo o código:

var mainContent = $("#main-content"),         /* "Cache" */
    height      = mainContent.outerHeight(),
    aside       = $("aside"),
    module      = 1,                           /* Começa com o primeiro, e incrementa */
    buffer      = 80,                          /* Aqui define-se a salvaguarda */
    done        = false;                       /* Se não houver mais módulos disponíveis para carregar */ 

function getMoreContent() {

        $.get("sidebarmodule.php", { "module": module }, function(data) {

                if (data != "Não existem mais módulos") {

                        // Incrementa # para que da próxima vez seja carregado um módulo diferente
                        module++;

                        // Cria caixa na barra lateral
                        $("<div />", {

                                "class"  : "sidebar-box",
                                "id"     : "sidebar-box-" + module,
                                "html"   : data,
                                "css"    : {
                                        "position": "relative",
                                        "left": 25
                                }

                        // Aparecimento do conteúdo da caixa
                        }).hide().appendTo(aside).fadeIn(200, function() {
                                $(this).animate({
                                        "left": 0
                                });
                        });

                        // Se depois de carregar o módulo, continua a haver espaço disponível, começa de novo
                        if ((height > (aside.outerHeight() + buffer)) && !done) {
                                getMoreContent();
                        }

                }

        });

}

// Teste inicial
if (height > (aside.outerHeight() + buffer)) {
        getMoreContent();
}

Aproveite esse código e carregue conteúdo de forma dinâmica na barra lateral do seu site ou blog, somente se existir espaço para que esse conteúdo seja carregado. Se não houver espaço disponível, o conteúdo não é carregado.

Até Já!