Arquivos de Tag: DHTML

Crie efeitos para aparecer e ocultar elementos com jQuery

No exemplo vamos mostrar o uso simples das funções de efeitos de jQuery. Vamos implementar um simples efeito de ocultar e mostrar um elemento da página web. Com jQuery faremos que ao clicar os links se oculte e se mostre a camada, com as funções da biblioteca Effects. Para começar, este é o código HTML do exemplo, que compreende tanto a camada como os links. Isto é uma camada que nos servirá para fazer efeitos! Ocultar a camada | Mostrar a camada Agora vem a parte interessante, que é na que associamos eventos a estes dois links e codificamos as chamadas às funções de Effects, que farão com que se mostre e se oculte a camada. O código Javascript, que faz uso de jQuery seria o seguinte: $(document).ready(function(){ $("#ocultar").click(function(event){ event.preventDefault(); $("#camadaefeitos").hide("slow"); }); $("#mostrar").click(function(event){ event.preventDefault(); $("#camadaefeitos").show(3000); }); }); Como se pode ver, primeiro temos que definir o evento ready do objeto $(document), para fazer coisas quando o documento está preparado para receber ações. Logo, se define o evento click sobre cada um dos dois links. Para isso, invoco o método click sobre o link, que selecionamos com jQuery através do identificador da etiqueta A. $("#ocultar").click(function(event){ Com isto estou definindo o evento click sobre o elemento com id="ocultar". Dentro da função a executar quando se clica, se coloca a chamada à função dos efeitos. $("#camadaefeitos").hide("slow"); Isto faz com que nossa camada, a que havíamos visto o identificador (atributo id) "camadaefeitos", se oculte. Passamos o parâmetro "slow" porque queremos que o efeito seja lento. Agora vejamos a função dos efeitos com outra chamada: $("#camadaefeitos").show(3000); Isto faz com que se mostre o elemento com id "camadaefeitos", e que o processo de mostrar-se dure 3000 milésimos de segundos. Segue o código do exemplo completo. Leia Mais »

Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais. Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade. Essa é um efeito simples q movimenta o texto com a propriedade text-indent. XHTML: Inicio Portfolio Contato CSS: #animation-1 li{ width: 200px; } #animation-1 li a { display: block; padding: 10px 5px; width:190px; background-color: #ccc } jQuery: $(document).ready(function(){ $("#animation-1 li a").hover( function(){ $(this).animate({ textIndent: "30px" }, 500 ); },function(){ $(this).animate({ textIndent: "0px" }, 500 ); }); }); Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo. Leia Mais »

Criando um teclado virtual para aumentar a segurança das páginas

Use este script para implementar um teclado virtual (Virtual Keyboard) que aumenta a segurança em campos de senha. Essa técnica é bastante empregada em sites de bancos, usando o teclado virtual, você evita a ação de keyloggers (programas maliciosos da categoria do spywares instalados no computador sem que o usuário perceba e gravam tudo o que for digitado, inclusive teclas como backspace, delete, setas de direção, etc e enviam para o email do espião). Os keyloggers também podem estar presentes em computadores públicos como de lan houses e cyber cafés (instalados intencionalmente pelo dono) com o objetivo de capturar as senhas digitadas pelo internauta inocente. Leia Mais »

Criando um menu overflow simples

Este script cria o efeito de overflow num menu (menu que pode ser escondido e mostrado). O segredo está na manipulação da propriedade display da div menu-magico-link. Você pode chamar a função menu_magico() também com o evento onmouseover. Leia Mais »