Niveau

En rapport...

Introduction

Vous pensiez que les mot zoom-in, zoom-out, fade, slide up, slide down et autres était reservé au effet pour le smontage vidéo ?
Et bien non ! Grace à Thomas Fuchs vous pourrez animé n'importe quel objet de vos page HTML avec une simplicité étonnante !

Exemples

Cliquez sur un des liens pour voir l'effet

Téléchargement

Pour utiliser les effets, ils vous faut 2 fichiers :

Utilisation

Pour utiliser un effet, rien de plus simple :
Tous d'abord, déclarez les fichier javascript dans la section <head> de votre page :

html4strict

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

!!important : veillez a respecter l'ordre ! D'abord prototype puis effects…!!
Maintenant que les effets sont chargé dans votre page, pour les utilisez, il suffit d'appeler la fonction Effect.XXXXX où XXXXX correspond au nom d'un effet.
Exemple :

javascript

new Effect.Shrink(document.getElementById('demo-all'));

Chaque fonctions de création d'effet dispose d'un paramètre. Ce paramètre est un objet.
Ici, il s'agit du DIV dont l'ID est “demo-all”

Pour demarrer un effet avec un div invisible, vous devez :
- pour l'effet Effect.Appear ⇒ mettre “display:none” dans le style du div
(ex : <div style=“display:none”></div>)
- pour les effets Effect.BlindDown et Effect.SlideDown ⇒ faire appel aux effets opposés (respectivement Effect.BlindUp et Effect.SlideUp) au chargement de la page.

— iDo 07/02/2006 09:50

Discussion

yass raid, 11/03/2007 17:15:

Bonjour peut on agir sur plusieurs objets a la fois en utilisant le code ci dessus , car apres avoir fait le test on peut agir que sur un seul objet si vous avez une astuces ??? merci de m’aider ;)

iDo, 15/03/2007 17:30:

Salut, on peu en effet agir sur plusieurs objets
Mais il me faudrais un peu plus de détail pour pouvoir t’aider.
Peut tu coller sur le pastebin un exemple de ce que tu veux faire ?

++

Charly, 07/06/2007 16:53:

Bonjour, Comment peut-on vérifier l’état de notre élément, c’est à dire comment peut-on savoir si il est visible ou non ? Merci d’avance.

maniT4c, 08/06/2007 09:43:

Tu peux vérifier si ton element est affiché avec du javascript en utilisant une condition if (document.getElementById(‘monId’).display==‘block’) {}

Vince, 02/10/2007 22:36:

Bonjour

J'ai un petit soucis a utiliser les sytème.

J'ai sans cess ma concole javascript qui me dit Effect is not defined

Hors je défini bien les deux js en head.

Voici mon code:

html4strict

 
<head>
 
<script type="text/javascript" src="./prototype.js"></script>
 
<script type="text/javascript" src="./effects.js"></script>
 
</head>
 
<body>
 
<a onclick="new Effect.Appear(document.getElementById('demo-all'));">Voir l'effet Effect.Appear </a><br />
 
<a onclick="new Effect.Fade(document.getElementById('demo-all'));">Voir l'effet Effect.Fade </a><br />
 
<a onclick="new Effect.Puff(document.getElementById('demo-all'));">Voir l'effet Effect.Puff </a><br />
 
<a onclick="new Effect.BlindDown(document.getElementById('demo-all'));">Voir l'effet Effect.BlindDown </a><br />
 
<a onclick="new Effect.BlindUp(document.getElementById('demo-all'));">Voir l'effet Effect.BlindUp </a><br />
 
<a onclick="new Effect.SwitchOff(document.getElementById('demo-all'));">Voir l'effet Effect.SwitchOff </a><br />
 
<a onclick="new Effect.SlideDown(document.getElementById('demo-all'));">Voir l'effet Effect.SlideDown </a><br />
 
<a onclick="new Effect.SlideUp(document.getElementById('demo-all'));">Voir l'effet Effect.SlideUp </a><br />
 
<a onclick="new Effect.DropOut(document.getElementById('demo-all'));">Voir l'effet Effect.DropOut </a><br />
 
 
 
<a onclick="new Effect.Shake(document.getElementById('demo-all'));">Voir l'effet Effect.Shake </a><br />
 
<a onclick="new Effect.Pulsate(document.getElementById('demo-all'));">Voir l'effet Effect.Pulsate </a><br />
 
<a onclick="new Effect.Squish(document.getElementById('demo-all'));">Voir l'effet Effect.Squish </a><br />
 
<a onclick="new Effect.Fold(document.getElementById('demo-all'));">Voir l'effet Effect.Fold </a><br />
 
<a onclick="new Effect.Grow(document.getElementById('demo-all'));">Voir l'effet Effect.Grow </a><br />
 
<a onclick="new Effect.Shrink(document.getElementById('demo-all'));">Voir l'effet Effect.Shrink </a><br />
 
<a onclick="new Effect.Highlight(document.getElementById('demo-all'));">Voir l'effet Effect.Highlight </a><br />
 
 
 
 
 
<div>
 
  <div id="demo-all" style="width:150px;height:190px;background:#456">
 
	  <span>Cliquez sur un des liens pour voir l'effet</span>
 
  </div>
 
  </body>

Merci

iDo, 23/10/2007 11:41:

salut,
la seule raison que je vois c'est que le chemin vers les deux fichier js n'est pas correct…

roge rapo, 06/12/2007 06:03:

A part pour Highlight (de ce que je me souviens), il ne faut pas écrire new Effet.XXXX mais seulement Effect.XXX

njantou, 23/10/2007 09:44:

SALUT LES SAVANT AIDEZ MOI, JE DEBUTE EN JAVASCRIPT,mon souhait est de prendre le contrôle des navigateurs chez le client et animez les objets de la page car je travaille déja avec PHP comme il s'execute cote serveur j'ai besoin des EXEMLPES CONCRETs avec javascript

iDo, 24/10/2007 16:07:

Tu en demande bcp… surtout en débuttant.. tu devrais d'abort suivre quelque tutoriel…

Blaster, 15/04/2008 12:00:

Bonjour, Je souhaiterai enchainé deux foncions mais je ne trouve pas comment faire … voila a quoi ressemble ma fonction : function disparition (){

new Effect.SlideUp(document.getElementById('corpspage')); /* faire disparaitre l'élément 'corpspage'
/* ici je vodrais coder une pause ou une vérification que l'élément 'corpspage' est invisible*/
new Effect.SlideDown(document.getElementById('corpspage')); /* Ici le faire réapparaitre avec de nouvelle données */
};

Merci d'avance de votre aide Cordialement

Ferreira Patrick, 15/04/2008 16:52:

Salut,

avant tout, c'est une très bonne bibliothèque! félicitation.

J'aimerai juste faire quelques remarques;

1- Serait-il envisageable d'envoyer au constructeur de la classe Effect un tableau d'élément? typiquement le résultat d'un [CODE]$$('div.monStyle')[/CODE]

2- Un méchant bogue est visible sous IE6 et version inférieur lors de l'utilisation de ceci : [CODE]new Effect.toggle( e2, 'blind' )[/CODE]

sinon rien signaler pour le moment :o)

encore merci.

Francois Ludovic, 29/04/2008 12:19:

Salut

j'ai mis en en place des effets sur plusieurs object à la fois sous FF tous fonctionne correctement

mais sous ie les effets ne se font pas

et je n'ai pas d'erreur js je pense que c'est le point n°2 du topic ci-dessus

viki53, 10/05/2008 13:47:

Bonjour, je viens de mettre en place l'effet toggle de scriptaculous sur mon site.

Il fonctionne très bien je dois dire et me convient parfaitement.

Mais j'aurais aimé savoir s'il était possible d'enregistrer les états des éléments dans un cookie ou une session.

En fait cela me sert à cacher/montrer mon menu latéral. mais j'aurais voulu que le menu reste dans la même position d'une page à l'autre.

A mon avis en enregistrant un cookie, ça doit être possible, mais n'étant pas un pro en JS, j'ai un peu de mal.

viki53, 11/05/2008 11:53:

Oups, pardon, ce n'est pas Scriptaculous. -_-'

C'est Prototype (au passage, ça m'a l'air plus léger). :)

J'en reviens à ma question: Pense-vous qu'il soit possible d'enregistrer les données dans un cookie pendant le onclick ?

Car j'utilise l'effet dans mon menu, mais aussi dans mes pages, en passant par une fonction.

iDo, 12/05/2008 23:33:

Salut,
Tu peux tout à fait l'enregistrer dans un cookie :)
Voila 2 fonctions qui vont t'y aider : gerer facilement les cookies

Tophe, 01/11/2008 10:04:

bonjour j'utilise SlideDown et SlideUP comment faire pour faire disparaître le lien ouvrir quand la div et ouverte et le lien fermer quand la div est fermé ?

<a href=”#” onclick=“Effect.SlideDown('nouveaut'); return false;”>Ouvrir</a> | <a href=”#” onclick=“Effect.SlideUp('nouveaut'); return false;”>Fermer</a>

christophe, 10/11/2008 05:54:

génial, merci !

mathieu, 10/11/2008 16:50:

bjr j'ai fais un essai exemple

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript" src="prototype.js"></script>

new Effect.Appear(document.getElementById('photo'));
</script>
<style>
#photo{
display:none;
}
</style>
</head>
<body>
<div id="photo">
<img src="image1_big.jpg" width="500" height="375">
</div>

il me mets une erreur :element is null ai je fais une erreur??? merci de m'aider svp!!!

Nicolas, 09/01/2009 09:46:

Bonjour,

Je ne sais pas si tu as résolu ton soucis. Mais il faut que tu mettes ta ligne :

à la fin de ton code. En effet, dans ton script il execute l'affichage de ta photo alors qu'il n'a pas encore lu le reste de la page…

Nicolas, 09/01/2009 09:52:

Re bonjour à tous,

J'ai un petit soucis lorsque je fais tourner ce script sur internet explorer (et il faut que mon site soit compatible avec ie …) : Lorsque j'imbrique plusieurs div qui se déplie avec BlindDown/Up, lorsque l'on plie un div, il y a un léger artéfact : il le replie normalement puis il l'affiche en entier puis il le fait disparaitre. cela se passe très vite mais ça ne fait pas propre. Est que quelqu'un aurait déjà eu ce problème ?

Merci de vos réponses !

Nicolas

MrFoufou, 24/02/2009 16:12:

Bonjour, Merci pour cette page, ca m'a bien aidé. Est-il normal que certains effets ne fonctionnent pas bien sur Safari? Exemple : l'effet pulsate ne rend pas du tout pareil…

François

Highkickx, 26/02/2009 16:35:

Hello,

Il y a un bug généralisé sur tous les effets sous Firefox and IE 7, IE 8. Lorque qu'on lance un effet alors qu'il y en déjà un en cours. (Via un bouton par exemple)

Détails de l’erreur de la page Web:

Message : Impossible d'obtenir la propriété overflow. Argument non valide. Ligne : 1013 Caractère : 5 Code : 0 URI :js/prototype.js

Du coup ce script devient inutilisable.

Bon courage

Highkickx

sergeiphp, 24/04/2009 10:41:

Bonjour, j'ai juste une petite question concernant le style.display d'un élément, par défaut je souhaiterais que le toggle soit fermé (pas affiché). Mon idée était de définir dans l'objet element le Element.style.display= none, mais ça fonctionne pas. J'avais comme idée d'inverser le hide et le show dans Element[Element.visible(element) ? 'hide' : 'show'](element) (ligne 857 de prototype.js).

Pourriez-vous simplement m'indiquer la ligne du fichier à modifier? Merci d'avance

Sébastien, 27/04/2009 10:39:

Bonjour,

Tout d'abord, je tiens à vous remercier pour ce flots d'effets mais également pour m'avoir fait découvrir prototype.

J'ai une petite question.

Comment faire afin de pouvoir enchaîner 2 voire 3 effets en ne cliquant qu'une seule fois. Le but étant de pouvoir faire par exemple un slide up sur une div et dans la foulée faire un slide dows en ayant modifié le contenu entre temps.

En espérant avoir été assez clair et précis,

Par avance merci

Sébastien

Sebastien, 04/01/2010 18:02:

Bonjour,

Magnifique effet et merci pour la disponibilité du code. Petite question “Est-ce que l'effet SlideDown est modifiable facilement pour creer SlideRight”

Chargement en cours...

Introduction

Exemples

Téléchargement

Utilisation

Discussion