jQuery Masonry réorganise les blocs de votre page page d’après une grille (de manière verticale et horizontale) pour réduire au maximum les espaces vides entre les éléments qui apparaissent lorsqu’on applique la propriété float sur des blocs de hauteurs différentes. →
Voici une collection de près de 40 bouts de code pour faciliter vos développements en Javascript ou jQuery : rechercher une chaine de caractère dans n’importe quel élément HTML, vérifier si un élément existe avant de l’utiliser, sélectionner/de-sélectionner une série de cases à cocher, déplacer une option d’une liste à l’autre, etc. Via Taggle.
jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes : Ajax Plugins and Tutorials, CSS, DOM and other Plugins, Form Select Boxes, Grids, Tagging and Tag Cloud, Alert Windows and Prompt, Animation and Effects, etc.
Link Building Pro — Chaque fois que quelqu’un copie du texte sur votre site, le script ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original 😉 Compatible avec Firefox (Mac et PC), Chrome, IE6, IE7, IE8 et Safari.
Je ne suis pas encore fan de l’introduction des fonctions d’animation dans CSS3 et je préfère compter sur les frameworks Javascript qui prennent actuellement en compte un plus large éventail de navigateur. L’article CSS3 animations and their jQuery equivalents passe en revue une demi-douzaine d’effets introduits dans CSS3 et fourni le code Javascript pour obtenir le même résultat en jQuery. Jetez un oeil sur la page regroupant les effets en action.
Hightcharts est une bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes. Hightcharts fonctionne dans tout les navigateurs modernes, dont l’iPhone et Internet Explorer à partir de la version 6 ! Les navigateurs standarts utilisent l’élément canvas, dans certains cas, SVG est utilisé. Quant à Internet Explorer, c’est VML qui sollicité. Voir la page de démonstration.
jQuery Before/After est un plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo. Chacun des deux états apparait de part et d’autre d’une ligne médiane où un grip vous attend pour faire glisser un slider qui dévoilera l’autre partie de l’image. Le script pèse 7 ko et nécessite jQuery UI en plus de jQuery pour fonctionner. Je vous laisse avec une démonstration parfois surprenante 😉
jQSlickWrap est un plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour. Ce script fonctionne sur les navigateurs compatibles avec la balise canvas prévue par HTML5. Pour résumer, le script crée une balise canvas, la remplie avec l’arrière-plan de l’image en fonction des informations de la couleur du pixel du coin supérieur gauche et redessine l’image pixel par pixel. Mais jugez plutôt !
Cette technique est une adaptation de la solution CSS et PHP proposée par Rob Swan sur A List Apart en 2006.
TinySlider est un diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS. On peut intégrer autre chose que des images et la gracieuse dégradation est assurée en l’absence de Javascript sur l’agent utilisateur du visiteur. Le script possède des options pratiques comme vous pouvez le voir sur l’exemple d’appel au script :
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider', // ID of the parent slideshow div
auto:3, // Seconds to auto-advance, defaults to disabled
resume:true, // Resume auto after interrupted, defaults to false
vertical:false, // Direction, defaults to false
navid:'pagination', // Optional ID of direct navigation UL
activeclass:'current', // Class to set on the current LI
position:0 // Initial slide position, defaulting to index 0
});Voir la démonstration.