Web Louca

Home scripts Fade IN/OUT com Scriptaculous

Fade IN/OUT com Scriptaculous



Recentemente ando interessado pela Framework Prototype. No entanto o Prototype só por si torna "complicado" de se programar algo um pouco mais elaborado.

É para contornar esta lacuna do prototype que apareceu o Scriptaculous, uma espécie de "add-on" ao Prototype.

Utilizando dois ficheiros de javascript prentendo realizar uma caixa de login do género do DailyMotion, ou Digg. Utilizando para tal o efeito toogle da framework, que irá realizar um fade in ou fade out à caixa de login.

 


Ponto 1: Load Scripts

Adicionar os ficheiros .js antes de </head> no HTML do seu website.

<script src="/prototype.js" type="text/javascript"></script>
<script src="/scriptaculous.js" type="text/javascript"></script>

 

Ponto 2: Código HTML

<div class="texto"><a href="#" onclick="Effect.toggle('login','appear'); return false;">Login</a></div>

<div id="login" style="display:none;">Nick <input name="" type="text" />    Password <input name="" type="text" /></div>

O segredo do funcionamento do efeito reside em:

Effect.toogle() que recebe dois parâmetros. O ID da div sobre a qual pretende efectuar o fade, e o efeito, neste caso 'appear'.
 

E se o utilizador não possuir o javascript activado?

Muitos internautas, por qualquer motivo, não possuem o suporte para javascript activo. Quando isto acontece o utilizador não irá conseguir realizar login. Uma solução passa por criar um ficheiro distinto .html ou .php para que o internauta realize login.
 

Para tal altere a primeira linha de código HTML para:

<div class="texto"><a href="/login.php" onclick="Effect.toggle('login','appear'); return false;">Login</a></div>

Trackback(0)
Ricardo
Outubro 02, 2008

Infelismente o prototype é incompativel com mootools... e mesmo que não fosse é uma framework muito pesada!!!!

Isto não dá para fazer com mootools? até gostava de ter um login deste genero no meu site... e como ja utilizo a mootools com alguns exemplos aqui do site!

Festinho
Outubro 02, 2008

Cara... bom efeito...

pena é não funcionar com javascript desabilitado... n existe maneira utilizando css não? ou detectar se têm ou nao o javascript activado?

Raquel
Outubro 02, 2008

Muito bom esse efeito


Escreva o seu Comentario
 
  pequeno | maior
 

busy
Subscreve a newsletter gratuita e começa hoje mesmo a criar websites e a ganhar dinheiro na internet!


jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...