J’ai récemment eu à (ré)utiliser le plugin jQuery Color mais je me suis heurté à une limitation. Je travaillais sur un jeu de couleurs RGBA et malheureusement le plugin ne supportait pas ce mode colorimétrique (il se contente de travailler sur des couleurs RGB).

Qu’à cela ne tienne, en attendant que ma modification soit intégrée¹ au plugin, voici une version de jQuery Color pourvu du support des couleurs RGBA :

La page de démonstration qui va bien.

Continuez votre lecture sur des sujets similaires

• JavaScript : tester le support des couleurs RGBA
• TextMate : convertir une couleur hexadécimale en notation RGBA
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles

CSS3 introduit le support des couleurs en mode RGBA. Ce dernier permet de définir une valeur d’alpha à une couleur RGB. Voici comment détecter via JavaScript si un navigteur supporte la fonctionnalité¹.

Comment détecter qu’un navigateur supporte RGBA ?

Le principe est simple :

1. Atteindre le premier élément script² du document.
2. Mémoriser sa couleur de police (ou de fond).
3. Tester si la couleur n’est pas déjà en RGBA.
4. Oui ? Sauter à 7. Non ? Modifier la couleur de l’élément script en rgba(0, 0, 0, 0.5). Si le navigateur ne supporte pas le mode de couleur RGBA, l’action n’aura aucun effet.
5. Tester la non correspondance de la couleur initiale et de la nouvelle.
6. Réinitialiser la couleur de l’élément script.
7. Retourner le résultat du test.

Tester le support de RGBA via le DOM

L’implémentation DOM de l’algorithme n’a rien de complexe. Cependant, pour éviter de réitérer les manipulations DOM en cas de tests multiples, on assigne à la fonction une propriété result à l’aide de arguments.callee.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    if (!('result' in arguments.callee)) {
        var dScript = document.getElementsByTagName('script')[0],
            color   = dScript.style.color;
        if (/^rgba/.test(color)) {
            arguments.callee.result = true;
        } else {
            try {
                dScript.style.color = 'rgba(0, 0, 0, 0.5)';
            } catch (e) {};
 
            arguments.callee.result = (dScript.style.color != color);
            dScript.style.color     =  color;
        }
    }
 
    return arguments.callee.result;
};

Tester le support de RGBA via jQuery

Avec jQuery, il peut être utile d’initialiser une proprité jQuery.support.rgba pour éviter de lancer le test à de multiples reprises.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

if (!('rgba' in jQuery.support)) {
    jQuery.extend(jQuery.support, {
        'rgba': isRGBACapable()
    });
}
 
/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    var $script = jQuery('script:first'),
        color   = $script.css('color'),
        result  = false;
    if (/^rgba/.test(color)) {
            result = true;
    } else {
        try {
            result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
            $script.css('color', color);
        } catch (e) {};
    }
 
    return result;
};

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• TextMate : convertir une couleur hexadécimale en notation RGBA
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles

WordPress jQuery UI Effects est un plugin pour WordPress permettant d’enregistrer et de charger les composants JavaScript de la librairie jQuery UI Effects.

Ce ne sont pas moins de 14 effets que vous pourrez utiliser dans vos développement de plugins ou dans la personnalisation de vos thèmes : Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale, Bounce, Highlight, Pulsate, Shake, Size et Transfer.

Table des matières

1. Téléchargement
2. Installation
3. Foire aux questions
   1. Comment utiliser ce plugin ?
   2. Comment déclarer un script dépendant de l’effet jQuery UI Effect Highlight ?
   3. Comment trouver la liste des gestionnaires disponibles ?
   4. La librairie jQuery UI est-elle nécessaire au fonctionnement de jQuery UI Effects ?
4. Développement
5. Historique des versions

Téléchargement

Vous pouvez également vous rendre sur la page WordPress.org du plugin ou lancer son téléchargement et installation directement depuis l’interface d’administration de votre WordPress.

Installation

WordPress jQuery UI Effects s’installe en 3 étapes :

1. Téléversez le répertoire wp-jquery-ui-effects et son contenu dans votre répertoire /wp-content/plugins/.
2. Activez le plugin WordPress jQuery UI Effects via le menu Extensions du panel d’administration de WordPress.
3. C’est tout

Foire aux questions

Comment utiliser ce plugin ?

Pour charger l’effet Bounce dans votre thème ou un plugin, utilisez la méthode wp_enqueue_script :

1
2
3
4
5
6
7
8

<?php
function my_init_method()
{
    wp_enqueue_script('jquery-ui-effects-bounce');
}
 
add_action('init', 'my_init_method');
?>

WordPress chargera¹ l’effet jQuery UI Effects Bounce et, si besoin est, ses dépendances : jQuery et jQuery UI Effects Core.

Comment déclarer un script dépendant de l’effet jQuery UI Effect Highlight ?

Déclarez et chargez en toute simplicité un nouveau script dépendant de jQuery UI Effect Highlight :

1
2
3
4
5
6
7
8
9

<?php
wp_enqueue_script(
    'my-script',
    get_bloginfo('template_url', 'raw') . '/js/my-script.js',
    array('jquery-ui-effects-highlight'),
    '1.0',
    true
);
?>

Comment trouver la liste des gestionnaires disponibles ?

Préfixez le nom de l’effet voulu par jquery-ui-effects- pour obtenir le nom du gestionnaire associé². Attention, le nom du gestionnaire doit être en minuscules.

Par exemple, chargez l’effet Shake soit :

• avec le gestionnaire jquery-ui-effects-shake ;
• en utilisant la méthode statique WPjQueryUIEffects::getHandle('shake').

La librairie jQuery UI est-elle nécessaire au fonctionnement de jQuery UI Effects ?

Non. Vous n’avez donc pas à charger le gestionnaire jquery-ui-core (fichier ui.core.js) en tant que dépendance d’un quelconque effet pour que ce dernier fonctionne.

Quelle est la version de jQuery UI Effects utilisé ?

Le plugin utilise jQuery UI Effects dans sa version 1.7.2.
Il nécessite également jQuery 1.3+, disponible depuis WordPress 2.8.

Développement

Distribué sous licence GNU/GLP, le code source du plugin est accessible sur GitHub.

Une suggestion, une amélioration, une critique ou un bug à me soumettre ? Ça se passe du côté du bugtracker

Historique des versions

1.0.0

• Version initiale.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• Get Author’s Comments
• JavaScript : tester le support des couleurs RGBA
• Supprimer les effets de neige avec Greasemonkey
• SPIP Google Tools 1.0.1

La fin d’année approche à grands pas et voici que la la neige tombe sur les sites. Ces effets JavaScript, à l’esthétique discutable, entravent la navigation sur les pages mais surtout consomment un maximum de cycles CPU.

Supprimer les effets Snow Storm

On en a gros !

Je sais, moi aussi je ne les supporte plus >_<

C’est pourquoi j’ai écrit deux scripts destinés aux utilisateurs de l’extension Greasemonkey :

• SnowStorm Killer qui inhibe l’action de SnowStorm¹.
• jSnow Killer qui supprime l’effet du plugin jQuery jSnow.

Ils ciblent les 2 effets que je rencontre le plus souvent.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• WordPress jQuery UI Effects
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript