Saltar para: Post [1], Comentar [2], Pesquisa e Arquivos [3]

A Equipa

O blog da equipa do SAPO Blogs. Um espaço para falar de blogs, esclarecer dúvidas e partilhar boas ideias.

Como pôr a barra lateral com a mesma altura da área de posts?

02.01.07 | Hugo
Temos recebido alguns pedidos de ajuda sobre como pôr as barras laterais do blog com  a mesma altura da área dos posts. Neste post vou mostrar um script que vai responder a estes  pedidos:

 
 
Template
2 colunas
 
Template
3 colunas
 

 

 

 

 
Antes Depois
 
Antes
 
Depois
 

 
Esta alteração não pode ser feita só com css porque a altura da área de post está dependente do conteúdo dos posts. A solução é escrever um script que vê a altura máxima da área de posts para depois alterar a altura da  barra lateral.

<script type="text/javascript">
    matchHeight=function(){
        var divs,contDivs,maxHeight,divHeight,d;
        var div_extra,div_extrab,div_posts;

        /* <div> a redimensionar */
        div_extras=document.getElementById('extras');
        div_extrasb=document.getElementById('extrasB');
        div_posts=document.getElementById('posts');
        divs=[div_extras,div_extrasb,div_posts];
        contDivs=[];

        /* altura maxima */
        maxHeight=0;

        /* procura altura maxima dos <div> */
        for(var i=0;i<divs.length;i++){
            d=divs[i];
            if (d) {
                contDivs[contDivs.length]=d;
                if(d.offsetHeight){
                    divHeight=d.offsetHeight;
                }
                else if(d.style.pixelHeight){
                    divHeight=d.style.pixelHeight;
                }
                maxHeight=Math.max(maxHeight,divHeight);
            }
        }

        /* redimensiona os <div> */
        for(var i=0;i<contDivs.length;i++){
            contDivs[i].style.height=maxHeight+"px";
        }
    }

/* Executa o script */ 
window.onload=function(){
    if(document.getElementById){
        matchHeight();
    }
}
</script>


Para pôr o script a funcionar:
  1. Copiar o código do script para um componente (Personalização intermédia > Componentes).
  2. Activar o componente na barra lateral (Personalização intermédia > Posições).
  3. Gravar as alterações.
O script funciona com todos os templates que tenham uma ou duas barras laterais.

Este script foi adaptado de um artigo publicado no site www.devarticles.com. Aqui podem encontrar uma explicação mais detalhada do funcionamento do script.
 

6 comentários

  • Imagem de perfil

    Hugo

    29.08.07

    Olá Alice,

    O script deste post é para por as barras laterais da mesma altura que a coluna dos posts. É um script que se coloca nos componentes e não é necessário alterar a css do blog.

    Não vale a pena colocar o código da css aqui nos comentários. É mais fácil indicar o endereço do Blog e nós depois verificamos qual é o problema

  • Imagem de perfil

    Mamã Alice

    30.08.07

    OK.... EU JA LA PUS NO COMPONENTE 10, E ADICIONOEU A BARRA DE LADO MAS NAO DEU NA MESMA...


    http://titicad.blogs.sapo.pt/


    OBRIGADO


    ALICE
  • Imagem de perfil

    Hugo

    30.08.07

    Já vi qual é o problema

    O script ficou todo numa única linha, e os comentários que deixei no código "apanharam" o script todo. Já corrigi o script que está neste post para que os comentários não afectem a execução do código.

    Para resolverr o problema, substitua o código que colocou no componente 10 pela nova versão.
  • Imagem de perfil

    Mamã Alice

    30.08.07

    OLÁ OUTRA VEZ. JA PERCEBI QUAL O PROBLEMA, AO FAZER COPY DO CODIGO AQUI EM CIMA, QUANDO COLAVA NO COMPONENTE FICAVA TUDO SEGUIDO. AO LER OUTROS COMENTARIOS ACIMA VI Q ESSE TB ERA UM DOS PROBLEMAS DE OUTRO BLOGUISTA.

    SEJA COMO FOR, JÁ ESTÁ!!!!! MUITO OBRIGADO PELA VOSSA AJUDA.

    JÁ AGORA, COMO POSSO REDUZIR UM POUCO O ESPAÇO "MORTO" NO CABEÇALHO? DE MANEIRA A QUE O TIULO DO BLOG "PRINCIPE DUARTE FIQUE BEM NA MESMA.

    OBRIGADA UMA VEZ MAIS

    ALICE


    http://titicad.blogs.sapo.pt/
  • Imagem de perfil

    Jonasnuts

    30.08.07

    Ó Alice, sabia que quando escreve em maiúsculas, é sinónimo de que está a gritar? :)

    Um dia destes faço um post sobre netiquette, mas entretanto, use as minúsculas, que nós conseguimos ouvir lindamente :)
  • Comentar:

    Mais

    Comentar via SAPO Blogs

    Se preenchido, o e-mail é usado apenas para notificação de respostas.

    Este blog tem comentários moderados.

    Este blog optou por gravar os IPs de quem comenta os seus posts.