Content Switcher est un Slider avec un menu de navigation qui a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur. La version Javascript améliore l’ordinaire avec un effet de fading réalisé avec jQuery pour les transitions entre les slides. Le marquage HTML et les CSS sont très simples à mettre en place : →
bxCarousel est un carousel en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste. Parmi les options disponibles, on peut spécifier le nombre d’éléments à afficher et à faire avancer et mettre le carousel en mode automatique ou afficher des liens pour faire avancer ou reculer les éléments. Via Arnaud-K. Voir aussi bxSlider et bxGallery.
Vous l’attendiez, il est là, c’est le petit journal du web ! A la Une cette semaine : des ressources pour exploiter au mieux les propriétés CSS3, un dossier sur l’ARIA-nisation et la HTML5-nisation de WordPress, le point sur display: inline-block, un tutoriel conséquent sur Javascript, le bilinguisme et l’optimisation des performances dans WordPress (et tout un tas d’astuces très pratiques). Vous aurez aussi un modèle de cahier des charges et des informations pour partir du bon pied avec vos projets de sites Web. Deux nouvelles rubriques font timidement leur apparition dans cette revue de presse : La vie quotidienne du geek et Nostalgeek. →
New Twitter Design with CSS and JQuery –Tout le monde ou presque a pu voir la nouvelle interface utilisateur de Twitter. Elle fait un usage intensif de Javascript et si l’utilisation du nombre d’or dans la maquette initiale ne brille pas par sa présence, le reste de l’interface est très fluide et bien pensée. →
Créé par Nathan Searles, Jquery Looped Slider est un diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre Slider. →
Easy List Splitter est un plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes. Choix du nombre et de l’orientation des colonnes (sens de lecture vertical ou horizontal), possibilité d’appliquer le plugin sur plusieurs listes sur la même page avec un nombre de colonnes différent pour chacune d’elles. →
Dans le même esprit que AviaSlider, Nivo Slider est un diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos Sliders images. Compatible avec IE7, Firefox 3+, Google Chrome 4, Safari 4 et Opera 10.5. Nombreuses options de personnalisation. Via @deruyver.
AviaSlider est un diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images (j’ai un faible pour la transition fullwidth-fade-slider). Le marquage HTML5 et les effets CSS3 sont présents mais le Slider reste compatible avec IE6, Safari 3+, Firefox 2+, Opera 10+, Google Chrome 3+ en version Mac et PC pour les 3 derniers navigateurs cités. Prêt à fonctionner avec prettyPhoto Lightbox lorsqu’on clique sur une image.
Dans jQuery Events: Stop (Mis)Using Return False, Douglas Neiner nous explique, avec moult exemples, toutes les subtilités relatives aux événements dans jQuery. Une des premières choses que l’on apprend en Javascript est d’empêcher les comportements par défaut liés aux liens ou aux formulaires (le lien sur lequel on l’applique n’est pas suivi par le navigateur, le formulaire ne « submit » plus, etc.).
Outre un nouveau design sombre que je trouve très réussi, Soh Tanaka nous offre une belle leçon de choses en utilisant le pseudo sélecteur :nth-child() et une pincée de jQuery (compatibilité Internet Explorer oblige) pour donner du rythme à une liste de produits contenant des éléments récurrents de tailles différentes. Rassurez-vous, le concept est très bien expliqué avec moult illustrations dans l’article Advanced Columns using the :nth-child(N) 😉
