JavaScript » Pinceladas da Web - HTML5 Hard Coding and Bullet Proof CSS

jQuery fadeIn() & fadeOut() – Bug no Internet Explorer

Postado por: Pedro Rogério em 4 de novembro de 2008

4 nov
12

Se você já trabalhou com os efeitos de fadeIn & fadeOut da biblioteca jQuery já deve ter reparado que os elementos em que esses efeitos são aplicados (No Internet Explorer), principalmente textos, ficam com as fontes pixeladas, em algumas situações chegando a acontecer de o texto ficar em negrito e após a execução do efeito ele voltar ao normal. Se tratando de Internet Explorer, nem a Microsoft sabe o por que disso acontecer.

Já tive vários problemas desse tipo e até então não havia encontrado a solução, mas acabei encontrado uma solução muito interessante no site de Kevin Leary que consiste simplesmente em adicionar uma cor de fundo ao elemento que será aplicado o fade.

Acessem esse exemplo com o Internet Explorer e vejam o erro acontecer. Provavelmente esse erro acontece com outras bibliotecas JavaScript, portanto, fica aí a solução.

[Update]Encontrei aqui uma outra solução muito interessante.[/Update]

Long input helper com jQuery

Postado por: Pedro Rogério em 3 de novembro de 2008

3 nov
3

Encontrar hoje uma boa Usabilidade em formulários está ficando cada vez mais difícil. Muitas vezes são criados formulários com muitos campos que se forem analisados metades deles não seriam usadas para nada, só estão ali para “tapar buracos”. Em outras situações os campos são extensos demais, ou pequenos demais, atrapalhando a boa legibilidade do que você está preenchendo.

O que devemos fazer em situações como essa? Arrancar os cabelos? Não se preocupe, vou mostrar aqui uma boa solução que encontrei no site Webtoolkit4.me, para aqueles campos de formulários onde eles são muito pequenos e o texto que você precisa digitar é muito grande (É o que mais acontece hoje em dia).

Observem a seguinte marcação HTML:

<form id="aform">
  <label for="type">Descrição longa:</label>
  <input name="type" type="text" id="type" size="20" />
  <div id="info"></div>
</form>

Como podem ver, um simples formulário com um campo label e um campo input, e uma div extra chamada info, onde sua função será de que ao digitar o texto no campo input e o mesmo o exceder, o texto irá aparecer por completo dentro dessa div info. Para fazer isso vamos utilizar a biblioteca jQuery:

$(document).ready(function(){
// Definimos aqui que por enquanto a div id="info" não deve aparecer. 
$('#info').hide();
// Pegamos o tamanho do campo input texto
var size  =  $('#type').attr("size");
// Vamos fazer alguma coisa quando começar a digitar.
$('#type').keyup(
function(){
// Tudo que for digitado sera armazenado em uma variável
var entry = $(this).attr("value");
// O tamanho dela.
var current_length = $(this).attr("value").length;
// Se o nosso texto é maior que o campo input
// ele é mostrado na div id="info".
if (current_length>= size) {
$('#info').html("<strong>Você digitou até agora:</strong> " + entry);
$('#info').show('fast');
}
// Caso contrário ela fica oculta.
else $('#info').hide('fast');
});
});

Uma solução muito interessante, vejam o script em ação nesse exemplo.

jQuery Plugin para Twitter

Postado por: Pedro Rogério em 28 de outubro de 2008

28 out
12

Se você tem a vontade de inserir em seu site os posts do Twitter, saiba que pode fazer isso facilmente com jQuery, com o plugin desenvolvido por Damien du toit. Com ele você vai inserir de uma forma customizável e não obstrutiva em seu site seus últimos posts do Twitter.

De início, você deve efetuar o download do plugin e inserir em seu site os seguintes códigos dentro da tag <head>, além do Framework jQuery:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Após basta adicionar uma div em seu site com o id=”twitter”:

<div id="twitter"></div>

Depois é só definir as configurações de inicialização do plugin:

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

Vejam o demo em funcionamento.

Livro sobre jQuery em Português

Postado por: Pedro Rogério em 22 de outubro de 2008

22 out
10

Capa livro sobre jQuery

No dia 14 de janeiro de 2006 John Resig apresentou ao mundo a sua mais nova criação, a biblioteca de desenvolvimento JavaScript jQuery, que foi criada com o intuito de tornar a vida do desenvolvedor mais fácil, escrevendo menos código e em consequência produzindo mais.

De lá pra cá a popularidade da biblioteca cresceu muito devido a sua facilidade de uso, a partir de agora qualquer um pode desenvolver complexos efeitos em JavaScript com pouquíssimas linhas de código. Até a Microsoft agora vai adicionar a jQuery ao Visual Studio, alguém mais duvida da sua popularidade?

E documentação? Sim, você pode encontrar na web uma vasta documentação sobre a biblioteca, muitas referências em Inglês, alguns livros, boas referências em Português também, mas ainda faltava alguma coisa. Foi pensando nisso que o Maujor anunciou hoje que estará lançando um livro sobre a Biblioteca jQuery, então, portanto, será o primeiro livro em Português sobre o assunto. Ele já era o “Dinossauro das CSS”, lançou seu primeiro livro sobre CSS, depois lançou o livro sobre HTML e agora vai lançar o livro sobre jQuery, com certeza essa foi uma boa notícia para a comunidade desenvolvedora. Meus parabéns Maurício.

Pegar Coordenadas do Mouse com jQuery

Postado por: Pedro Rogério em 24 de agosto de 2008

24 ago
0

Para pegar as coordenadas do mouse com jQuery, é muito simples, por exemplo, o script abaixo nos mostra as coordenadas de onde o usuário clicou na página nos Eixos x e Y.

$("html").click(function(e){ alert('X: ' + e.pageX +', Y:'+ e.pageY); });

Veja esse exemplo e teste o script. Via Worldtechies.

Combinação de teclas com jQuery Hotkeys

Postado por: Pedro Rogério em 20 de agosto de 2008

20 ago
6

Está procurando dar mais interatividade a sua aplicação? Imagine então o usuário interajindo com sua aplicação através so teclado. Agora o imagine deletando dados gravados com um simples alt+d. Então você precisa conhecer o plugin jQuery Hotkeys.

Através da captura de combinações de teclas, você pode simplesmente fazer tudo aquilo que quiser, basta utilizar a criatividade. Veja só um exemplo do script em ação.

Mais informações

JS Hotkeys

30 dias de Mootools

Postado por: Pedro Rogério em 18 de agosto de 2008

18 ago
2

Logo Mootools

Hoje em dia se você necessita de produtividade com certeza já deve ter adotado algum Framework para desenvolvimento, e em JavaScript, existem muitos, os mais conhecidos e utilizados são: jQuery, Prototype e Mootools, cada um com sua particularidade, talvez hoje o jQuery seja a biblioteca mais fácil de ser utilizada, mas conheço gente que acha ela uma porcaria, tudo bem, cada um com sua opnião.

Agora, se você quer aprender mais sobre Mootools, aconselho a ficar ligado nos tutoriais do site Consider Open, onde ele nos trará tutoriais desde o básico até o avançado em Mootools.