Divs invisíveis com JavaScript


Para usar o truque das ‘divs invisíveis’, basta utilizar uma pequena função JavaScript que fará a mágica acontecer.

O que o código realiza, é ocultar uma div que não necessite ser visualizada, dando lugar a uma outra, com base no clique em um link, imagem ou mouseover.

Para isso temos a função JavaScript (existem muitos modos de se realizar essa tarefa), que deve ser colocada entre as tags ‘head’:

JavaScript

function mostraDiv(id,div2)
{
var divstyle = new String();
divstyle = document.getElementById(id).style.display;

var divAux = new String();
divAux = document.getElementById(div2).style.display;

      if (divAux=="block" || divAux == ""){
       document.getElementById(div2).style.display = "none";
    }   

    document.getElementById(id).style.display = "block";
    return false;
}

O que o código está realizando, é uma situação na qual ele verifica se existe uma div já sendo exibida, caso esteja, ele coloca ela como “none” (invisível) e seta a div desejada como “block” (visível). Ao utilizar o block/none ao invés do visibility:hidden/visibility:visible, nós tiramos o espaço alocado para a div que está invisível, tornando-a imperceptível ao usuário que estiver na página.

Para utilizar na sua página, basta incluir o HTML abaixo:

HTML

<a href="#" onclick="displayDiv('teste','teste2')"> </a>
<a href="#" onclick="displayDiv('teste2','teste')"> </a> 

<div id="teste">
  teste
</div>

<div id="teste2" style="display:none;">
  teste2
</div>

Fonte: http://msdn.microsoft.com/pt-br/library/hh475808.aspx

Anúncios

Mudando Imagens com um Clique ou mouseOver


Uma das técnicas bastante utilizadas via JavaScript, é a alteração de alguma imagem quando ela é clicada ou passa por um mouseover.

Uma maneira simples de se fazer isso, é passando como parâmetro de uma função JavaScript um indíce para cada imagem que voce deseja alterar, fazendo com o que o JavaScript encontre qual das imagens devem ser alteradas:

JavaScript

function mudaImagem(i) {    

    if (i == 1) {

        document.getElementById("imagem1").src="imagem1.jpg";

        document.getElementById("imagem2").src="imagem2_not.jpg";    

    } else if (i == 2) {       

        document.getElementById("imagem1").src=" imagem1_not.jpg";        

        document.getElementById("imagem2").src="imagem2.jpg";    

    }

}

O código recebe um índice, com base nisso verifica quais das operações deve realizar. Nesse caso fiz um exemplo alterando duas imagens, quando uma é clicada, a outra muda para uma imagem não selecionada e a imagem clicada, muda para uma imagem selecionada.

Se o seu caso seja apenas de alterar imagens ao longo da página, sem que elas interfiram uma com as outras, basta remover a linha de alteração da segunda imagem de cada operação de mudança.

Para utilizar na sua página, basta incluir o HTML abaixo:

HTML

<a href="#" ><img src="imagem1.jpg" alt="Imagem1" id="imagem1" onclick="mudaImagem(1)"  /></a> 

<a href="#" ><img src="imagem2_not.jpg" alt="Imagem2" id="imagem2" onclick="mudaImagem(2)"  /></a>

Com isso você incializa sua página com uma imagem já como seleciona e uma segunda imagem ainda não selecionada, para poder testar a transição entre ambas.

Fonte: http://msdn.microsoft.com/pt-br/library/hh475801.aspx

Utilizando o seletor each do JQuery para percorrer elementos


 

Neste post  irei demonstrar como pesquisar de forma dinâmica todos os elementos que você desejar utilizando o framework do JQuery,  o que faz você economizar algumas linhas de código caso utilize o javascript puro.

Como exemplo irei criar uma página em HTML que utilizará jquery para percorrer todos os elementos DOM (Document Object Model) e alterar a cor de todas as divs do documento após o evento click do botão.. Vamos por a mão na massa (melhor dizendo, no teclado).

Continue lendo “Utilizando o seletor each do JQuery para percorrer elementos”

Introdução ao JQuery


Neste post irei  mostrar um pouco dos recursos que o JQuery, poderá trazer de interatividade nos seus websites.

O JQuery é uma biblioteca Javascript que foi desenvolvida para simplificar os scripts que rodam no lado cliente que interagem com o HTML, essa simplificação é muito grande se comparado ao Javascript propriamente dito.

Para aqueles que já possuiram algum contato com a linguagem de scripts Javascript, a curva de aprendizado é bem tranquila, pois a sintaxe é a mesma, o que muda é a implementação de novas funções que visam facilitar a escrita e leitura do código para uma possível manutenção ou reaproveitamento;

Continue lendo “Introdução ao JQuery”

Scroll in to view e hidden (html5)


 

Scrolling into view

Um truque simples, mas muito útil. Você pode fazer:

document.getElementById('aviso').scrollIntoView()

Isso vai rolar a página até que o elemento com o id “aviso” esteja visível no topo do viewport. Você pode passar um parâmetro opcional top:

document.getElementById('aviso').scrollIntoView(false)

O valor default é true. Se você passar false, a rolagem vai deixar o objeto visível na base do viewport. Continue lendo “Scroll in to view e hidden (html5)”