Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Articles avec le tag ‘jquery’

jQuery.eventManager, un plugin de gestion d’évènements

La méthode $.delegate de jQuery fonctionne sur le principe de la délégation d’évènements. La délégation permet notamment de pouvoir ajouter de nouveaux éléments dans le DOM dynamiquement (via Ajax par exemple) sans pour autant leur ré-attacher d’évènements préalablement défini. Elle assure également de meilleures performances.

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.

Lire la suite

Détecter le support HTML5 du navigateur via Jquery

Le site Dive into HTML5 a publié récemment un article détaillant les différentes méthodes de détection de fonctionnalités HTML5 sur les navigateurs via Javascript.

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

Du Parallax avec jQuery et CSS

Le scrolling parallax est une technique qui consiste a créer un pseudo-effet de 3D sur un environnement en 2D. Si vous avez déjà pu jouer aux premières versions de Sonic The Hedgehog, vous comprendrez de quoi je parle. Je me suis amusé, encore une fois avec JQuery, a créer un effet parallax sur une page d’accueil d’un site existant.

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.

Lire la suite

Une carte Vélib grâce à l’API Google

Si vous habitez Paris ou si vous ne faites qu’y travailler (comme moi), vous avez surement déjà eu l’occasion d’utiliser le service Vélib. Le site officiel ou d’autres sites indépendants comme Roulib.fr proposent des cartes permettant d’afficher le nombre de vélos disponibles ou encore le nombre d’emplacements restants. Je vous propose de faire la même chose grâce à l’API de Google Map.

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.

Viva jQuery et mon livre de chevet !

Plus je m’intéresse à jQuery et plus je me rend compte des possibilités étendues de ce framework javascript. Je suis parfois bluffé par les effets visuels qu’il peut générer. Sur Dragon Interactive, on a presque l’impression de visiter un site à base d’animations flash mais il n’en est rien. C’est l’utilisation judicieuse des fonctions fadeIn() et fadeOut() qui donne cette sensation. Bon nombre de plugins viennent ajouter à ce framework d’autres fonctionnalités de la plus intéressante à la plus farfelue. Je suis récemment tombé sur le plugin jCycle qui permet des effets de transitions d’images assez intéressants.

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 :