Fade IN/OUT com Scriptaculous

Escrito por Gonçalo Martins

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.

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

Ponto 2: Código HTML

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:

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

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

fade in, fade out, scriptaculous, toogle, prototype

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



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