Home Me envie um e-mail! Feed
Blog do yogodoshi

Arquivo da seção: Dicas de Javascript

Jcrop – Recorte pedaços de imagens com ajuda do jQuery

Jcrop

Jcrop é um plugin para jQuery que permite que o usuário possa dar crop recortar um pedaço de uma imagem facilmente.

Características do Jcrop:

  • Pode ser adicionado facilmente à qualquer imagem
  • Opção de manter a proporção das dimensões da imagem
  • Opção de colocar um tamanho mínimo e máximo
  • Opção de desfazer uma seleção ou o movimento da seleção
  • Suporte às setas do teclado para movimentar a seleção
  • API para criar interatividade, incluindo animação
  • Suporte a CSS para estilização

Crossbrowser:

  • Firefox 3
  • Safari 3
  • Opera 9.5
  • Google Chrome 0.2.x
  • Internet Explorer 6+

Veja um exemplo online dessa ferramenta aqui.


jTip – Faça complexas tooltips com ajuda do jQuery

jTip é mais um plugin super útil feito em javascript através do jQuery; ele permite que você crie tooltips customizadas e complexas de uma maneira muito simples.

jTip screenshot

Ao adicionar a classe “jTip” em um link, você irá criar uma tooltip com o conteúdo do arquivo que você está linkando no href, via HttpXMLRequest.

Você também pode definir a largura da tooltip através de atributos na url, a altura varia de acordo com a quantidade de conteúdo. Ainda existe a possibilidade de deixar clicável a tooltip de maneira que o texto funcione como um link normal além de mostrar o conteúdo da tooltip no mouseover.

Sem mais delongas, sugiro ver as demonstrações e, caso goste, dê uma olhada no post de lançamento do autor do plugin.


Erro “object doesn’t support this property or method” ao usar getElementById no IE

Depois de escrever o post “Bug de redirecionamento de página com window.location no IE” onde falei sobre mais uma das dificuldades de se criar sites crossbrowser? Pois então, descobri mais um problema naquele mesmo (e em outros) código.

O simples código:

function MudaCBS(){
pagina = document.getElementById(”calendario”).value
self.location = pagina;
}

Gerava o seguinte erro no IE: object doesn’t support this property or method, na linha onde defini que “pagina” receberia o valor de um input chamado “calendario”.

Já sabemos que o IE tem um bug na hora de pegar achar que NAME e ID são a mesma coisa para o método getElementById mas agora, descobri esse outro problema, que graças ao Stubblog descobri a solução.

Seguindo o autor do Stubblog, o IE não consegue gerenciar variáveis globais que tenham o mesmo nome de elementos ID do DOM, especialmente se esta variável está apontando para este nó do DOM.

O que acontece é o seguinte: quando a página está sendo parseada (parsing), o IE automaticamente cria uma variável global para qualquer coisa que tenha um name ou um id.

Para resolver este problema, geralmente, basta definir a variável dentro da função, da seguinte maneira:

function MudaCBS(){
var pagina = document.getElementById(”calendario”).value
self.location = pagina;
}


jCarousel – crie o seu carousel de imagens facilmente com JQuery

jCarousel

jCarousel é um plugin para jQuery para controlar itens de listas verticais ou horizontais. Os itens podem ser estáticos (HTML) ou gerados via AJAX, por exemplo, podendo ser navegados com ou sem uma animação.

O plugin possui toda a documentação com tutorial para instalação e diversos exemplos, que sugiro dar uma olhada, que com certeza irão facilitar a sua vida.

O jCarousel foi testado nos seguintes navegadores: IE6, IE7, Firefox 1.5 (PC/Mac/Linux), Opera 9, Safari 2 (Mac), Safari 3 (Pc) e Konqueror 3.4 (Linux).

FancyZoom – um lightbox super suave, rápido e clean (sem usar bibliotecas)

FancyZoom é um script desenvolvido em Javascript que funciona como uma lightbox só que bem suave e sem a necessidade de uma biblioteca de scripts, como JQuery, Scriptaculous ou MooTools para funcionar.

Algumas das vantagens e características do FancyZoom:

  • animação de zoom mais suave e perfeita possível
  • redimensiona automaticamente a imagem
  • pré-loading das imagens em tamanho real quando ocorre mouseover
  • não é necessário nenhuma biblioteca Javascript, o código foi desenvolvido do 0 ao zoom
  • coloca uma sombra na imagem para dar uma noção de profundidade
  • usa o “box-shadow” do Safari para criar a sombra nativamente, sem necessitar de imagens
  • requer apenas duas linhas de código a mais no seu HTML
  • testado nos navegadores Safari, Firefox, IE7 e IE6.

O FancyZoom funciona de maneira diferente do restante das lightbox encontradas na web, ao colocar o script na sua página; ele irá automaticamente se anexar a qualquer link de imagem dos formatos: jpg, gif, png, bmp e tiff. Permitindo que você desabilite sua função em algum link específico.

Dê uma olhada no post do script, no blog do autor, para saber mais.

« Postagens anteriores · Próximas postagens »
Fechar
Envie por e-mail