Sur la plupart des projets, je m’amusais à déléguer des évènements à des objets globaux. C’est ensuite au moment de l’appel à l’évènement que je filtrais le type d’action à effectuer. C’est un exercice plutôt fastidieux…

J’ai donc décidé de créer un plugin jQuery permettant de faciliter la gestion d’évènement via delegate. Il suffit pour cela de créer un objet recensant les objets globaux, les évènements attachés, le filtre, puis l’action a effectuer.

Voici un exemple d’objet :

var eventList = {
 'div' : {
   'mouseover' : {
     '.sidebar' : function (elem) {
       $(elem).addClass('over');
     },
     default : function(elem) {
       $(elem).css('background-color':'red');
     }
   }
   'mouseout' : function() {
      $(elem).css('background-color':'transparent');
   }
 }
}

En clair, je délègue des évènements à un ou plusieurs objets de type div. Je lui attribue un évènement de type mouseover. Par défaut, au passage de la souris sur cette div, le fond de cet objet sera rouge. Si la div possède la classe .sidebar, alors je lui ajoute une classe .over. Enfin, lorsque je quitte un objet de type div, je lui affecte un fond transparent.

Une fois cet objet créé, il ne reste plus qu’à l’insérer dans un appel au plugin eventManager :

$('#wrapper').eventManager(eventList);

Dans cet appel, seules les div placées dans un objet ayant pour ID #wrapper seront affectés par les évènements à déléguer.

Je vous propose d’accèder à la démo pour vous faire une idée des possibilités offertes. Vous pourrez ensuite, si vous le souhaitez, télécharger le plugin sur mon espace Github.

Édité le 19 juillet : Nouveauté sur le plugin, le code a été nettoyé, on peut se passer de ‘default’ lorsqu’il n’y a pas de sélecteur filtre. Autre nouveauté, on peut désormais utiliser « this » au lieu de « elem » dans les fonctions de l’objet contenant les évènements. Merci beaucoup à Sunny pour son aide !

• Accéder à la démonstration
• Télécharger le plugin

Utilisateur régulier de jQuery, j’ai décidé de porter ces scripts au sein de la fonction $.support.

Voici la liste des tests possibles : audio, audioMp3, audioVorbis, audioWav, audioAAC, canvas, canvasTxt, command, datalist, details, device, formConstraints, iframeSandbox, iframeSrcDoc, autofocus, placeholder, color, email, number, range, search, tel, url, date, time, datetime, datetime-local, month, week, meter, output, progress, time, video, videoCaptions, videoPoster, videoWebM, videoH264, videoTheora, contentEditable, dragAndDrop, fileAPI, geoLocation, history, localStorage, microdata, applicationCache, eventSource, sessionStorage, svg, svgInHtml, webSimpleDb, webSocket, openDatabase, webWorkers, undo.

Vous trouverez une démonstration des possibilités offertes par le script sur cette page de test du support HTML5 de votre navigateur.

Si vous souhaitez par exemple tester le support du SVG, insérez la ligne suivante au sein de votre fichier Javascript :

$.support.svg // retourne false sur IE et true sur les versions récentes de Firefox

Le script est léger : 8ko en version source et 3ko en version minifiée.

Vous pouvez télécharger l’extend jQuery sur mon espace Github

N’hésitez pas à me signaler le moindre bug.

Édit : correction d’un lien

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

On obtiendra avec jQuery ce type de code pour la div #frontvines

$("body").mousemove(function(event){
   $("#frontvines").css({ 
      backgroundPosition: (event.clientX * 1.1) + 'px 0px'
   });
});

Sur la première ligne, on cherche l’évènement qui indique que l’utilisateur bouge sa souris sur la page. Dans la partie fonction, on place en paramètre la position du curseur pour la réutiliser ensuite pour modifier les propriétés de styles associées à la balise comportant l’id #frontvines. Pour observer le résultat, rendez-vous sur la page dédié à cette démonstration disponible ici.

Pour aller plus loin, je me suis amusé, dans une seconde démonstration, à réutiliser une photo de paysage pour y introduire du parallax. Le principe reste le même, je vous laisse le soin de télécharger le script sur la page de la seconde démonstration, vous y trouverez la manière de procéder dans les commentaires du fichier Javascript.

Quelques liens en rapport avec Parallax :

Effet parallax à l’aide de CSS ou de Javascript

• Le futur site de service Dumago.net (CSS)
• Effet parallax aux mouvements de la souris sur Umaghetzeggen.nl (Javascript)
• Le site des tests de performances Javascript Dromaeo (CSS)
• Démo expérimentale de footer avec effet de vagues (CSS)

Utilisation de parallax sous Flash

• Une démo assez bluffante en Flash
• Effet de rotation rendu grâce à parallax
• Un header construit en parallax
• Le site Freedent White

Tutorial

• Un tutos sur Sitepoint.com sur les effet parallax en CSS

Le principe est simple. On génère en local un fichier XML à partir du fichier distant présent sur le site officiel Vélib via PHP. Une fois cette étape effectuée, on a plus qu’à charger le fichier xml à l’aide de Javascript.

La page de démonstration du script utilise le framework jQuery mais vous pourrez trouver dans l’archive une version en javascript pur et une autre version associée à l’autre framework Prototype (Merci d’ailleurs à Sunny pour son aide )

Vous trouverez toutes les informations nécessaires dans les commentaires des différents fichiers javascript. N’oubliez pas d’aller générer une clé API Google Map sur le site dédié.

Pour pouvoir accéder à la carte et télécharger le script associé, rendez-vous sur la page de démo du script de carte Vélib. L’archive contient le script php pour générer les fichiers xml de la carte Vélib et des informations associées à chaque borne, les fichiers Javascript correspondants, la feuille de style CSS et les images requises.

De part l’intéret grandissant pour cette librairie javascript, j’ai décidé de casser ma tirelire pour m’acheter le livre Premières applications Web 2.0 avec Ajax et PHP de Jean-Marie Defrance et paru aux éditions Eyrolles. Ce n’est pas un ouvrage qui traite véritablement de la bibliothèque jQuery mais il consacre tout de même deux grands chapitres qui permettent d’apprivoiser la bête. A lire donc de toute urgence

Pour en savoir plus :

• Le site officiel de jQuery
• Présentation des fonctions essentielles de jQuery