Sliding Panel Photo Wall Gallery est un tutoriel qui explique pas à pas (CSS, script jQuery) comment réaliser un mur d’images miniatures qui prennent toute la place de l’écran lorsqu’on clique dessus. →
Bloc de login à la Twitter avec jQuery
Perfect signin dropdown box likes Twitter with jQuery est un tutoriel qui explique comment faire un bloc de login dynamique comme celui qui se trouve sur la page d’accueil de Twitter. Il suffit d’un formulaire HTML, d’une bonne pincée de CSS et d’une rasade de jQuery. Via Path-Tech.
Créer une arborescence de fichier avec jQuery
Jay Salvat nous propose la première partie d’une série de 8 tutoriels sur la création d’une arborescence de fichiers à l’aide de jQuery. Au menu :
- Transformer une liste HTML en arborescence dossiers/fichiers
- Ajouter un compteur de fichiers à chaque dossier
- Ouvrir et fermer les dossiers
- Ouvrir des dossiers par défaut dès l’ouverture
- Déplacer les dossiers et fichiers en drag and drop
- Supprimer un fichier de l’arbre
- Sérialiser le résultat
- Déclencher et utiliser des événements
Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery
Optimiser le chargement des AdSense — J’ai eu la chance d’avoir l’explication IRL mais j’attendais avec impatience le billet de Mehdi pour vous en parler. Le principe consiste à réserver les emplacements des publicités là où vous voulez les afficher, de placer les scripts fournis par Google Adsense à la fin de votre page et d’ajouter une pincée de CSS et un soupçon de jQuery pour remettre chaque publicité à sa place quand la page est chargée. J’ai mis cette technique en place sur ce blog et sur css 4 design et ça marche niguel ghrome 😀
Créez des sélecteurs personnalisés avec jQuery
Custom jQuery Selectors aborde la création de sélecteurs personnalisés au cas où ceux proposés par jQuery ne suffiraient pas. Dans l’exemple donné, il s’agit de parcourir le DOM à la recherche des balises HTML possédant un attribut rel
renseigné : →
13 Tutoriels jQuery pour Webdesigners
jQuery Tutorials for Designers — La force de jQuery par rapport à d’autres frameworks Javascript est sa capacité à plier le DOM selon notre bon plaisir. Toutefois, la volonté de faire tel ou tel effet ne suffit pas : encore faut-il les connaissances algorithmiques pour y parvenir. Malgré sa simplicité et sa courbe d’apprentissage à la portée de tous, il est toujours bon d’avoir quelques bouts de code sous le tapis de souris pour faire face aux situations récurrentes en matière de webdesign. →
Choisir jQuery ou Mootools en connaissance de cause
Choisir une bibliothèque Javascript n’est pas anodin. Une fois qu’on s’est familiarisé avec une librairie, il est souvent difficile de faire marche arrière et la tentation est grande de ne pas aller voir ailleurs si l’herbe est plus verte. Aaron Newton a eu la bonne idée de faire une comparaison éclairée intitulée jQuery vs Mootools en mettant en évidence les qualités et les défauts de ces deux frameworks Javascript, en toute objectivité. →
Créez votre framework Javascript
Les frameworks Javascript sont aussi répandus que les critiques qui les accompagnent : trop lourds, pas assez rapides, des bugs, des mises à jour trop espacées ou trop rapprochées, etc. S’il vous est déjà arrivé de tenir tout ou partie de ses propos vous êtes peut-être mûrs pour mettre en place votre propre framework Javascript, suivant en cela l’adage selon lequel on n’est jamais si bien servi que par soi-même ! →
Google Fade — Faire apparaitre des éléments au mouvement de la souris
Google Fade est un script disponible pour Mootools et jQuery qui permet de reproduire chez vous un effet intéressant introduit récemment par Google sur sa page d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche. →
Thumbnail Zoom — Effet de zoom et apparition d’une légende au survol
Thumbnail Zoom — Voici un effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris qui fera certainement son petit effet sur vos pages web. Ce tutoriel explique pas à pas le code HTML (liste non-ordonnée), les CSS et la pincée de jQuery nécessaire au bon fonctionnement de l’ensemble. Via colegramist.