KreaComm'.info [KBWEB]

Effet de fondu entre éléments

KreaComm' — 2007-02-25T22:39:13Z

Voici un petit bout de code permettant un fondu simultané (apparait/disparait) entre deux éléments html (div, img, a etc.).

Testé et fonctionnel sous ie6+, FF2 et Opera 9.

Démo sur la page d'accueil de Challenge&Co UK

Code JS :

lastShow=1;
function switchTxt(nbElementEvent)
{
Element.addClassName($('txtSuite'+nbElementEvent),'positionElementDesc');
new Effect.Fade($('txtSuite'+lastShow),{
duration: 0.3,
from:1.0,
to:0.0,
afterFinish:function()
{
Element.removeClassName($('txtSuite'+nbElementEvent),'positionElementDesc');
}
});
new Effect.Appear($('txtSuite'+nbElementEvent),{
duration: 0.3,
from:0.0,
to:1.0
});
lastShow=nbElementEvent;
}

Télécharger

Dans mon cas, j'avais x éléments (div) contenant du contenu html, un seul est affiché à la fois ; le premier (index 1) étant affiché au chargement de la page. Le but étant de pouvoir switcher entre les éléments avec un effet de fondu à la manière d'un diaporama d'images...

On attribu la classe css positionElementDesc de manière à pouvoir superposer le nouvel élément sur l'ancien déjà affiché.

Code CSS de la classe positionElementDesc :

.positionElementDesc {
position:absolute;
left:0;
top:0;
}

Télécharger

La variable lastShow indique le dernier élément ayant été affiché (on n'affiche qu'un seul élément à la fois).

On appel la fonction switchTxt(nbElementEvent) , nbElementEvent représente l'index de l'élément à afficher.

Code html :

<p><a javascript:; onclick="switchTxt(1);">Titre 1</a> | <a javascript:; onclick="switchTxt(1);">Titre 2</a> | <a javascript:; onclick="switchTxt(1);">Titre 3</a> | <a javascript:; onclick="switchTxt(1);">Titre 4</a></p>
<div style="position:relative;">
<p id="txtSuite1">du texte, des images...</p>
<p id="txtSuite2">du texte, des images...</p>
<p id="txtSuite3">du texte, des images...</p>
<p id="txtSuite4">du texte, des images...</p>
</div>

Télécharger

Le code n'est pas forcément optimisé, mais peut servir de base pour bien d'autres utilisations.

Classer les données d'un tableau

KreaComm' — 2006-12-04T01:54:17Z

Enfin, voila de quoi classer/ordonner ses données directement côté client en javascript ; ça éxiste déjà mais c'était lourd et peu fiable.

Les différents type de données gérés :
"date-iso" // e.g. 2005-03-26T19:51:34Z
"date" // e.g. Mon, 18 Dec 1995 17:28:35 GMT
"date-au" // e.g. 25/12/2006 05:30:00 PM
"date-eu" // e.g. 25-12-2006
"date-us" // e.g. 12/25/2006 05:30:00 PM
"time" // e.g. 05:30:00 PM
"currency" // e.g. $55.00 - detects : $ £ ¥ € ¤
"datasize" // e.g. 30MB - detects : B, KB, MB, GB, TB
"number"
"casesensitivetext"
"text"

Jugez par vous même avec cette démo du script de tri.

Voir en ligne : Table Sorting with Prototype

Diaporama automatique et fluide en 10 lignes de code.

KreaComm' — 2006-05-24T19:29:53Z

Fonctionne parfaitement, testé sous Safari, Opera 8+, IE6+ et Firefox 1.5+.

Je suis tombé par hasard sur ces bouts de codes permettant de créer un diaporama à défilement automatique et ce de maniére trés fluide, et pour cause, il est basé sur la librairie Scriptaculous.

Premiere solution : Source : Slideshow JS par Code Snippets

<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>

Télécharger

<script type="text/javascript">
start_slideshow(1, 4, 2000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
script>

Télécharger

Seconde solution : Source : Easy Scriptaculous Slideshow

var album = {
startup: function() {
new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds
},
cycle: function() {
new Effect.Fade('image', { // the id of the
containing the photos
duration: 1,
fps: 50,
afterFinish: function() {
new Ajax.Updater('image','/album/next', { // URL for next tag
asynchronous: true,
onSuccess: function() {
new Effect.Appear('image', {
duration: 1,
fps: 50,
queue:'end'
})
}
})
}
})
}
}
window.onload = album.startup

Télécharger

Une troisième solution s'offre à vous, version améliorée.

Edit du 20/08 : Une autre alternative pour créer un fondu automatique (diaporama ou slideshow) avec des bloc html (pas d'ajax) : Slideshow xhtml avec Scriptaculous

Voir en ligne : Code Snippets > Slideshow