WebDesignerWall propose un tutoriel que je vous invite à découvrir permettant de créer rapidement des coins arrondis sur des images grâce à jQuery à la manière de CSS3 (rounded corners).

Cette solution permet de contourner les problèmes de compatibilités rencontrés avec certains navigateur comme Firefox.

Le code jQuery ajoute automatiquement le code HTML réalisant les coins arrondis aux images portant une certaines classe, de plus, il gère automatiquement l’ombre et masque l’image originale afin d’en empêcher la copie !

Un script que je vous recommande car très léger et très pratique !

En savoir plus…

1stwebdesigner propose un tutoriel permettant de créer une ombre portée dynamique à base de CSS / Spriting / jQuery sur les éléments d’une page web en fonction d’une source lumineuse placée sur la page.

Ce n’est pas clair ? Je vous invite tout d’abord à jet un œil à cette page de démonstration exceptionnelle (n’oubliez de faire glisser l’ampoule après l’avoir allumée !).

Comme vous avez pu le constater, le script adapte l’angle ainsi que la profondeur de l’ombre portée en fonction de la position de la source lumineuse sur la page !

Tout simplement awesome ! Pour ceux qui désirent comprendre pas-à-pas comment réaliser ce type d’effet, je vous invite à consulter le tutoriel !

jScratchcard est un plugin pour le framework JavaScript jQuery permettant de créer des zones grattables à la manière des jeux de grattages que l’on retrouve chez nos buralistes. Il devient alors possible d’imaginer la création de toutes sortes de jeux de grattages directement en HTML / CSS / jQuery (rappelons que ce type de jeux existe déjà sur le web en Flash).

Très simple d’utilisation, le plugin jScratchcard propose également une personnalisation des effets de grattage assez poussée. De quoi ravir les webmasters spécialisés dans le domaine !

En tout cas, félicitation à Senamion.com pour le plugin !

Voir la page de démonstration du plugin jScratchcard.

Le contexte

Imaginons que vous devez appliquer le même comportement d’événement à un ensemble d’éléments, il devient alors tout à fait naturel de créer une classe CSS qui permettra d’identifier tous les éléments et ainsi leur appliquer le comportement d’événement simultanément.

Ceci ce traduirait par le code jQuery ci-dessous (notez que j’utilise jQuery à la place de $ pour des questions de compatibilité avec d’autres librairies) :

jQuery('.jQuery-elements-1').change(function(e){
   //traitement de l'événement
});

Le problème

Le code que nous venons de voir fonctionne bien, en revanche comment appliquer ce même comportement à un second ensemble d’éléments sans pour autant dupliquer de code ? Imaginons maintenant que nous possédons un second ensemble d’éléments portant pour une raison quelconque une classe CSS différente mais pour lequel nous désirons le même comportement d’événement.

La première solution qui vient à l’esprit consiste à dupliquer le code précédemment vu et à modifier la classe CSS utilisée pour pointer les éléments. C’est là qu’un peu d’astuce vas nous permettre d’éviter cette dupplication ! En effet, jQuery possède un puissant système de sélecteurs permettant de cibler des éléments HTML,en l’occurrence il suffira de séparer les deux classes CSS par une virgule pour appliquer le comportement d’événements à tous les éléments d’un seul coup !

jQuery('.jQuery-elements-1, .jQuery-elements-2').change(function(e){
   //traitement de l'événement
});

Pratique, n’est-ce pas ?

jQuery Sliding Clock est une horloge numérique 2.0 propulsée par JavaScript via la librairie jQuery. C’est également une démonstration très originale des possibilités de ce framework !

Dans mon récent apprentissage de l’excellente librairie JavaScript jQuery, j’ai cherché une équivalence de la fonction MooTools $defined() permettant de déterminer si un objet est défini ou non. Ce test est très pratique sous MooTools car il permet par exemple d’améliorer la généricité des scripts ou encore d’éviter d’appeler des objets non définis sur la page courante et ainsi provoquer une erreur.

Voici donc un exemple de code jQuery permettant de tester si l’élément HTML portant l’id « define » existe ou non. Si et seulement s’il existe, nous lui affecterons alors un événement click. Notez également l’utilisation de preventDefault permettant de stopper le comportement par défaut de l’événement, comme par exemple le scroll en haut de page lors du clic sur un lien :

//If an HTML element with a "define" id exists :
if($('#define').length) {
 
	$('#define').click(function(e){
 
		//We are stopping the default event like scrolling to the top of the page for a link
		e.preventDefault();
 
		//Do some stuff here
 
	});			
}