Dator Blog » Javascript et Ajax

Coder votre propre selecteur CSS avec jQuery

Clément — Sun, 19 Apr 2009 12:00:31 +0000

Avec jQuery nous pouvons sélectionner un ou plusieurs éléments grâce à des sélecteurs CSS comme par exemple :

$("monselecteur:first")

Je vais vous montrer aujourd’hui une petite astuce pour créer votre propre sélecteur !

Ce que nous voulons

Nous voulons un sélecteur qui permet de savoir si le contenu HTML d’un élément est supérieur à 1000. Cela peut être pratique dans un tableau récapitulatif pour surligner les cases importante (supérieures à 1000).

Le html

Réalisation

Nous allons étendre les fonctionnalité de jQuery et lui ajouter un sélecteur :

$.extend($.expr[':'], {
    // on nomme notre sélecteur
    moreThanAThousand : function (a){
		// on cherche notre élément
		return parseInt($(a).html()) > 1000;
	}
});  

$(document).ready(function() {
       // utilisation
	$('td:moreThanAThousand').css('background-color', '#ff0000');
});

Ici on sélectionne tous les éléments qui ont un contenu HTML supérieur à 1000 et on leur met une couleur de fond rouge ! Simple non?

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Extend, HTML, jQuery

Remplacer une image cassée avec jQuery

Clément — Sun, 05 Apr 2009 09:32:18 +0000

Quand une image n’apparait pas sur votre site, vous pouvez passer directement dans la catégorie amateur. Parfois, une image peut être cassée ou incomplète et vous êtes d’accords avec moi pour dire que sous IE, voir la petite croix rouge n’est pas forcément une bonne solution .C’est pourquoi je vous propose une petite astuce pour éviter ce genre de problème avec jQuery !

$(function(){
	$('img').error(function(){
		$(this).attr({
			'src' : 'broken_img.png',
			'alt' : "Desole, l'image n'est pas disponible",
			'style': 'border: 1px solid #f00;width:75px;height:75px;'
		});
	});
});

Voir la démonstration

Un site parfait est un site qui a prévu tout les détails

Source : David Walsh

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: jQuery

Comment rendre jQuery compatible avec Prototype ou Mootools

Clément — Thu, 19 Mar 2009 18:29:23 +0000

Les librairies javascripts sont devenues quasiment incontournable dans le développement d’application interactive sur le web.

Néanmoins, la compatibilité entre elles posent souvent des problèmes lorsqu’on veut les utiliser en même temps.

(...)
Lire la suite de Comment rendre jQuery compatible avec Prototype ou Mootools (128 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: jQuery, Mootools, Prototype

1400	700	400
2500	600	100
100	1100	900