web2ajax » Ajax

Defer Google Analytics Tracking : jquery.gaTracker

Guillaume DE LA RUE — Thu, 10 Jun 2010 16:01:27 +0000

jQuery.gaTracker.js adds 2 features to standard Google Analytics script :
- Asynchronous Tracking ( tracking start once page load is complete )
- Allow to track dynamic pages on full ajax websites

Implementation
Load the last version of jQuery.

To init your UA-ID and track the current page, you can use it like this :
[sourcecode]

jQuery(document).ready(function($) {
$.gaTracker.init("YOUR-UA-ID");
}) ;
[/sourcecode]

Firstly, this will init the goggle analytics tracker with your Google Analytics Account ID.
Secondly, it will track the current page after ga.js load.

Track with jQuery binds
If you use dynamic navigation in Ajax, you normally already bind clicks on links in order to override standard navigator implementations.
To track those clicks with analytics, simply call $.gaTracker, passing the url in parameter, like this :
[sourcecode]jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
e.preventDefault() ;
$.gaTracker.track($(this).attr('href')) ;
}) ;
}) ;[/sourcecode]

Download
Download jQuery.gatracker.js v1.0 : source code & minified version

Recherche Beta Testeurs : boursereflex.com

Guillaume DE LA RUE — Fri, 05 Sep 2008 18:14:26 +0000

Bonjour tout le monde,

Vous allez vous dire : "il écrit pas beaucoup de billets en ce moment et il recherche des beta testeurs gratos !!"

Et bah oui, et pour une raison qui explique largement la première :)

Mon projet secret du moment ne l'ai plus trop puisqu'il va sortir incessement sous peu et donc nous aimerions avoir vos avis sur le look&feel et les informations qui y sont présentées.

Le site s'appelle donc boursereflex.com, un site boursier et financier dont la baseline est "L'argent, vu autrement".

Je serais vraiment trés interessé d'avoir une vingtaine de retours sur ce qui est fait actuellement, donc si ça vous interesse postez un petit commentaire à ce billet, j'aurais ainsi vos emails et je vous contacterais lundi soir pour vous donner les accès.

D'avance merci pour votre aide les bloggeurs fous !!

Framework IUI : Lavf.com en version iPhone

Guillaume DE LA RUE — Fri, 25 Apr 2008 14:39:28 +0000

Chose promise chose dûe :)

Je vous avez dit que j'allais tester IUI incessament sous peu le projet IUI à des fins pros et en voici le résultat : http://www.lavf.com/iphone/

L'intégration est vraiment très simple et hormis 2-3 modifs maison pour le moteur de recherche et le footer, ce framework pour iPhone est excellent !

Gestion du JS et de l'Ajax efficace, j'ai également découverts les outils css "-webkit' qui sont vraiment très utiles. Une bonne petite expérience !

Merci Yoni pour m'avoir fait découvrir cette petite chose...

Maintenant, je vais m'attaquer à la version smartphone mais ça va être beaucoup plus basique... dommage...

En tout cas, les portes de l'Ajax mobile sont grand ouvertes maintenant pour les boursicoteurs !

Insérez des indicateurs de chargement directement en JavaScript !!

Guillaume DE LA RUE — Wed, 16 Apr 2008 21:14:52 +0000

Suite à l'article vu sur ajaxian, je tenez à vous en faire profiter si vous ne suivez pas encore ce blog :)

Il s'agit en fait d'un js qui, utilisé sans aucune dépendance, permet d'insérer des indicateurs de chargemenr n'importe où et n'importe quand dans votre site !

Jettez un oeil à la démo et voyez par vous même en changeant les paramètres, c'est vraiment génial !!

Vous pouvez l'associer à jQuery par exemple en utilisant ce code :

[sourcecode]
var ctrl = getBusyOverlay($('#box'));
setTimeout(
function() {
ctrl.remove();
}, 2000);
[/sourcecode]

Pour télécharger la librairie et peut-être en faire un plugin jQuery :), cliquez-ici : busy.js

Graphics like Google Charts !

Guillaume DE LA RUE — Mon, 07 Apr 2008 12:11:48 +0000

Un petit bout de script qui devrait ravir ceux qui adorent les graphs.

Et oui, voici un outil qui devrait en surprendre plus d'un, permettant de dessiner de beaux graphiques en flash ou direct en gif avec une particularité tout de même : ils ont de la gueule !

No related posts.

Starbox, permettre à vos visiteurs de noter avec des étoiles !

Yoni — Mon, 10 Mar 2008 23:02:16 +0000

Starbox, basé sur la librairie javascript Prototype, (et utilisant en Scriptaculous pour créer de jolis effets fantômes...)

Va vous permettre de laissez à vos visiteurs le loisirs de noter articles, photos et autres contenus.

L'enregistrement des votes devant se faire en Ajax, c'est à dire sans avoir à recharger toute la page( pour faire simple)

L'outils est facile à paramétrer et à utiliser:

couleurs des étoiles par css
nombre d'étoiles, de cran
bloquer les votes
affichages d'informations sur le nombre de votants, la note moyenne
remplacer les étoiles par le lettres ABCDEF
renverser le sens des étoiles
...

L'utilisation est simple :

On charge les fichiers
[sourcecode]

[/sourcecode]

On crée le div dans lequel s'affichera la grille d'étoile
[sourcecode]

[/sourcecode]

Enfin pour afficher les étoiles
[sourcecode]
new Starbox(element, average);
[/sourcecode]

Voilà pour aujourd'hui ! DEMO ET DOWNLOAD

Validation plugin (Jquery OU Scriptaculous ?)

Yoni — Fri, 29 Feb 2008 17:12:29 +0000

Alors voici enfin ce que je cherchai depuis un moment.

jQuery vs Scriptaculous

Habitué à utiliser Really easy field Validation (REFV pour nous ) avec prototype et scriptaculous, je m'attachai à ce plugin pour rester sur scriptaculous.

En effet, il est très simple à utiliser et facilement adaptable, paramétrable, couplé avec juste Prototype et Effects.js de Scriptaculous pour les tests et les effets d'apparition des messages d'erreur.

Facilement adaptable, vous pouvez consulté un exemple ici en anglais sur la demo de l'auteur (telechargement)

ou en francais sur un site client récent (pas de spam s'il vous plait)

Ses Avantages...

Des effets d'affichage des erreurs superbes, sobre mais efficaces.
facilité d'adaptation (ajout de types de test temporaires intégrable facilement dans la page ou généraux dans le fichier source)
permet la validation javascript des champs lorsque le champs perd le focus ou au submit du formulaire
une source legere
Mais alors allez vous me dire, comment ca marche ?

C'est simple, tout d'abord pour chacun de vos champs vous fixez une class css correspondante au type de test requis.

[sourcecode]

[/sourcecode]

Ensuite vous donnez un identifiant au formulaire ( par expérience toujours le faire dans tous les cas ;) !)

et enfin, à la suite du formulaire

[sourcecode]

function formCallback(result, form) {

}
var valid = new Validation('id_form', {immediate : true, onFormValidate : formCallback});

[/sourcecode]

Qu'est ce que je découvre aujourd'hui ? un plugin similaire (néanmoins plus puissant) existe aussi avec Jquery Jquery Validation Plugin !

Brièvement ? Ben c'est pratiquement le même principe, les mêmes options de bases, + ?

Eh bien ses avantages :

Reprend les mêmes options que celui utilisant Prototype
Ajoute la validation sur l'évenement 'onchange' (peut être pratique, croyez moi)
Ajoute la possibilité de mettre un Capcha
Ajoute la possibilité de valider un champs en ajax par la balise remote ( par exemple vérifier que ce mail n'est pas pris !)
Et cela me libère de scriptaculous ;) je vais enfin pouvoir tester JQuery, sachant que la communauté est beaucoup plus dynamique et que le nombre de plugins disponibles est... faramineux !

La démo et téléchargement sur le site de l'auteur

IUI (User Interface Library for Safari )

Yoni — Tue, 26 Feb 2008 23:24:07 +0000

En cherchant à adapter un site web d'un client au navigateur d'iphone, je suis tombé sur ce projet.
Ce SDK simule à merveille l'environnement javascript et d'interface du petit bijoux d'apple.

C'est un projet open source bien sûr ...
Vous pourrez alors réaliser très facilement des interfaces pour iPhone.

FaceBook Like – jQuery and autosuggest Search Engine

Guillaume DE LA RUE — Sun, 03 Feb 2008 16:29:33 +0000

FaceBook Autosuggest Like is a powerful jQuery plugin to transform an input field into a real time autocompletion search engine, designed like facebook one.

This plugin require jQuery libs and the autocompletion plugin 'Bsn Autosuggest".

On custom side, make an ajax request and build search plugins to categorize your results.

Features :
- Autocomplete and ajax support
- Database search
- Support search plugins
- Support cache
- Cross Browser support ( IE > 5.5, FireFox, Safari, Opera )

I let u see the demo...
Have Fun !

jQuery : Rounded corners plugin

Guillaume DE LA RUE — Sun, 30 Sep 2007 21:38:37 +0000

Tout est bon pour gagner de précieuses minutes pour un webdesigner, et ce plugin est vraiment très pratique.

Comment on fait pour créer une boite avec des coins arrondis en temps normal ? On prend photoshop, on dessine un rectangle avecSelon la variante du poker en ligne, qui est joue. coins arrondis, on découpe l'image en 8, on la stocke sur le serveur et on met tout ça dans un tableau 3x3 ou dans des div imbriqués...

Vous m'avez compris, celà prend du temps et peut devenir fastidieux si on veut changer la couleur, faire des boites de style différents...

Et bien c'est terminé tout ça ! Une ligne de commande suffit à donner le plus bel effet à un simple rectangle de couleur. Pour plus d'informations, lisez ce post : http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery

jQuery : Edit in place plugin

Guillaume DE LA RUE — Wed, 26 Sep 2007 16:47:15 +0000

Avant toute chose : cet outil est magique !!

Le site que je suis en train de faire est un framework maison qui me permet entre autre de faire un site multilingue. Et c'est en ces moments que le EditInPlace prend tout sons sens : plutot que de passer par une interface d'admin pour traduire et déclarer une variable de langue une à une, je peux faire ça en live sur le site !

Pour ce qui est du plugin, tout se trouve sur le site : http://code.google.com/p/jquery-in-place-editor/

Quand à sa mise en place, c'est on ne peut plus facile :

1/ Tout ce qui est éditable est entouré de :
[sourcecode]
echo "$var";
[/sourcecode]

2/ On applique le EditInPlace sur tous les éléments que l'on souhaite pouvoir éditer :
[sourcecode]
$(document).ready(function(){
$(".editInPlace_i18n").editInPlace({
url: "index.php?module=core_admin&action=update_i18n",
bg_over: "transparent",
value_required: true,
params: "ajax=yes"
});
});
[/sourcecode]

3/ Mon action update_i18n récupère les données en POST et fait un update en base :
[sourcecode]
#@ Update lang var in DB
// Default lang
$def_lang = 'fr' ;

// Get var to update
$var_update = str_replace('lang__', '', $_POST['element_id']) ;

// Do update & write new text
if ( set_lang($var_update, $def_lang, $_POST['update_value']) ) {
echo $_POST['update_value'] ;
} else {
echo $_POST['original_html'] ;
}
[/sourcecode]

4/ Pour éditer les liens tranquillement, il faut également 'unbinder' tous les liens ', pour ça, il suffit d'ajouter :
[sourcecode]
$("a").unbind().bind("click", function(e) { e.preventDefault();} ) ;
[/sourcecode]

Je me sers d'une variable de session et d'un champ caché accessible par Javascript pour mettre à 'On' ou 'Off' le mode d'édition.

Bien sur, ce sera à adapter à votre environnement, mais tout est très bien expliqué sur le lien plus haut.

Vous savez tout maintenant, alors bon EditInPlace à tous !!

Quel framework Ajax choisir ?

Guillaume DE LA RUE — Fri, 07 Sep 2007 12:11:44 +0000

Il va de soit qu'un bon développeur, geeker de surcroit ne peut plus développer un projet sans faire appel à la magie d'Ajax ! Je sais et j'en connais, il y'aura toujours les fans du bon

et notepad pour développer, le fait d'utiliser AJAX change vraiment la vie et ouvre la porte à des fonctionnalités vraiment étonnantes.

J'ai commencé par le fameux 'scriptaculous' (http://script.aculo.us/), mais pour être honnête les mises à jour et nouveaux plugins ne sont pas fréquents.

=> Je l'ai tout de même utilisé sur la V2 du site de www.lavieimmobiliere.com, qui sera en ligne lundi 10 sept et c'est vrai que ça m'a déjà bien aidé pour coder le moteur de recherche, ainsi que les transitions entres les pages, le menu accordéon... Mais toujours avec un pti gout de pas assez...

Alors suivant ajaxrain quotidiennement (à mettre d'urgence dans votre RSS reader), les frameworks à la mode en ce moment sont jQuery et Mootools.

C'est donc curieux comme un loup affamé que j'ai testé jQuery sur un petit site web que je suis en train de faire (www.keystone.fr - Pas encore en ligne ! ) et c'est vraiment sidérant à quel point c'est simple et complet. La manipulation des objets DOM est impeccable, celle des CSS également, rapide... Que du bon en boite !

Alors ayant un nouveau projet sur le feu (un site de bourse plutot bien chiadé), avec plein de courbes dynamiques, beaucoup de contenu et finalement peu de place, quel framework choisir ?

- Côté perf : jQuery dont la réputation était très mauvaise au début à améliorer par 8 sa vitesse de traitement, ce qui en fait un des framework le plus rapide => C'est plutot un bon point ça

- Au moins un plugin différent sort par jour, plus fonctionnel les uns que les autres => C'est pas mal non plus ça

- Doc bien fournie

- Communauté très active donc.

Et puis en tapant sur une fourmilière, apparait ExtJS... (Tiens je l'avais pas encore vu celui-là !) Mais c'est exactement ce qu'il me faut ! D'ailleurs, pour me comprendre un peu mieux et avant de lire la suite, allez jetter un coup d'oeil aux démos disponibles sur le site :

Possibilité de l'utilsier en standalone, ou avec jQuery, YahooUI...

Nombreux effets et des choses comme les datagrid à partir d'un XML m'interessent plus particulièrement, possibilité de télecharger un packake 'Light' et de choisir les modules que l'on veut ajouter...

Donc à moins que je ne trouve mieux, mon choix va donc se porter sur ExtJS, que je trouve extrêmement bien fouttu et qui évolue super rapidement.

Allé, y'a plus qu'à maintenant !

Si vous voulez partager votre expérience, surtout n'hésitez pas car je vous avoue que le 'benchmarking' n'a pas été facile et je lorgne encore pas mal sur le YahooUI ou le google Toolkit...

jQuery : Bind des événements mouseover, click, key…

Guillaume DE LA RUE — Mon, 03 Sep 2007 19:42:55 +0000

Alors, attention en avant première mondiale !!, voici la Bonne méthode pour binder un callback sur un DOM... (Je me la pète là)

En clair, les événements comme "onClick", "onMouseOver", mappage de des touches peuvent être associés dynamiquement à des fonctions javascript et donc à la puissance de jQuery !

Un bon mouseOver ou onClick :

$("#div_id").unbind( "click" ) $('#div_id').bind("click", function() { alert('Oh yes, click me again !'; }); $("#div_id").unbind( "mouseover" ) $('#div_id').bind("mouseover", function() { alert('Mouse is Over me !'; });

=> Pour plus de détails : http://jquery.developpeur-web2.com/documentation/evenements/bind.php

Un bon mappage de touche (Je m'en sers pour afficher la fenêtre de login admin sur CTRL+L) :

Ajouter ça dans les headers, le.js est dispo en dessous de l'article : Après : $(document).shortkeys({ 'CTRL+L': function () { _dispLoginForm(); } });

=> Plus de détails : http://rikrikrik.com/jquery/shortkeys/

jQuery.fn.shortkeys = jQuery.fn.keys = function (obj, settings) {
var el = this;
this.settings = jQuery.extend({
split: "+",
moreKeys: {}
}, settings || {});
this.wackyKeys = { '.': 190, ',': 188, ';': 59, 'Space': 32 };
this.formElements = new Array("input", "select", "textarea", "button");
this.keys = new Array();
this.onFormElement = false;
this.keysDown = new Array();
this.init = function (obj) {
for(x in this.wackyKeys) {
this.wackyKeys[x.toUpperCase()] = this.wackyKeys[x];
}
for(x in obj) {
this.keys.push(x.split(this.settings.split));
}
for(i in this.keys) {
var quickArr = new Array();
for(j in this.keys[i]) {
quickArr.push(this.convertToNumbers(this.keys[i][j].toUpperCase()));
}
quickArr.sort();
this.keys[i] = quickArr;
}
};
this.convertToNumbers = function (inp) {
if (this.wackyKeys[inp] != undefined) {
return this.wackyKeys[inp];
}
return inp.toUpperCase().charCodeAt(0);
};
this.keyAdd = function(keyCode) {
this.keysDown.push(keyCode);
this.keysDown.sort();
};
this.keyRemove = function (keyCode) {
for(i in this.keysDown) {
if(this.keysDown[i] == keyCode) {
this.keysDown.splice(i,1);
}
};
this.keysDown.sort();
};
this.keyTest = function (i) {
if (this.keys[i].length != this.keysDown.length) return false;
for(j in this.keys[i]) {
if(this.keys[i][j] != this.keysDown[j]) {
return false;
}
}
return true;
};
this.keyRemoveAll = function () {
this.keysDown = new Array();
};
this.focused = function (bool) {
this.onFormElement = bool;
}
$(document).keydown(function(e) {
el.keyAdd(e.keyCode);
var i = 0;
for(x in obj) {
if(el.keyTest(i) && !el.onFormElement) {
obj[x]();
return false;
break;
}
i++;
};
});
$(document).keyup(function (e) {
el.keyRemove(e.keyCode);
});
for(x in this.formElements) {
$(this.formElements[x]).focus( function () {
el.focused(true);
});
$(this.formElements[x]).blur( function () {
el.focused(false);
});
}
$(document).focus( function () {
el.keyRemoveAll();
});

this.init(obj);
jQuery.extend(this.wackyKeys, this.settings.moreKeys);

return this;
}

jQuery : Raffraichir un Div périodiquement !

Effect ‘Accordéon’ sur les menus

Guillaume DE LA RUE — Mon, 20 Aug 2007 21:29:40 +0000

Deux solutions pour créer des menus accordéon comme sur le site d'apple [http://www.apple.com/downloads/]. Ces menus ont l'avantage d'etre du plus bel effet mais également un gain de place.

Avec jQuery : http://berndmatzner.de/jquery/hoveraccordion/

Avec scriptaculous : http://stickmanlabs.com/accordion/

Ajax : Effet menu ‘DOCK’ à la MacOS X

Guillaume DE LA RUE — Mon, 20 Aug 2007 19:08:47 +0000

Sans FrameWork AJAX : FishEye Menu

Avec jQuery : iconDock jQuery Plugin

Avec prototype et scriptaculous : WhaleSalad

Ouverture du Blog !!

Guillaume DE LA RUE — Mon, 20 Aug 2007 15:25:48 +0000

Développeur de profession et avant tout accro aux nouvelles technologies du web, j'ai décidé d'ouvrir www.web2ajax.fr afin de vous faire partager mes lectures, trouvailles et expériences personnelles.

Parce qu'il serait prétentieux de vous dire que toute l'actualité du web2.0 passera par Web2Ajax.fr, je souhaite en tout cas faire en sorte que ce site devienne incontournable et une aide précieuse pour les développeurs. Alors à très bientôt et n'hésitez pas à repasser dans le coin et participer aux sujets.