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.

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>

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

Escreva o seu Comentario

Gonçalo Martins

Freelancer, Fan de Desing, Praticante KickBoxing e Blogger nos tempos livres.

Ferramentas WebLouca: JSPacker | CSSPacker

Têm conhecimentos? Escreva um guest post! +info

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteúdo apresentado.
Não existe recompensa monetária, mas escrever um artigo de qualidade no WebLouca é uma excelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Sinta-se livre para me contactar e expor as suas ideias.

Patrocinadores do Site

Subscrever Feed

Tens Talento?

^{- fechar caixa contacto -}

Considera escrever um guest post no weblouca!

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteudo apresentado.
Não existe recompensa monetaria, mas escrever um artigo de qualidade no WebLouca é uma exelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Contacte-me e exponha-me as suas ideias.

^{- caixa contacto -}