Un preloader pour votre HTML avec jQuery | Chroniques d'un webliver Il y a quelques mois (années ?) j’avais rédigé un tuto à propos d’un preloader javascript. Cela valait ce que cela valait, mais l’essor des frameworks javascript n’était pas celui d’aujourd’hui (sisi je vous assure ^^). Toujours est-il que ce petit bout du code avait bien servi à pas mal de monde, et pour mon premier nouvel article je me suis dis que ce serait pas mal de refaire cet article avec des technos d’aujourd’hui. Oui c’est là que je voulais en venir Et puis il n’y a aucune raison que Todd Phillips soit le seul à se faire des références arrières. Bref, pour ceux qui sont encore là, quoi de mieux aujourd’hui quand on parle javascript que jQuery ? Le plat Bon passons aux choses « sérieuses ». Pour schematiser, notre page ressemble à ça: 01.<! 02. 04. 06. 07. 09. En se basant sur l’article original, voici les actions que l’on effectue: Les points 1 et 2 sont triviaux, la seule « difficulté » est de s’assurer que la page soit bien chargée. 06. 07. 08. 03. 05. 07. 08. 10. 11. 13. 14. 15. 17. ET VOILA ! 04.
Slideshow jQuery accessible Dans ce tutoriel, vous allez apprendre comment réaliser un slideshow jQuery accessible pour votre site web. Étapes par étapes, vous découvrirez le processus de création en allant du HTML jusqu’au Javascript. Ceci est un tutoriel basé sur celui du site anglophone SixRevisions. Merci à eux de nous avoir autorisé à le reprendre pour le traduire et l’améliorer un peu. La 2ème partie de ce tutoriel (et exclusivement conçue par nous) portera sur la gestion dynamique de ce slideShow : Ajout/Suppression de slides , miniaturisation automatique des images, changer la position des slides (et tout ça en Ajax). Cette partie va en fait consister à étudier la partie statique de ce slideShow. Les bases du concept La partie la plus importante de tout bon composant web est d’avoir une structure HTML solide et bien construite. La structure de notre contenu est matérialisé par une div qu’on appellera #slidehow et qui servira de conteneur principal pour notre slideshow. Etape 1: HTML Les flèches (CSS) Résumé
7 jQuery Parallax and Scrolling Effect Plugins Parallax precisely is a variance in the actual position of any object that is seen beside different lines of sight. The word Parallax is derived from a Greek word, parallaxis which basically means alteration. This term is relatively a new trend in the world of web designing. You can use Parallax scrolling in order to create interesting web design and exciting 3D illusion. Parallax Slider – Responsive jQuery Plugin Parrallax Effect is powerful jQuery Plugin Sliders. Advertisement jQuery Scroll Path Scrollpath plugins define custom rotations, scroll paths and uses canvas syntax to draw arcs and lines. Static Background This scrolldeck.js demo page is built from the jQuery Parallax plugin demo. jParallax jParallax is another amazing plugin which turns nodes into absolutely positioned layers that move in response to the mouse. Stellar.js It is a jQuery plugin that provides parallax scrolling effects to any scrolling element. scrolldeck A jQuery plugin for making scrolling presentation decks.
Définition jQuery Un article de Wikipédia, l'encyclopédie libre. jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006. La bibliothèque contient notamment les fonctionnalités suivantes : Usage[modifier | modifier le code] jQuery se présente comme un unique fichier JavaScript de 247 Kio (92,2 Kio dans sa version minimalisée par la suppression des commentaires et caractères d'espacements. La bibliothèque jQuery peut être appelée de deux manières différentes : via la fonction jQuery, ou $. $("div.test").add("p.quote").addClass("blue").slideDown("slow"); via l'objet $. $.each([1,2,3], function() { document.write(this + 1); }); Voici un exemple d'Ajax avec jQuery : Modules d'extension[modifier | modifier le code] Notes et références[modifier | modifier le code] Annexes[modifier | modifier le code] Sur les autres projets Wikimedia : Programmation web
jQuery API jQuery : Documentation Inclure jQuery de manière optimisée jQuery est un framework JavaScript très célèbre, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici, en détails, quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement. Appel classique à la librairie (fichier téléchargé) De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.x.x.min.js. Fichier et compression Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Voyez les différences entre la version non minifiée et la version minifiée. Performances au chargement Vous obtiendrez ainsi : <! <! Démo
jQuery User Interface : Documentation