web2ajax » jQuery

Best methods to have highest Framerates in html5 games

Guillaume DE LA RUE — Thu, 10 Feb 2011 00:24:45 +0000

Hi,

I've just received a very interesting mail from facebook developers blog since one hour explaining how to improve html5 performance in games (canvas+css3+javascript).

Main things to remember are :
- For desktop modern navigators ( Chrome 10/9, Firefox 4, IE9 =geeks&chuck norris at this time ) a canvas per object is better.
- But for now, this represents a little part of the mondial internet browsers park, so while waiting for a general up to date versions operation, user DIV tags with background images is better than canvas use.
- My personal tweak is to use the jquery-transform plugin, which has really results on oldIE for rotate and scales css3 replacement.
- Use webkit transitions for IOS games, javascript in desktop browsers to animate DOM ( absolute position )
- And finally for me, last advice was to use individuals sprites rather than one for all objects ( sprites images must be small to have better performances in cut )

So here now, the complete facebook blog post can be read here : http://developers.facebook.com/blog/post/460

PATATOR : Facebook Game in Canvas and HTML5

Guillaume DE LA RUE — Thu, 13 Jan 2011 21:04:17 +0000

Patator but what's this ? Patator is my first experience in social gaming made in HTML5 and to be more precise, in canvas and jQuery.
So I made for this the alpha version of a canvas gaming engine.

Sure this one has to grow, and gain in frame rate performance, but I think it's a good start to work on an open source HTML5 Gaming Framework.

For moment, Game is not avalaible on IE

Comment faire des Bannières avec jQuery

Guillaume DE LA RUE — Sat, 04 Dec 2010 14:33:13 +0000

J'ai été impressionné par le rendu des bannières générées par ce plugin jQuery : CustomAnimationBanner.
Dans les faits, ce plugin utilise les plugins Easing et 2D transforms pour animer des séquences.

On définit un timer, des étapes et les transitions à appliquer.

HTML :
[sourcecode]

[/sourcecode]

STEPS CONFIG :
[sourcecode]$('#ca_banner1').banner({
steps : [
[
//1 step:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//2 step:
[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {}]
],
[
//3 step:
[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
[{"to" : "2"}, {}]
],
[
//4 step
[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
[{"to" : "2"}, {}],
[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
],
[
//5 step
[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
]
],
total_steps : 5,
speed : 3000
});[/sourcecode]

EFFETS DISPONIBLES :
- zoomOut-zoomInRotated
- zoomOutRotated-zoomInRotated
- zoomOut-zoomIn
- slideOutRight-slideInRight
- slideOutLeft-slideInLeft
- slideOutTop-slideInTop
- slideOutBottom-slideInTop
- slideOutTop-slideInBottom
- fadeOut-fadeIn commented
- fadeOut-zoomIn commented
- zoomOut-fadeIn commented

Plus de détail sur l'installation et l'utilisation sur le blog de tympanus.

Social Mix Media : L’agence des médias sociaux

Guillaume DE LA RUE — Thu, 28 Oct 2010 10:53:05 +0000

Un petit billet pour vous signaler que mon dernier bébé est sorti ce matin : www.socialmixmedia.fr.

C'est le site vitrine de l'agence Web spécialisée sur les Médias Sociaux pour laquelle je travaille en tant que Freelance.

Alors n'hésitez pas à nous contacter pour toute question sur le SMO (Social Media Optimization) afin d'améliorer votre visibilité sur les réseaux sociaux comme facebook, twitter, linked...
=> On commence à avoir une bonne expérience et de solides contacts

Rejoignez-nous sur facebook : Devenez Fan !
Compte twitter : Suivez-nous !
Linkedin : Rejoignez-nous !

jQuery LazyLoad Ad v1.4 : new version of defer ad plugin !

Guillaume DE LA RUE — Tue, 19 Oct 2010 15:04:52 +0000

jQuery LazyLoad Ad plugin has been updated and version is now 1.4.
Improved on a lot of features, plugin is more strong and have now the capacity to chain script loading.

For this new version, I've build a mini site (jqueryad.web2ajax.fr) focused on this plugin. You'll find a presentation of the plugin, some demos, how to implement it in your own blog or website and download links.

Some people ask me a new feature that is Lazyload for images too. I hope it could be implemented in the next version 1.5 soon.

For moment, this plugin was successfully tested on adSense, OpenX tags, BlogBang and GoViral platforms.
Let me your feedbacks !

Développement d’un application facebook : ‘Le Grand Quizz du Sport’

Guillaume DE LA RUE — Mon, 04 Oct 2010 00:46:01 +0000

Je tenais à vous présenter ma première application développée pour facebook qui se présente sous la forme d'un Quizz avec un timer pour chaque question. Tout ça sur le thème du sport !

Le FrontEnd est en FBJS + jQuery et le backEnd, c'est une api en PHP.

Elle comporte des outils de viralisation comme les Social Plugins "I Like" / "Invite your friends" / "Facepile"..., un classement mondial, la tenue de stats, Facebook Connect...

L'application est sortie officiellement aujourd'hui et validée sur le apps dir de facebook.
Je vous tiendrais au courant de l'évolution des stats et le phénomène de propagation.

On croise les doigts pour que ça prenne !

D'ailleurs si vous voulez tester vos connaissances ou voir à quoi ressemble cette application et analyser les différents mécanismes (authentification/publication...), cliquez-ici : Le Grand Quizz du Sport sur Facebook

Si vous souhaitez en savoir plus sur comment telle ou telle chose : faites moi signe :)

Bye.

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

Dernier Projet en ligne : MeeT ImmO

Guillaume DE LA RUE — Fri, 07 May 2010 01:48:34 +0000

Je travaille depuis un bon gros mois sur le projet d'un ami et j'avoue que le résultat est au-delà de nos espérances !
C'est pourquoi je tenais à vous présenter mon travail : www.meetimmo.fr, car on peut dire que je me suis bien laché sur l'utilisation de jQuery, sans oublier d'être SEO friendly and IE compatible (Certainement le plus hardu...)

Je vous invite à en découvrir un peu plus...

MeeT ImmO est donc une agence immobilière basée sur Rouen et Paris.
Elle se positionne sur un marché dit 'Immobilier de Prestige' et c'est pourquoi nous avions besoin d'un site réellement différent de la concurrence, avec une mise en valeur importante des photo-reportages.

C'est sur ce principe qu'est né l'interface de MeeT ImmO : une interface quasi plein-écran

Je vous invite donc à aller voir ce site sans plus tarder et si vous avez la moindre question concernant le développement, je suis prêt à divulguer mes petits secrets de fabrication.

A noter que les nouveaux bien sont automatiquement publiés vers Twitter et Facebook. Tout ça connecté au flux RSS FeedBurner... C'est beau quand même la techologie !

Sur ce, je vais me coucher heureux de mon accouchement ^^

@+

WordPress Tips : Hide oldest comments in wordpress with jQuery

Guillaume DE LA RUE — Thu, 22 Apr 2010 03:17:51 +0000

A simple tip for wordpress blogs to hide oldest comments at single load page with jQuery.

For this tip, I suppose you already load jQuery JS framework in your blog.

In your wordpress theme directory, edit 'comments.php' and add the code below to to the end of the file :

[sourcecode]

jQuery(document).ready(function() {

var $comment = $('#comment_list') ;
var $comments = $comment.find('li') ;
var num2display = 8 ;

// -- Hide all comments except 'num2display' newest
$comments.slice(0, $comments.length - num2display).css({display:'none'}) ;

// -- Create the 'Show all comments' link
if ( $comments.length > num2display ) {
$show_all = $('

Click here to view the '+Math.max(0, $comments.length - num2display) +' other comments...

') ;

// -- Bind click on link
$show_all.click(function() {
$comments.css({display:'block'}) ;
$(this).remove() ;
}) ;

// -- Insert link to click after comments list
$show_all.insertAfter($comment.find('ul')) ;
}
}) ;

[/sourcecode]

Then, at load page, you will only have the 8 newest comments on your post and a link to show others.

Look at this blog for more examples and have fun with jQuery !

jQuery LazyLoad Ad : Delays loading of advertising

Guillaume DE LA RUE — Thu, 25 Mar 2010 15:18:46 +0000

jQuery Lazy Load Ad is a jQuery plugin that takes advantage of Lazy Load delaying ads loading.
- Highly improve general page load (Ads are displayed after the page load and only inside the viewport)
- Compatibility with AdSense and many other advertisers
– Cross Browser support (IE5.5+, Firefox, Opera, Chrome, Safari)

A new version of this post and of the jQuery Lazyload Ad plugin is available here

Gains on my blog : 65% for the page load, and 52% for page weight
-> Without lazy Load Ad : Page loaded in 8.88s (371.98kb)
-> With : page loaded and accessible in 3.17s (179.18kb)

Big thanks to Mika Tuupola for the Lazy load part
-> http://www.appelsiini.net/projects/lazyload

Another big thanks to FrankT and his document.write overload code
-> http://blog.phpbuero.de/?p=26

To View Demo, simply look at all the ads on web2ajax, they are loaded by Lazy Load Ad.
You can either view the full page Demo by clickinh on 'Demo' Button just below to know how to use it on your own website.

INSERT AD CODE

First, insert placements into your HTML code.
For that, you can use a 'div' tag.
Apply a specified class, only used for lazyLoad Ad uses, as example 'lazyLoadAd_places'
So you have this :
[sourcecode]

[/sourcecode]

Now, call the ad publisher code and put it into the div attributes, named as 'original'.

For example with original BlogBang code :
[sourcecode]

[/sourcecode]

Becomes :
[sourcecode]

[/sourcecode]

To finish you can put 'code' tags into the div, code will be evaluated as javascript, just before calling publisher script (look to adsense example).
You can put either HTML code, like tags or image mobile replacements. Degraded content will be replaced by document.write when called.

EXAMPLES

In your HTML code for adSense:
[sourcecode]

[/sourcecode]

In your HTML code for eBuzzing:
[sourcecode]

[/sourcecode]

In your HTML code for BlogBang :
[sourcecode]

[/sourcecode]

HOW TO CALL LAZY LOAD AD

Insert the script declarations just before the 'body' endtag.

After loading the last jQuery version and document is ready, lazyLoad the Ads
[sourcecode] ...

...

[/sourcecode]

Amazing jQuery HTC HERO Widget !!

Guillaume DE LA RUE — Sat, 13 Mar 2010 15:53:04 +0000

jDigiClock is a beautiful jQuery inspired by the HTC Hero Widget.
It displays local time and weather.

Simple to integrate, I'll include it in the new theme of web2ajax :)

Article : http://www.radoslavdimov.com/2010/03/08/jdigiclock%E2%80%93ver-2-1/#content
Demo : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/#Examples

Genius Menu – jQuery plugin Like MacOS Dock Menu Effect

Guillaume DE LA RUE — Fri, 05 Mar 2010 07:27:43 +0000

Genius Menu is an highly flexible expand list plugin for jQuery.
The Expand style is inspired from MaxOSX Dock Genius Effect.

Click on View Demo to look at effect, flexibility and code.

Features :
- Auto orientation of expand
- Highly Customizable
- Easily draggable with jQueryUI
- Browser support ( IE > 5.5??, FireFox, Safari, Opera )

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

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

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 !!

jQuery : Raffraichir un Div périodiquement !

Guillaume DE LA RUE — Wed, 26 Sep 2007 12:55:27 +0000

Je cherchais depuis hier soir un plugin jQuery qui puisse me permettre de raffraichir le code html d'une DIV a intervalle régulier pour un module de news et Ô, désespoir : celui-ci n'existait pas !

Donc Bibi, comme il en avait besoin et qu'il aime bien l'esprit communautaire, bah il a commencé à créer ce plugin pour sa bibine, et aussi et surtout à partager ce plugin à toute la communauté.

Pour le plugin jQuery "jQuery.refreshDiv.js" :

[sourcecode]
/*
* jquery.refreshDiv 1.0 - 2007-09-26
*
* All the new stuff written by Guillaume DE LA RUE (www.web2ajax.fr)
* Feel free to do whatever you want with this file
*
*/

(function($) {
$.refreshDiv = function(source, url, interval_ms) {
return setInterval(
function() {
return $(source).load(url) ;
}, interval_ms );
}

$.fn.refreshDiv = function(url, interval_ms) {
if (!url) return;
this.each(function() {
new $.refreshDiv(this, url, interval_ms);
});
return this;
};
})(jQuery);
[/sourcecode]

Et pour raffraichir un DIv :

[sourcecode]
jQuery(document).ready(function() {
// Refresh news div every 3000 sec
$('#news_panel').refreshDiv('/Actualites/module.html', 3*60*1000) ;
});
[/sourcecode]

Testez le et dites moi si c'est bon pour vous que je le mette directement sur le site officiel de jQuery !

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;
}