http://www.patrickcleder.com Actualités jQuery, Tutoriaux et scripts http://www.patrickcleder.com/catalogue/cameleon.jpg http://www.patrickcleder.com/ 205 225 jquerynanteshttp://feedburner.google.com http://www.patrickcleder.com/tuto_11.php http://www.patrickcleder.com/tuto_11.php Une démo simpliste mais source d'inspirations. Le survol de la souris pour stopper un mouvement et le relancer. Libre cours à votre imagination <p><a href="http://feedads.g.doubleclick.net/~a/UiljYQbiaKhY-oEczPIVG0gJBHc/0/da"><img src="http://feedads.g.doubleclick.net/~a/UiljYQbiaKhY-oEczPIVG0gJBHc/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/UiljYQbiaKhY-oEczPIVG0gJBHc/1/da"><img src="http://feedads.g.doubleclick.net/~a/UiljYQbiaKhY-oEczPIVG0gJBHc/1/di" border="0" ismap="true"></img></a></p> Thu, 23 Aug 2011 23:56:57 GMT http://www.patrickcleder.com/tuto_35.php http://www.patrickcleder.com/tuto_35.php Affichage aléatoire pour un défilement d'images ou photos. Trés facile à mettre en oeuvre! Possibilité de réglage de la fréquence de défilement. Arrêt du défilement par un simple clic ! <p><a href="http://feedads.g.doubleclick.net/~a/SmroLhCj8qnLl-yopy-vGb0U8uQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/SmroLhCj8qnLl-yopy-vGb0U8uQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/SmroLhCj8qnLl-yopy-vGb0U8uQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/SmroLhCj8qnLl-yopy-vGb0U8uQ/1/di" border="0" ismap="true"></img></a></p> Thu,, 11 Aug 2011 13:32:57 GMT http://www.patrickcleder.com/tuto_34.php http://www.patrickcleder.com/tuto_34.php 8 lignes de jQuery suffiront à jouer avec l'attribut opacity et ainsi "éclairer" vos images. Effet garanti et idéal pour une galerie photo. Ultra simple à mettre en oeuvre ! <p><a href="http://feedads.g.doubleclick.net/~a/rgywGMA0kSijGQsCvvIqvC524go/0/da"><img src="http://feedads.g.doubleclick.net/~a/rgywGMA0kSijGQsCvvIqvC524go/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/rgywGMA0kSijGQsCvvIqvC524go/1/da"><img src="http://feedads.g.doubleclick.net/~a/rgywGMA0kSijGQsCvvIqvC524go/1/di" border="0" ismap="true"></img></a></p> Mon, 10 May 2010 13:42:57 GMT http://www.patrickcleder.com/tuto_33.php http://www.patrickcleder.com/tuto_33.php 2 lignes de jQuery suffiront à jouer avec l'attribut z-index et ainsi superposer vos photos pour que l'utilisateur puisse cliquer dessus et les faire défiler. Ultra simple à mettre en oeuvre ! <p><a href="http://feedads.g.doubleclick.net/~a/MoV0Ed6QcpCn8KbedpvaIC7h-Xw/0/da"><img src="http://feedads.g.doubleclick.net/~a/MoV0Ed6QcpCn8KbedpvaIC7h-Xw/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/MoV0Ed6QcpCn8KbedpvaIC7h-Xw/1/da"><img src="http://feedads.g.doubleclick.net/~a/MoV0Ed6QcpCn8KbedpvaIC7h-Xw/1/di" border="0" ismap="true"></img></a></p> Thu, 29 Apr 2010 09:27:46 GMT http://www.patrickcleder.com/tuto_32.php http://www.patrickcleder.com/tuto_32.php Minimisez vos bannières de pub Google Adsense et déployez intégralement avec un petit effet d'élasticité. Effet garanti et gain de place ! Un code perfectible qui peut s'avérer utile pour d'autres applications. <p><a href="http://feedads.g.doubleclick.net/~a/i_oLefzV-4uTBMGhthrgGozaHzs/0/da"><img src="http://feedads.g.doubleclick.net/~a/i_oLefzV-4uTBMGhthrgGozaHzs/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/i_oLefzV-4uTBMGhthrgGozaHzs/1/da"><img src="http://feedads.g.doubleclick.net/~a/i_oLefzV-4uTBMGhthrgGozaHzs/1/di" border="0" ismap="true"></img></a></p> Wed, 28 Apr 2010 15:24:13 GMT http://www.patrickcleder.com/tuto_1.php http://www.patrickcleder.com/tuto_1.php Quelques lignes de jQuery et Javascript sans prétention aucune mais qui peuvent s'avérer utiles pour certaines animations. A régler selon votre goût et vos besoins. Idéal pour débutants. <p><a href="http://feedads.g.doubleclick.net/~a/JxnydmHg_qNPrTztZBISTWUjYqc/0/da"><img src="http://feedads.g.doubleclick.net/~a/JxnydmHg_qNPrTztZBISTWUjYqc/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/JxnydmHg_qNPrTztZBISTWUjYqc/1/da"><img src="http://feedads.g.doubleclick.net/~a/JxnydmHg_qNPrTztZBISTWUjYqc/1/di" border="0" ismap="true"></img></a></p> Tue, 27 Apr 2010 15:16:02 GMT http://www.patrickcleder.com/tuto_31.php http://www.patrickcleder.com/tuto_31.php Quelques lignes de jQuery suffiront pour ajouter un lien "Lire la suite..." à vos articles pour un meilleur confort de lecture et agencement de vos pages. Utilisation de la fonction slideToggle() <p><a href="http://feedads.g.doubleclick.net/~a/7QaeX0E5cSXhCmSUYysRlF92tfY/0/da"><img src="http://feedads.g.doubleclick.net/~a/7QaeX0E5cSXhCmSUYysRlF92tfY/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/7QaeX0E5cSXhCmSUYysRlF92tfY/1/da"><img src="http://feedads.g.doubleclick.net/~a/7QaeX0E5cSXhCmSUYysRlF92tfY/1/di" border="0" ismap="true"></img></a></p> Fri, 18 Apr 2010 19:07:28 GMT http://www.patrickcleder.com/tuto_30.php http://www.patrickcleder.com/tuto_30.php Quelques lignes de jQuery suffiront à concevoir votre bannière en vue de promouvoir votre site ou d'annoncer des événements particuliers. <p><a href="http://feedads.g.doubleclick.net/~a/UvPGTl3t_B2eJ6oUauUJFbDTdHc/0/da"><img src="http://feedads.g.doubleclick.net/~a/UvPGTl3t_B2eJ6oUauUJFbDTdHc/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/UvPGTl3t_B2eJ6oUauUJFbDTdHc/1/da"><img src="http://feedads.g.doubleclick.net/~a/UvPGTl3t_B2eJ6oUauUJFbDTdHc/1/di" border="0" ismap="true"></img></a></p> Fri, 6 Apr 2010 10:07:28 GMT http://www.patrickcleder.com/tuto_29.php http://www.patrickcleder.com/tuto_29.php Une ligne de jQuery et un peu de CSS vont suffire pour implémenter une div qui sera repositionnera automatiquement en cas de scroll. Intéressant pour maintenir une info toujours visible malgré le défilement. <p><a href="http://feedads.g.doubleclick.net/~a/34Ks1Lqr-Q690n3n4IEXIMw-Wfo/0/da"><img src="http://feedads.g.doubleclick.net/~a/34Ks1Lqr-Q690n3n4IEXIMw-Wfo/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/34Ks1Lqr-Q690n3n4IEXIMw-Wfo/1/da"><img src="http://feedads.g.doubleclick.net/~a/34Ks1Lqr-Q690n3n4IEXIMw-Wfo/1/di" border="0" ismap="true"></img></a></p> Fri, 2 Apr 2010 06:59:24 GMT http://www.patrickcleder.com/tuto_28.php http://www.patrickcleder.com/tuto_28.php Première leçon ou rappels pour certains ! Apprenez à uploader correctement en PHP les images des visiteurs de votre site, à les afficher, à n'autoriser que certains formats ou dimensions. Très facile à mettre en oeuvre ! <p><a href="http://feedads.g.doubleclick.net/~a/RgcRJiTrbym8agGYUhiz6wFqSQ4/0/da"><img src="http://feedads.g.doubleclick.net/~a/RgcRJiTrbym8agGYUhiz6wFqSQ4/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/RgcRJiTrbym8agGYUhiz6wFqSQ4/1/da"><img src="http://feedads.g.doubleclick.net/~a/RgcRJiTrbym8agGYUhiz6wFqSQ4/1/di" border="0" ismap="true"></img></a></p> Thu, 31 Mar 2010 20:26:02 GMT http://www.patrickcleder.com/tuto_27.php http://www.patrickcleder.com/tuto_27.php Concevez facilement une shadow box bien utile pour vos formulaires de contact ou d'authentification. La boite apparait en avant-plan de la page courante en assombrisant légèrement cette dernière. Sympathique effet ! <p><a href="http://feedads.g.doubleclick.net/~a/M-5fGmAwbJET79bjh5ySKN1EYBg/0/da"><img src="http://feedads.g.doubleclick.net/~a/M-5fGmAwbJET79bjh5ySKN1EYBg/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/M-5fGmAwbJET79bjh5ySKN1EYBg/1/da"><img src="http://feedads.g.doubleclick.net/~a/M-5fGmAwbJET79bjh5ySKN1EYBg/1/di" border="0" ismap="true"></img></a></p> Thu, 25 Mar 2010 14:25:54 GMT http://www.patrickcleder.com/tuto_26.php http://www.patrickcleder.com/tuto_26.php Réalisez facilement votre premier menu à onglets en une dizaine de lignes de code jQuery. Ajoutez une pointe de CSS et le tour est joué ! Idéal pour les débutants. <p><a href="http://feedads.g.doubleclick.net/~a/tn8H3QH7EOZugPLzuu8r_xddu-8/0/da"><img src="http://feedads.g.doubleclick.net/~a/tn8H3QH7EOZugPLzuu8r_xddu-8/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/tn8H3QH7EOZugPLzuu8r_xddu-8/1/da"><img src="http://feedads.g.doubleclick.net/~a/tn8H3QH7EOZugPLzuu8r_xddu-8/1/di" border="0" ismap="true"></img></a></p> Thu, 25 Mar 2010 10:35:42 GMT http://www.patrickcleder.com/tuto_25.php http://www.patrickcleder.com/tuto_25.php Produisez facilement un effet de reflet sur vos textes. Intéressant notamment pour des titres ou du contenu de bannières <p><a href="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/0/da"><img src="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/1/da"><img src="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/1/di" border="0" ismap="true"></img></a></p> Sun, 21 Mar 2010 10:38:41 GMT http://www.patrickcleder.com/tuto_25.php http://www.patrickcleder.com/tuto_25.php Produisez facilement un effet de reflet sur vos textes. Intéressant notamment pour des titres ou du contenu de bannières <p><a href="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/0/da"><img src="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/1/da"><img src="http://feedads.g.doubleclick.net/~a/U11itsE3QEAzpLQfo-ck0xxCHOU/1/di" border="0" ismap="true"></img></a></p> Sun, 21 Mar 2010 10:38:41 GMT http://www.patrickcleder.com/tuto_24.php http://www.patrickcleder.com/tuto_24.php L'utilisation de la méthode jQuery animate sur l'attribut CSS clip permet un zoom fluide sur les images de votre site. <p><a href="http://feedads.g.doubleclick.net/~a/rhY9qHZRexRoIxMzPtL0MRjDppQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/rhY9qHZRexRoIxMzPtL0MRjDppQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/rhY9qHZRexRoIxMzPtL0MRjDppQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/rhY9qHZRexRoIxMzPtL0MRjDppQ/1/di" border="0" ismap="true"></img></a></p> Fri, 19 Mar 2010 12:30:39 GMT http://www.patrickcleder.com/tuto_23.php http://www.patrickcleder.com/tuto_23.php Vous connaissez certainement les oeufs de Pâques sur le Web (Easter eggs): Ces objets ou animations cachés qui apparaissent aprés une combinaison précise de clics ou de frappes sur le clavier. Faites de même sur votre site en quelques lignes de code jQuery et Javascript. <p><a href="http://feedads.g.doubleclick.net/~a/KqiQM5wvT6FAY4ouCPkvzYjhlqQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/KqiQM5wvT6FAY4ouCPkvzYjhlqQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/KqiQM5wvT6FAY4ouCPkvzYjhlqQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/KqiQM5wvT6FAY4ouCPkvzYjhlqQ/1/di" border="0" ismap="true"></img></a></p> Thu, 18 Mar 2010 12:25:38 GMT http://www.patrickcleder.com/tuto_22.php http://www.patrickcleder.com/tuto_22.php Vous connaissez certainement les methodes graphiques offertes par la balise canvas et le contexte 2D. Des fonctions permettent la compatibilité avec IE. Intéressant pour dessiner toutes figures géométriques sans se soucier des navigateurs <p><a href="http://feedads.g.doubleclick.net/~a/mqbO8Zo-kCh0_xccR-7JE3sosg8/0/da"><img src="http://feedads.g.doubleclick.net/~a/mqbO8Zo-kCh0_xccR-7JE3sosg8/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/mqbO8Zo-kCh0_xccR-7JE3sosg8/1/da"><img src="http://feedads.g.doubleclick.net/~a/mqbO8Zo-kCh0_xccR-7JE3sosg8/1/di" border="0" ismap="true"></img></a></p> Sun, 14 Mar 2010 18:15:37 GMT http://www.patrickcleder.com/tuto_21.php http://www.patrickcleder.com/tuto_21.php La méthode delay() est implémentée depuis la version 1.4 de jQuery et s'avère être un timer bien utile dans le cadre de gestions d'effets successifs lors d'une animation <p><a href="http://feedads.g.doubleclick.net/~a/XeLBtIkTYKhec2aXDteJ6LRxKyA/0/da"><img src="http://feedads.g.doubleclick.net/~a/XeLBtIkTYKhec2aXDteJ6LRxKyA/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/XeLBtIkTYKhec2aXDteJ6LRxKyA/1/da"><img src="http://feedads.g.doubleclick.net/~a/XeLBtIkTYKhec2aXDteJ6LRxKyA/1/di" border="0" ismap="true"></img></a></p> Sat 13 Mar 2010 16:15:19 GMT http://www.patrickcleder.com/tuto_20.php http://www.patrickcleder.com/tuto_20.php Des images pivotent autour d'un axe. Vous pouvez stopper l'animation ou la relancer. En cliquant sur une vignette, vous serez redirigé vers la place principale. Cette page n'est que le début du développement d'un carrousel que vous pourrez agrémenter à votre gôut. Leçon 2 à suivre... <p><a href="http://feedads.g.doubleclick.net/~a/m0hlI8jCCoBI5JAgc2d_rIP9HO4/0/da"><img src="http://feedads.g.doubleclick.net/~a/m0hlI8jCCoBI5JAgc2d_rIP9HO4/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/m0hlI8jCCoBI5JAgc2d_rIP9HO4/1/da"><img src="http://feedads.g.doubleclick.net/~a/m0hlI8jCCoBI5JAgc2d_rIP9HO4/1/di" border="0" ismap="true"></img></a></p> Sat, 6 Mar 2010 22:07:32 GMT http://www.patrickcleder.com/tuto_19.php http://www.patrickcleder.com/tuto_19.php Compte à rebours au lancement de la page à l'issue duquel s'effectue une redirection automatique. Dans la démonstration, l'utisateur a le choix d'être redirigé vers la page précédente ou l'accueil de Google ! <p><a href="http://feedads.g.doubleclick.net/~a/mruv1zPofxWZ1XPIRQ9_eadW73o/0/da"><img src="http://feedads.g.doubleclick.net/~a/mruv1zPofxWZ1XPIRQ9_eadW73o/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/mruv1zPofxWZ1XPIRQ9_eadW73o/1/da"><img src="http://feedads.g.doubleclick.net/~a/mruv1zPofxWZ1XPIRQ9_eadW73o/1/di" border="0" ismap="true"></img></a></p> Thu, 4 Mar 2010 10:06:19 GMT http://www.patrickcleder.com/jqueryselection.php http://www.patrickcleder.com/jqueryselection.php Après avoir découvert la version 1.4, bénéficiez des derniers correctifs et de plus de performances avec 1.4.2 ! <p><a href="http://feedads.g.doubleclick.net/~a/ZKGMOu3fufix-vdvRCitKyobahQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/ZKGMOu3fufix-vdvRCitKyobahQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/ZKGMOu3fufix-vdvRCitKyobahQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/ZKGMOu3fufix-vdvRCitKyobahQ/1/di" border="0" ismap="true"></img></a></p> Fri, 26 Feb 2010 17:05:31 GMT http://www.patrickcleder.com/newsletter.php http://www.patrickcleder.com/newsletter.php Cette page vous permet de tester divers effets et animations puis recevoir le tutoriel sélectionée par mail <p><a href="http://feedads.g.doubleclick.net/~a/mCYg7PiER6ikwj27bgbftd5S65M/0/da"><img src="http://feedads.g.doubleclick.net/~a/mCYg7PiER6ikwj27bgbftd5S65M/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/mCYg7PiER6ikwj27bgbftd5S65M/1/da"><img src="http://feedads.g.doubleclick.net/~a/mCYg7PiER6ikwj27bgbftd5S65M/1/di" border="0" ismap="true"></img></a></p> Fri, 26 Feb 2010 15:00:00 GMT http://www.patrickcleder.com/jqueryselection.php http://www.patrickcleder.com/jqueryselection.php Découvrez les nouvelles fonctionnalités de la version 1.4 de jQuery <p><a href="http://feedads.g.doubleclick.net/~a/2JfZ4gveML2jKlI6f2OInJd3fCc/0/da"><img src="http://feedads.g.doubleclick.net/~a/2JfZ4gveML2jKlI6f2OInJd3fCc/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/2JfZ4gveML2jKlI6f2OInJd3fCc/1/da"><img src="http://feedads.g.doubleclick.net/~a/2JfZ4gveML2jKlI6f2OInJd3fCc/1/di" border="0" ismap="true"></img></a></p> Fri, 15 Jan 2010 15:00:00 GMT