11/30/2009

My (unofficial) Kuripotxt PHP API

If you follow me on twitter, you may have seen these tweets :
Kuripotxt.net, my new free #sms gateway #Hijack (flickr) http://flic.kr/p/7iRJpK 3:38 PM Nov 28th
Kuripotxt.net, my new free sms gateway #Hijack

Kuripotxt, free sms "api": Hijack Part2 http://flic.kr/p/7iVJtm 3:48 PM Nov 28th
Kuripotxt, free sms "api": Hijack part2
Yeah... It works ! (on my blog in less than 1 hour :)
$myGateway = new Kuripotxt();
$myGateway->sendSms(33600000000,"Hello World"); 16 minutes ago

After one hour of development, I am glad to show you a PHP Class for Kuripotxt using the HttpClient library.

Usage:
include "kuripotxt.class.php";

$mySender = new Kuripotxt();
//International number format without "+"
$phoneNumber = 33612345678;
$mySender->sendSms($phoneNumber,'Hello world');//one method


[Video] Mon Passage à France 3

Simon Robic et moi même avons été interviewés lundi par France 3 Pays de la Loire. Le reportage a été diffusé jeudi dernier, et le voici en ligne :)

10/28/2009

Lancement des versions localisées de Twitter

Billet très rapide pour annoncer le lancement officiel de :

J'essayerai d'écrire un autre billet pour donner plus d'informations techniques sur l'architecture des sites.
10/12/2009

preg_replace/preg_replace_callback PURE Javascript equivalent

I didn't know that but the string replace method support $X notation style and callback functions:

preg_replace
in pure javascript:


preg_replace_callback in pure javascript:

PHP preg_replace_callback Javascript equivalent

Usage:

[Explore Code] [Download @GitHub]
10/10/2009

PHP preg_replace the Javascript equivalent

It's seems that preg_replace (and apparently preg_replace_callback) doesn't exist in PHP.js or any other javascript library, however after some research I've found this one from Ferdinand Silva:



And this one from Xuan NGUYEN:


Problems
But their function don't support references (of the form \\n or (since PHP 4.0.4) $n or ${n}) in the remplacement argument . So I've developped mine !


Check my GitHub page for the PHP preg_replace Javascript Equivalent
10/03/2009

Twitter recommendation-power indicator tool [updated]

I've just released a new version of Twitter recommendation-power indicator tool.

Changelog:
  1. Now support minurl.fr & minu.me
  2. "pass Reply & RT" option added
  3. Some bug fixes

However I still wait for a tr.im API key...
9/22/2009

$.bindExist - Check if a bind's type is specified on an element or not.

I've just published my first official (tiny) jQuery plugin: $.bindExist

Usage:
$('#myDiv').bindExist('click');//return false
$('#myDiv').bindExist('click.myNS');//return false

$('#myDiv').bind('click.myNS',function(){alert('Plop!');});

$('#myDiv').bindExist('click');//return true
$('#myDiv').bindExist('click.myNS');//return true


5/16/2009

Configurer Bonjour Mounter pour utiliser votre compte Box.net

Bonjour Mounter (téléchargeable ici) est une application Mac permettant de monter automatiquement des disques réseaux (afp, smb, cifs, webdav et ftp). Ayant eu beaucoup de difficultés à monter mon compte Box.net, voici une capture avec les réglages fonctionnels:

Le champs "server" n'accepte pas de "http://" ou de "https://" et l'adresse ne doit pas contenir de "/" terminateur. C'est uniquement grâce à l'application "Messages Console" et Bonjour Mounter en mode Debug que j'ai pu découvrir d'où venait le problème.

3/24/2009

Gérer les éléments input radio avec jQuery

J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné.

Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio.

Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant :

<form action="?" method="get" id="monForm">
<input type="radio" name="opt1" value="1" checked="checked" />
<input type="radio" name="opt1" value="2" />
<input type="radio" name="opt1" value="3"/>

<input type="radio" name="opt2" value="1" />
<input type="radio" name="opt2" value="2" checked="checked" />
<input type="radio" name="opt2" value="3" />

<input type="radio" name="opt3" value="1" checked="checked" />
<input type="radio" name="opt3" value="2" />
<input type="radio" name="opt3" value="3"/>
</form>


Accéder aux inputs de type radio en jQuery

Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides :

Benchmark jQuery
Il en ressort que l’expression input[type=radio] est plus rapide que input:radio (mais est-elle autant générique ?)

Le résultat sont très variable lorsque l’on précise un contexte (ici #monForm) et un grand nombre de radio. Je pense donc que les trois dernières expressions ne sont pas à prendre en compte dans l’analyse, du moins pour le moment. (Je travaille actuellement à améliorer mon outils de Benchmark afin que chacun puisse tester ses propres expressions jQuery).

Récupérer tous les inputs radios appartenant à un même groupe

$('input[type=radio][name=opt1]');//ici retourne 3 éléments input

Connaître si un groupe de radio à une valeur

$('input[type=radio][name=opt1]:checked').length; // Doit être égal à 1 si un radio à été sélectionné dans le groupe de opt1.

Vérifier que tous les radios ont été sélectionnés

$('input[type=radio]:checked').length; // Si au moins un radio est sélectionné pour chaque groupe, ce snippet retourne 3 (dans notre exemple)

Récupérer la valeur d’un groupe de radio

$('input[type=radio][name=opt1]:checked').attr('value'); //Retourne la valeur du radio sélectionné dans le groupe opt1. Retourne vide si aucun radio sélectionné

3/12/2009

Trouver le style réellement appliqué sur un élément (sans jQuery)

Etant en train de développer un addon pour Firefox/Firebug qui aidera plus d’un développeur (en tout cas moi) j’ai eu besoin de connaitre le fontFamily d’un élément. Dans cet article je ne traiterai donc que de la façon de récupérer un fontFamily. Cependant la récupération d’autres propriétés CSS (via une fonction générique par exemple) est tout à fait possible.

 

Si le fontFamily a directement été défini (in-line) sur l’élément

<span id='monEl' style='font-family:Tahoma'>Javascript</span>

... alors un simple :

document.getElementById('monEl').style.fontFamily;

ou

$('#monEl').css('fontFamily');

... suffit pour récupérer la valeur de la propriété fontFamily de l’élément.

 

Maintenant si l’on supprime l’attribut style de notre span#monEl le code suivant retournera une chaine vide :

document.getElementById('monEl').style.fontFamily;//retourne ""

Cependant le code jQuery, lui, fonctionnera.

 

Arriver à nos fin sans jQuery

Au début je pensait qu’il suffirait d’effectuer une boucle sur les éléments parents du DOM : remonter à chaque fois d’un élément et dès qu’un élément a un fontFamily de valide, stopper la boucle et retourner sa valeur. Mais il y a beaucoup plus simple.

 

jQuery procède d’une façon différente. En regardant son code de plus près j’ai découvert qu’il avait recourt à la méthode DOM de niveau 2 getComputedStyle() pour récupérer la valeur d’un attribut CSS hérité d’un élément parent. Malheureusement cette méthode ne semble pas être intégré sous IE qui lui dispose de la propriété currentStyle.

 

Voici donc une fonction (basé sur le code utilisé par jQuery) qui retourne, pour un élément donné, la valeur du fontFamily associé :

function getFontFamily(el){
    var ret;
    if (el.style && el.style['fontFamily'])//Si l'élément a déjà la propriété de définie
        ret = el.style['fontFamily'];
    else if (document.defaultView.getComputedStyle){//Firefox, Opera
        var computedStyle = document.defaultView.getComputedStyle(el, null );

        if(computedStyle)
            ret = computedStyle.fontFamily;
    }
    else if (el.currentStyle)//Internet Explorer
        ret = el.currentStyle['fontFamily'];
    return ret;
}

Testé sous Firefox et Chrome.

2/25/2009

Réaliser une copie profonde d’objet (deep copy) en Javascript

Un des problèmes récurrent avec Javascript est qu’il est difficile de savoir si une variable passée par référence ou par valeur.

En VB (VB6, VB.NET) il est possible de déclarer dans l’entête de la fonction by val ou by ref pour préciser le mode de passage mais ce n’est pas le cas en Javascript.

//Création de l'objet monObjet
var monObjet = new Object();

// monDeuxiemeObjet réfère à l'objet monObjet
var monDeuxiemeObjet = monObjet;

// On modifie une propriété du premier objet
monObjet.unePropriete = true;

// Les changements sont aussi appliqué sur le second objet
// (Le deuxième objet réfère au premier objet)
alert( monObjet.unePropriete === monDeuxiemeObjet.unePropriete );//affiche true

 

Dans cette exemple, la copie de monObjet dans monDeuxiemeObjet à été effectuée par référence, ce qui signifie que monDeuxiemeObjet pointe vers l’adresse de monObjet (même si la réalité est un peu plus complexe que cela…monDeuxiemeObjet pointe sur la référence de l’objet final monObjet mais c’est une autre histoire).

 

Seulement dans certains cas, il arrive que nous ayons besoin de réaliser une vrai copie. Par exemple sauvegarder monObjet dans une variable temporaire et effectuer des traitements uniquement sur cette variable sans que cela n’affecte monObjet. Dans certains cas là méthode que je vous propose n’est pas indispensable notamment dans le cas où l’objet à copier n’est pas complexe.

 

Heureusement jQuery intègre la méthode extend. Basiquement elle permet de gérer l’héritage d’un objet vers un à plusieurs autres objets. Mais elle permet aussi la copie profonde (deep copy) d’un objet vers un autre et donc une copie par valeur (et non plus par référence) via son paramètre optionnel “deep”.

 

jQuery.extend( [deep], target, object1, [objectN] )

 

//Création de l'objet monObjet
var monObjet = new Object();

var monDeuxiemeObjet = {};
$.extend(true,monObjet,monDeuxiemeObjet);//deep copy

// On modifie une propriété du premier objet
monObjet.unePropriete = true;

// Les changements ne sont pas appliqué sur le second objet
// monDeuxiemeObjet.unePropriete est indéfini
alert( monObjet.unePropriete === monDeuxiemeObjet.unePropriete );//affiche false

Ici, monDeuxiemeObjet ne réfère plus à monObjet. Ces deux objets possèdent chacun leurs propres adresses mémoires, il est ainsi possible de travailler sur l’un sans modifier l’autre.

2/21/2009

Modifier openWYSIWYG afin qu’il supporte Google Chrome

L’outil pour ajouter sa signature HTML à Gmail utilise l’éditeur openWYSIWYG que j’apprécie particulièrement pour son côté cross-browser, open-source et son interface très léger. Seulement, même la dernière version ne supporte pas Google Chrome.

Après un bref regard sur le code, je me suis aperçu que la vérification de la compatibilité s’effectuait au niveau de la méthode isBrowserCompatible :
isBrowserCompatible: function() {
// Validate browser and compatiblity
if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode){
//no designMode (Safari lies)
return false;
}
return true;
},

N’ayant pas Safari et ne pouvant donc pas vérifier si oui ou non “Safari lies” j’ai préféré simplement ajouter le support de Chrome tout en laissant le blocage de Safari. Il suffit donc de modifier le test et d'y ajouter l'expression booléen suivante :
if ((navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) || !document.getElementById || !document.designMode){

C’est fini ? Eh bien non, après un test cela ne fonctionnait toujours pas, Chrome retournait une erreur Uncaught TypeError: Object # has no method 'insertAdjacentHTML'. Une recherche plus tard, je découvre ce block de code :
/**
* Emulates insertAdjacentHTML(), insertAdjacentText() and
* insertAdjacentElement() three functions so they work with Netscape 6/Mozilla
* by Thor Larholm me@jscript.dk
*/
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode){
    HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) {.. };
    HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) {…};
    HTMLElement.prototype.insertAdjacentText = function (where,txtStr) {… };
}


Or sous Chrome l’objet HTMLElement ET sa méthode insertAdjacentElement existe mais pas la méthode insertAdjacentHTML. Cette condition n’était donc pas validée. Il suffisait de modifier la condition comme ceci pour que openWYSIWYG supporte Chrome :
if((typeof HTMLElement!="undefined" && (!HTMLElement.prototype.insertAdjacentElement || !HTMLElement.prototype.insertAdjacentHTML))){
Remarque: il est préférable ici de ne pas agir en fonction du navigateur (donc un test sur le user-agent) mais plutôt sur la présence ou non de la fonctionnalité sur le navigateur. En utilisant cette méthode on code ainsi de façon plus générique et les scripts deviennent compatibles (ou inversement) avec les mises à jour des navigateurs.

Ps : En bon webnaute j’ai proposé cette modification sur le forum dédié afin qu’elle soit intégrée à la prochaine release.
2/15/2009

Algorithme tri de couleur (+ demonstration javascript)

 

Il y a 3 semaines, j’expliquais sur ce blog comment créer un algorithme qui était capable de définir automatiquement la couleur d’un texte par rapport à son arrière plan. Aujourd’hui, je vous propose de trier un set (ou une palette) de couleur.

 

Pour vous faciliter nous faciliter la tâche voici quelques restrictions :

  1. Notre set (ou palette) sera composé de 5 couleurs
  2. Les couleurs devront être triées de la plus claire à la plus foncée (l’inverse est tout aussi possible)

 

En fidèle lecteur de ce blog vous vous souvenez sans doute de cet article où j’expliquais comment réaliser une fonction de tri simple. Grâce à ces deux précédents articles nous sommes capable de réaliser de réaliser une fonction de tri de couleur.

 

La théorie

Pour savoir si une couleur est plus clair ou plus foncée qu’une autre, il suffit de se référer à la luminance de leurs codes HSL. Au lieu de trier des nombres du plus petit au plus grand il faut donc trier les couleurs par leurs composantes HSL de la plus grande (100% : blanc) à la plus petite (0% : noir).

 

L’algorithme

Ce qui nous donne cet algorithme :

tabCouleur = ["0B8C8F", "FCF8BC", "CACF43","2B2825","D6156C"]

//Convertir de HEX en HSL
convertirTableauCouleurHEXversHSL(tabCouleur);

//Le tableau est maintenant de la forme :
//tabCouleur = [[,,], [,,], [,,], [,,], [,,]]

//Luminance de la première couleur : tabCouleur[0][2]

Faire
    Si(tabCouleur[0][2] < tabCouleur[1][2])
        tabCouleur.intervertir(0,1);
    SinonSi(tabCouleur[1][2] < tabCouleur[2][2])
        tabCouleur.intervertir(2,3);
    SinonSi(tabCouleur[2][2] < tabCouleur[3][2])
        tabCouleur.intervertir(2,3);
    SinonSi(tabCouleur[3][2] < tabCouleur[4][2])
        tabCouleur.intervertir(3,4);
TantQue(!(    tabCouleur[0][2] >= tabCouleur[1][2]
        &&     tabCouleur[1][2] >= tabCouleur[2][2]
        &&     tabCouleur[2][2] >= tabCouleur[3][2]
        &&     tabCouleur[3][2] >= tabCouleur[4][2]))

//Convertir de HSL -> HEX
convertirTableauCouleurHSLversHEX(tabCouleur);

L’équivalent Javascript n’est pas très différent. Les fonctions convertirTableauCouleurHEXversHSL et convertirTableauCouleurHSLversHEX vont en fait transformer le code HEXA en RGB puis en HSL et inversement.

 

Pour ce qui est de la méthode intervertir. Elle ne fait rien d’autre qu’une inversion (swap) entre 2 éléments (spécifiés par leurs index) d’un même tableau. Le code Javascript est donc :

var tmp=tabCouleur[x];
tabCouleur[x]=tabCouleur[y];
tabCouleur[y]=tmp;

 

Démonstration en javascript

J’ai réalisé une démonstration en javascript de cet algorithme sur le sous domaine projets. Le script importe dynamiquement (via l’API de ColourLovers) des palettes de couleurs il vous suffit alors de cliquer sur une palette pour la trier.

 

A chaque chargement de l’API, une seconde palette est générée et contient toutes les couleurs des autres palettes le temps de tri est légèrement plus long mais le résultat est là.

 

Pour accéder à la démo de tri des couleurs en javascript c’est par ici.

 

Remarque : Certaines palettes ont déjà leurs couleurs de triées de la plus foncées à la plus clair.

2/10/2009

Mise à jour : Bookmarklet pour avoir une signature HTML sous Gmail

 

Petite note de service pour vous informer de la mise à jour de mon générateur de bookmarklet permettant d’insérer une signature HTML sous Gmail. J’avais réalisé la première version dans mes débuts avec jQuery et je ne connaissais pas la méthode .prepend() : maintenant la signature s’ajoute tout en haut de votre email, il vous suffit donc de l’ajouter puis d’écrire ensuite votre message.

 

D’ailleurs Ghacks proposait aujourd’hui un article, qui (…outre le fait d’y intégrer un lien vers mon générateur ^^) propose 90 outils et astuces pour devenir un Pro de Gmail.

 

Si vous avez des suggestions concernant le bookmarklet, j’en tiendrais compte pour la prochaine version.

2/06/2009

Note de service : flux RSS du site

Certains d’entre vous l’on peut-être remarqué. L’ancienne adresse du flux RSS redirige vers http://feeds2.feedburner.com/geekfg. Cette adresse est donc la nouvelle adresse du flux, pensez à mettre à jour vos Netvibes, Google Reader et autres agrégateurs RSS.

1/25/2009

Choix automatique de la couleur d'un texte en fonction de sa couleur d'arrière plan

Ou en terme plus technique, comment créer un algorithme qui retourne un foregroundColor adéquate en fonction d'un backgroundColor variable.

Dans le cadre de mon stage @ Zlio Nantes, j'ai eu besoin de créer un algorithme qui, à partir de n'importe quelle couleur d'arrières plans, serait capable de définir si la couleur du texte (blanc ou noir) afin que ce dernier soit toujours visible.

Postulat : Pour la démonstration, nous prendrons un vert foncé comme couleur d'arrière plan

#155147 = rgb(21, 81, 71); //RGB (Red, Blue, Green) ou RVB (Rouge, Vert, Bleu)

 

Méthode rapide

La première idée qui pourrait vous venir à l'esprit serait d' additionner les composantes RVB :

21+81+71 = 173

Or, au maximum il est possible d'obtenir une somme de

255+255+255 = 765

Donc il suffirait donc de regarder si la somme des composantes et supérieur ou inférieur à 382,5 (765/2) pour savoir s'il faut mettre le texte en blanc (donc plus clair) ou en noir (plus foncé). Ce qui pourrait donner cet algorithme :

var couleurRGB = [21,81,71];

Si couleurRGB[0]+couleurRGB[1]+couleurRGB[2] > 382 Alors
     //#FFFFFF
Sinon
     //#000000
FinSi

En réalité cet approche est fausse. D'ailleurs en utilisant la couleur de l'exemple, l'algorithme nous propose d'utiliser du noir. Voici le résultat :

En testant on constate que le texte n'est clairement pas visible et que le blanc aurait été un meilleur choix.

 

En baissant la valeur seuil à 170 notre algorithme retourne une couleur correcte (blanc) pour notre exemple, mais qu'en est-il pour ces autres couleurs ? rgb(4, 1, 31), rgb(9, 23, 9), rgb(29, 50, 3), rgb(27, 15, 27). La somme de leurs composantes ne dépasse pas 170 et pourtant la proposition est fausse, notre algorithme propose du noir.

Pour corriger cela nous pourrions baisser la valeur seuil. Lors de mes tests j'ai réussi à obtenir de très bon résultat avec une valeur seuil à 86 mais il reste encore une infinité de cas où notre algorithme propose une couleur erronée.

A ce stade, 2 possibilités. Soit nous complexifions notre algorithme en étudiant chacune des composants les une après les autres et en réalisant un savant mélange de test,... Soit nous passons à la méthode fiable.

 

Méthode fiable

La méthode fiable consiste à convertir le format de gestion de couleur de RGB vers HSL (Hue, Saturation, Lightness) soit TSL (Teinte, Saturation, Lumière) en français. C'est la composante lumière qui nous intéresse :

La lumière est la luminosité (depuis 0 % qui correspond au noir jusqu'à 100 %, luminosité maximale permise par le support, le blanc dans le cas des écrans).

Une fois la conversion effectuée ils nous suffira de définir si la composante "L" est supérieur ou inférieur à 50% et d'en déduire la couleur à appliquer en premier plan. Notre algorithme devient donc :

var couleurRGB = [21,81,71];
var couleurHSL = RGBtoHSL(couleurRGB);

Si couleurHSL[2] > 0.5 Alors //0.5 = 50% 
     //#000000
Sinon
     //#FFFFFF
FinSi 

Et voila ! Cette méthode est légèrement plus lente en calcul processeur car elle nécessite une conversion supplémentaire mais elle est 100% fiable.

[MAJ] La démo est disponible en ligne ici, elle intègre le code javascript fonctionnel des deux algorithmes ainsi qu'un script de test pour comparer automatiquement leurs valeurs de retour.

1/12/2009

Débugger avec Firebug sous Firefox en testant en parallèle avec IE, Opera et Chrome

Si vous développez et débuggez votre application sous Firefox et utilisez les méthodes de l’objet console de Firebug, tel que :

console.debug(maVariable);
console.info('Hello World :', monApplication.version);
console.log('Logged in');

Il vous est alors impossible de tester votre code en parallèle sous Internet Explorer, Opera et Chrome[1] sans voir apparaitre un de ces messages :

/* IE */
Erreur : 'console' est indéfini

/* Opera */
Error:
name: ReferenceError
message: Statement on line 437: Undefined variable: console

/* Chrome (v1.x.xxx.x) */
Uncaught TypeError: Object #<a console="console"> has no method 'debug'

 

Commençons donc par un petit rappel sur les moyens de débug offert par ces différents navigateurs :

 

Internet Explorer

Il n’existe pas de console en natif qui propose les mêmes fonctionnalités que celles offertes par Firebug. Cependant des plugins tel que DebugBar devraient permettre cela.

 

Opera

Opera possède sa propre méthode postError() mais son utilisation est limitée car elle n’affiche pas le contenu des objets

opera.postError([1,2,3,4,5]);//Affiche: 1,2,3,4,5
opera.postError('Mon tableau',[1,2,3,4,5]);//Affiche: Mon tableau,1,2,3,4,5
opera.postError({maPropriete: 'Hello', maMethode : function(){return 'World';}});//Affiche: [object Object]

Google Chrome

Dans ses dernières versions (testé sous 2.0.156.1) Chrome supporte partiellement, via sa Console Javascript (Ctrl+Maj+J) les méthodes suivantes :

console.debug();
console.info();
console.log();

Partiellement car il est actuellement impossible de passer plusieurs objets/tableaux via un seul appel

monTableau = [1,2,3,4,5,6];
monObjet = {maPropriete : 'Hello', maMethode : function(){return 'World';}};
console.debug(monTableau,monObjet);//Affiche: [1, 2, 3, 4, 5, 6] Object
console.debug(monObjet);//Affiche le contenu de l'objet monObjet

La solution

Voici un bout de code (snippet) à placer avant tout appel aux méthodes console.debug, console.info et console.log.

//On créé l’objet console s’il n’existe pas (sous d’autre navigateur que Firebox & Chrome)
if(typeof console !== 'object')
     console = {};
if((typeof console.debug) !== 'function')//On pourrait aussi vérifier pour console.info et console.log
{
     if(typeof opera === 'object')//On redirige les appels vers opera.postError();
         console = {debug : function(){return opera.postError(arguments);}, info : function(){this.debug('[INFO] ',arguments);}, log :
function(){this.debug('[LOG] ',arguments);}};
     else//Ne rien afficher sur les autres navigateurs
         console = {debug : function(){return true;},info : function(){return true;}, log : function(){return true;}};
}

Il vous est maintenant possible de tester (voir même de debugger si vous êtes sous Chrome et/ou Opera) votre application sans vous soucier de supprimer les lignes de debug pour Firebug. Je vous conseille toutefois de placer ce bout de code dans l’événement DomReady afin d’éviter tout problème de chargement.

DomReady avec jQuery :

$(document).ready(function(){ /* bout de code à copier ici */ });

DomReady avec MooTools:

window.addEvent('domready', function() { /* bout de code à copier ici */ });

[1] Versions 1.x.xxx.x de Chrome

1/03/2009

Savoir si les librairies JavaScript jQuery, Prototype, Mootools, YUI et DOJO sont présentes sur une page web

Voici plusieurs bouts de code qui vous permettrons de savoir si tel ou tel libraire est présente (mais pas forcément initialisées) dans une page web. Très utile lorsque vous devez réaliser un script reposant sur l'une de ces librairies, il vous est alors possible d'éviter de ré-inclure la librairie. Pour cela il suffit d'utiliser un bootstrap (Facebook appelle cela un bootloader).

bootstrap : petit programme d'amorçage qui permet d'en lancer un plus gros. (Wikipedia)

 

JQuery :

var JQuery_estPresent = (typeof jQuery != "undefined")?true:false;

Prototype :

var Prototype_estPresent = (typeof Prototype != "undefined")?true:false;

Mootools :

var MooTools_estPresent = (typeof MooTools != "undefined")?true:false;

YUI :

var YahooUI_estPresent = (typeof YAHOO != "undefined")?true:false;

Dojo :

var Dojo_estPresent = (typeof dojo != "undefined")?true:false;

 

Exemple d'utilisation via un BootStrap depuis une page web

var hasJQuery = (typeof jQuery != "undefined")?true:false;//retourne un booléen selon la présence de jQuery sur la page
var scrpt = document.createElement('script');
scrpt.src = 'http://monsite.com/script/monscript.js.php?' + (hasJQuery?'besoinDeJquery=true':'');//préparation de l'URL
document.body.appendChild(scrpt);//ajout du script

Le fichier monscript.js.php se chargera d'inclure ou non la librairie jQuery en fonction de la variable besoinDeJquery.

 

De nombreuses autres utilisations de ces informations sont bien entendu possible.

« »
 
 
Made with on a hot august night from an airplane the 19th of March 2017.