Arquivos de Tag: JavaScript

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 restrições de segurança em páginas com JavaScript

Geralmente utilizo no trabalho alguns comandos rotineiros e que são indispensáveis nas páginas a formulários: onselectstart - bloqueia seleção oncontextmenu - bloqueia clique direito do mouse onKeyDown - ao pressionar tecla (a função VerificarClique retorna falso - cancela - ao clicar tecla F5.) event - evento/ação onLoad - Ao carregar página (chama função que não permite gravação na área de transferência) OBS: No navegador IE8 tudas as funções funcionam. Leia Mais »

Chamando função JavaScript através do CSharp

Quando faço meus códigos, eu tento ao máximo controla-los pelo C# e encontrei uma função que ajuda a manipular propriedades como "onclick" atraves do C#, sem precisar entrar no code do arquivo aspx. Neste exemplo vamos supor que queremos selecionar um produto de um cliente atraves de outra tela e ao fechar esta tela filha o produto selecionado aparecerá no campo da tela pai. Leia Mais »

Efeito Toggle para revelar e esconder usando JQuery

Um dos efeitos mais empregados em desenvolvimento com uso da biblioteca jQuery é aquele que proporciona ao usuário a escolha de revelar e esconder conteúdos. O efeito toggler consiste em mostrar e esconder elementos, o efeito carrega consigo implicitamente as seguintes facilidades: * é simples e fácil de ser projetado; * requer cuidados mínimos para ser “não obstrutivo”; * permite inserir muito conteúdo em pouco espaço; * facilita a visualização e entendimento dos conteúdos; * proporciona interação agradável com o usuário; * cria impacto visual interessante. Abaixo segue o código script que manipula o efeito, em anexo vai um exemplo de utilização do efeito toggle. Leia Mais »

CSS para resolução de tela

Muitas vezes, temos certos problemas quanto a resolução de tela em Sites ou Aplicações Web. Por exemplo, criamos um serviço muito útil para Web, criado primeiramente para resolução de tela 1024px ou superior, com três colunas de conteúdo, imagens grandes etc., e que recebe diariamente 10.000 visitas. Vamos imaginar que ao analizar as estatísticas do sistema, verificamos que 30 % dos usuários utilizam resolução 800 x 600 e 8% utilizam ainda a resolução de 640 x 480 px. Com certeza o nível de rejeição de um sistema como esse, por melhores que sejam suas funcionalidades, será alto, pois a experiência que usuários passarão não será muito agradável. Para tentar resolver esse problema podemos utilizar um recurso simples, em Java Script, hoje muito utilizado no chamado Ajax, fazendo com que o navegador reconheça a resolução do usuário e atribua um CSS específico àquela resolução. Vamos começar abaixo: Leia Mais »

Criando o efeito zebra em tabelas com JQuery

Chamamos de efeito zebra o ato de alternarmos as cores de plano de fundo das linhas de uma tabela. A estilização consiste em colorir as linhas pares de uma cor e as impares de outra cor. A principal vantagem além de alterar o visual da tabela, é facilitar a compreensão e a leitura da mesma. Conseguimos esse efeito facilmente com as folhas de estilos em cascata (CSS). Para isso basta atribuir uma classe nas linhas pares (ou impares) e estilizar a classe conforme sua necessidade. Uma grande desvantagem é fazer isso em tabelas grandes. Outra forma de se fazer isso é com uma linguagem de programação: PHP, ASP etc. Aqui vou mostrar utilizando a biblioteca jQuery. O código é bem simples, consiste em ter uma tabela com as tags thead e tbody, onde thead vai ser o cabeçalho da tabela e tbody o corpo da tabela, e no caso vamos ter 2 estilos, zebraUm e zebraDois que vão ser para variar os cores da linha. Para a utilização desse código faz-se necessário importar a biblioteca jquery. Para zebrar basta do script que está no código abaixo, em anexo vai o exemplo completo: Leia Mais »