background preloader

Javascripts

Facebook Twitter

Vertical Sliding Info Panel With jQuery. This is an example of simple page that's centered and has a vertical sliding panel on the far right (try it!

Vertical Sliding Info Panel With jQuery

Les évènements. CSS UL LI - Horizontal CSS Menu. Second Picture is devoted to original tutorials about 3D graphics, Photoshop, Photography and Web Design. 31.10.2008 Category: Web Design In this tutorial we're going to create a professional horizontal CSS menu.

CSS UL LI - Horizontal CSS Menu

First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1. Menu déroulant animé avec jQuery. Changer le style des champs d'un formulaire avec jQuery. Nous voulons faire un formulaire dont les champs changent d'apparence quand ils ont le focus.

Changer le style des champs d'un formulaire avec jQuery

Montez à bord et regardez cet exemple. Premièrement, nous devons mettre en place le formulaire que nous utiliserons : J'ai inclus "Entrez quelque chose ici" en tant que valeur par défaut du champ. C'est le texte qui sera affiché initialement, mais qui va disparaître quand le champ aura le focus. Maintenant, faisons en sorte que les champs soient beaux. Il est important de noter que si vous voulez enlever le contour bleu que Safari applique autour des champs lors du focus, vous devrez leur appliquer la propriété outline:none. Démo du Plugin jQuery Easy Slider. Slider d'image ou de contenu avec jQuery. Tout d'abord, vous aurez besoin de contenu, celui-ci doit être englobé dans une div contenant une liste non ordonnée.

Slider d'image ou de contenu avec jQuery

Trucs et astuces pour jQuery. Un truc particulièrement utile !

Trucs et astuces pour jQuery

Au lieu de faire ça : $(document).ready(function() { } Vous pouvez faire ceci, qui revient au même : Adapter jQuery à vos besoins. Cet article se base sur l'acquis.

Adapter jQuery à vos besoins

Je vous conseille de lire ou de relire : Introduction la biblioth que JavaScript jQuery. Comme presque tout ce que nous faisons avec jQuery, ce dernier lit ou manipule le modèle objet du document (DOM).

Introduction la biblioth que JavaScript jQuery

Menu animé fluide avec jQuery. Exemple de clignotement. Retour : Animez vos boîtes de message avec jQuery Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Exemple de clignotement

Donec nec nisl id odio gravida rhoncus. Cras venenatis elit non augue. Quisque mauris tellus, gravida a, vehicula eget, eleifend eget, urna. Exemple de clignotement. Onglets. Premier onglet Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Onglets

In vehicula, lorem eget auctor accumsan, dui lorem consequat quam, in bibendum quam sapien eget augue. Duis adipiscing, justo eget tempor semper, diam mauris laoreet urna, nec congue elit turpis imperdiet risus. Aliquam facilisis venenatis neque sit amet ultricies. Donec dolor metus, bibendum et iaculis quis, sollicitudin eu felis.

Deuxième onglet. Mise en place d'une navigation par onglets avec jQuery. La page se compose donc d'une barre de liens (ou d'onglets) et d'une partie contenu.

Mise en place d'une navigation par onglets avec jQuery

Notez que l'ensemble du contenu est en fait présent sur la page, c'est uniquement le clic sur un onglet qui déterminera quelles parties seront réellement affichées ou non. D'autre part, bien qu'il soit de nos jours fantaisiste de considérer qu'il existe une part significative de visiteurs qui choisissent intentionnellement de désactiver JavaScript, des impératifs d'accessibilité voire de référencement peuvent imposer de rendre disponible l'ensemble du contenu utile si c'était le cas. Nous avons donc opté pour montrer un exemple de la pratique d'amélioration progressive, c'est-à-dire que si JavaScript est désactivé, la barre d'onglets (qui n'est pas du contenu utile) sera masquée et tout le contenu sera affiché. C'est jQuery qui se chargera de rétablir l'affichage « normal ».

Notez que le modèle de boîte d'Internet Explorer jusqu'à la version 7 génère un décalage entre les onglets et le contenu. If (! Créer une arborescence de fichiers avec jQuery. L'explorateur de fichiers jQuery est un plugin AJAX, configurable pour jQuery. Vous pouvez créer une arborescence personnalisée de fichiers, entièrement interactive avec une simple ligne de code JavaScript. Actuellement, côté serveur, les scripts de connexion sont disponibles pour PHP, ASP, ASP.NET, JSP et Lasso.

Si vous êtes développeur, vous pouvez facilement créer votre propre script de connexion pour travailler avec le language de votre choix. L'explorateur de fichiers jQuery fonctionne sur tous les navigateurs supportés par jQuery. Il a été entièrement testé sur : Internet Explorer 6 & 7 Firefox 2 & 3 Safari 3 Chrome (bêta) Opera 9. Am liorer la galerie z-index avec un preloader. Dans notre précédent article, nous avons créé une galerie d'images plutôt sympa. Mais elle est incomplète pour un site en production. Au premier chargement, vous avez pu constater que les images se chargent et s'affichent très lentement.

Pour avoir une apparence plus agréable, nous allons précharger toutes les images et afficher un indicateur de préchargement pour montrer aux utilisateurs que les images sont en chargement. Nous allons faire ça avec à peine 10 lignes de code ! Une galerie d'images utilisant la propriété CSS z-index et jQuery. Dans cet article, nous voulons créer une galerie de photos en utilisant la propriété CSS z-index. Dans notre exemple, nous avons une pile de photos. En cliquant sur Suivant, nous mettons la première photo en dernière position et à l'inverse, en cliquant sur Précédent, la dernière photo se mettra en première position. Créer un paysage d'en-tête animé avec jQuery. jQuery Context Menu Plugin Demo.