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

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

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)”

Detectando o pressionamento das teclas CTRL, Shift e Alt


Em certas situações é necessário saber sobre o pressionamento de alguma tecla específicas em nossas páginas, neste post mostrarei como detectar se as teclas CTRL, Shift e Alt foram pressionadas. Continue lendo “Detectando o pressionamento das teclas CTRL, Shift e Alt”

Bloqueando o botão direito nos navegadores


Este seguinte trecho de código é útil quando você não quiser que o botão direito do mouse abra um menu de contexto na sua página, impedindo assim a inspeção de um elemento qualquer, recerregamento somente de uma parte da página ou até mesmo uma das formas do usuário ver o código-fonte da mesma. Continue lendo “Bloqueando o botão direito nos navegadores”

Redimensionando uma janela ao seu gosto com JavaScript


Em caso de uma página ter que ser exibida em um tamanho X, poderemos utilizar os recursos do JavaScript para poder redimensionar a janela do navegador conforme necessitarmos, nos post anteriores, vimos como detectar as dimensões da janela do cliente, assim como detectar o redimensionamento e como reduzir o tamanho da mesma, neste post irei mostrar como ampliar as dimensões do navegador do cliente. Segue o seguinte trecho que poderá ser utilizado em seu website ou blog: Continue lendo “Redimensionando uma janela ao seu gosto com JavaScript”

Redimensionando uma janela do navegador com JavaScript


Neste post mostrarei como é possível dimensionar a janela do navegador do cliente da maneira que desejarmos utilizando a função resizeTo(), somente devemos passar como parâmetro o comprimento e a altura da janela para deixá-la nas dimensões predefinadas.

Segue um código de exemplo, onde o tamanho da janela é redimensionado assim que o usuário clica nela. Continue lendo “Redimensionando uma janela do navegador com JavaScript”