blog reactions
Postado em: 4 de agosto de 2008 por Pedro Rogério
Se você utiliza miniaturas de imagens em seu site, e gostaria que o usuário ao clicar, elas fossem abertas em um tamanho maior, existem várias soluções simples para isso, algumas amigáveis, outras não, mas uma solução que eu acho interessante são os Lightbox. Uma forma de conseguir efeitos desse tipo sem a utilização de frameworks JavaScript é utilizar o Fancyzoom.
Fancyzoom é um pequeno JavaScript que nos permite fazer zoom em imagens, através de um efeito “emergente” ao estilo MAC. Sua utilização é muito simples, basta adicionar 2 linhas de código ao seu site, semelhantes a essa:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
Após, é só adicionar o seguinte código ao body de sua página:
<body onload="setupZoom()">
Está pronto, o JavaScript agora fará o zoom em suas imagens automaticamente. Basta você colocar um link na imagem para a imagem maior, exemplo:
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
Mas, se por um acaso você deseja que explicitamente alguma imagem não tenha zoom, basta adicionar o seguinte código no link da imagem:
<a href="image.jpg" rel="nozoom"> <img src="image-thumbnail.jpg" /></a>
blog reactions
Postado em: 17 de julho de 2008 por Pedro Rogério
Esse é um interessante Jogo da Memória desenvolvido em PHP, CSS e jQuery, caso você queira customizar o jogo, basta efetuar o download.
O mais interessante é que se você tiver preguiça de jogar, é só dar uma olhada no código fonte para ver onde estão localizadas as imagens.
blog reactions
Postado em: 14 de julho de 2008 por Pedro Rogério
Quem sabe isso algum dia pode lhe ajudar:
function getElementsByAttr(tag, attr, value){
var arrayEl = new Array();
var el = document.getElementsByTagName(tag);
for(i=0, j=0; i<el.length; i++){
if(el[i].getAttribute(attr) == value){
arrayEl[j] = el[i];
j++;
}
}
return arrayEl;
}
Exemplo de uso:
var inputTxt = getElementsByAttr('input', 'type', 'text');
Via: Snipplr.com
blog reactions
Postado em: 8 de julho de 2008 por Pedro Rogério
Pedro Simonetti, vendo a dificuldade de desenvolvedores brasileiros em trabalhar com Frameworks JavaScript, sendo que esses, ou possuem uma documentação em inglês e muito complicada de entender, ou outros que ao mesmo tempo possuem uma fragilidade em sua documentação, resolveu reunir as idéias utilizadas nos mais famosos Frameworks JavaScript como: jQuery, Ext, Prototype, Mootools, e nos artigos e códigos de Peter Paul Koch, Dean Edwards e Douglas Crockford, e nas boas práticas de programação apresentadas na quinta edição do livro “JavaScript - The Definitive Guide - 5th Edition” de David Flanagan, resolveu criar o Framework jProton.
Esse projeto existe desde Setembro de 2007, ainda está em fase Alpha, mas creio que logo saia a versão beta pois o Pedro agora conta com a ajuda de Yuri Nascimento e Thiago Victorino.
Saiba mais
blog reactions
Postado em: 28 de maio de 2008 por Pedro Rogério
Quer fazer aqueles menus estilo Accordion sem o uso de qualquer framework JavaScript? E ainda por cima o tamanho do Script é de 1KB. Sim, isso é possível, foi o que fez o Leigeber, dê só uma olhada lá.
Via: Anieto2K - Acordeón horizontal en Javascript de solo 1kb
blog reactions
Postado em: 26 de maio de 2008 por Pedro Rogério
Já pensou em adicionar um teclado virtual a suas aplicações?
Esta versão desenvolvida em JavaScript, nos permite, entre outras coisas, selecionar a configuração das teclas que desejamos mostrar dentro de várias possíveis.
Instalação
O Script se baseia em 2 arquivos, um JS onde se encontra a funcionalidade principal para que o teclado virtual funcione e um arquivo CSS onde podemos personalizar o teclado a nossa maneira. Simplesmente temos que chamar os arquivos dentro das tags <head></head> de nossa aplicação.
<link rel="stylesheet" type="text/css" href="keyboard.css">
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
Exemplo de Uso
Uma vez que você adicionou na página os arquivos necessários, basta você adicionar agora a classe keyboardInput aos seus inputs.
<input type="text" value="" class="keyboardInput">
Referências
blog reactions
Postado em: 20 de maio de 2008 por Pedro Rogério
Todo desenvolvedor um dia já utilizou o famoso efeito Lightbox ao menos uma vez em seus projetos, seja para mostrar uma galeria de fotos, ou para mostrar formulários de login, objetos multimídia. Ele se tornou uma bela alternativa ao popup. Para os utilizadores do framework jquery existe uma alternativa chamada prettyPhoto. Sua utilização é muito simples, basta efetuar o download do jquery, e dos arquivos do prettyPhoto. Exemplo de como adicioná-lo na página:
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
Depois basta adicionar o atributo rel=”prettyOverlay” em sua tag que o JavaScript executa todo o processo. Exemplo:
<a href="images/fullscreen/1.jpg" rel="prettyOverlay" title="Descrição da Imagem">IMAGEM 1</a>
blog reactions
Postado em: 19 de maio de 2008 por Pedro Rogério
Caso você precise adicionar funcionalidades em suas aplicações, é necessário verificar antes se o usuário possui o complemento instalado em seu micro, pois caso contrário você pode alertá-lo disso e não ter problemas com suas aplicações. Isso pode ocorrer quando você está fazendo o uso do window.ActiveXObject(). Abaixo você vê uma recompilação dos detectores de plugins para Internet Explorer:
var plugins = {
hasAcrobat:function() {
if (!window.ActiveXObject) return false;
try { if (new ActiveXObject('AcroPDF.PDF')) return true;}
catch (e) {}
try { if (new ActiveXObject('PDF.PdfCtrl')) return true;}
catch (e) {}
return false;
},
hasFlash: function() {
if (!window.ActiveXObject) return false;
try {if (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')) return true;}
catch (e) { return false;}
},
hasJava: function() {
return (!navigator.javaEnabled());
},
hasQuickTime: function() {
if (!window.ActiveXObject) return false;
try { if (new ActiveXObject('QuickTime.QuickTime')) return true;}
catch (e) {}
try {if(new ActiveXObject('QuickTimeCheckObject.QuickTimeCheck')) return true;}
catch (e) {};
return false;
},
hasRealPlayer: function() {
if (!window.ActiveXObject) return false;
var definedControls = [
'rmocx.RealPlayer G2 Control',
'rmocx.RealPlayer G2 Control.1',
'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)',
'RealVideo.RealVideo(tm) ActiveX Control (32-bit)',
'RealPlayer'
];
for (var i = 0; i < definedControls.length; i++) {
try {if(new ActiveXObject(definedControls[i])) return true;}
catch (e) {continue;}
}
return false;
},
hasShockwave: function() {
if (!window.ActiveXObject) return false;
try {if(new ActiveXObject(’SWCtl.SWCtl’)) return true;}
catch (e) {return false;}
},
hasWMP: function() {
if (!window.ActiveXObject) return false;
try {if(new ActiveXObject(’WMPlayer.OCX’)) return true;}
catch (e) { return false;}
}
}
Exemplo
if (plugins.hasFlash()) {
.... você possui o plugin do flash ...
} else {
.... você não possui o plugin do flash ...
}
Demo
Você pode ver uma demonstração de uso aqui.
Referências
blog reactions
Postado em: 12 de maio de 2008 por Pedro Rogério
O jQuery é o framework javascript utilizado por cerca de 50% dos desenvolvedores hoje em dia devido as suas facilidades de uso, e se você quer começar a utilizá-lo e não quer fazer feio para seus amigos, aconselho a dar uma olhada nesse guia que foi criado por Simon Willison:
blog reactions
Postado em: 8 de maio de 2008 por Pedro Rogério
Nesses slides você tem uma rápida introdução a tudo o que o Framework jQuery oferece:
