$('input[type=checkbox]').change(filtrer);

“filtrer” étant ma fonction de filtrage des points sur la carte.

Malheureusement, IE (6,7 et 8 ) avait du mal à réagir à cet événement.

Du coup, j’ai du l’y forcer :

$('input[type=checkbox]').click(function(e){
    if($.browser.msie){
        $(this).change();
    }
 });

Ainsi, je force IE à provoquer l’événement et ma fonction “filtrer” est bien appelée

En bonus, voici comment cocher et décocher des checkbox avec jQuery :

$('input[type=checkbox]').attr('checked','checked');//cochage

$('input[type=checkbox]').attr('checked','');//décochage

à modifier selon votre page et donc vos sélecteurs

Use the right tools to rules

Malheureusement, une grande majorité d’internaute utilise encore Internet Explorer (toutes versions confondues …). Mais là, pour le coup, les outils deviennent bien rares… Il existe bien une ou deux toolbars reprenant certaines fonctionnalités de Firebug, mais ça reste assez limité.

La solution que j’adopte lorsque je bascule sous IE, ce sont les bookmarklets.

Un bookmarklet est un favoris (ou marque-page) dont le lien de destination est un code en javascript. Ce code, va s’exécuter sur la page courante et ensuite permettre de

• vous rediriger vers une page de publication (facebook, twitter, etc …)
• modifier le document en cours (via des manipulations DOM)
• afficher des informations supplémentaires (règle, propriétés CSS, etc …)
• Les actions possibles sont aussi nombreuses et variés que le javascript est souple et puissant.

Les avantages des bookmarklets sont nombreux :

• facilité d’installation (il suffit bien souvent de les faires glisser dans la barre de favoris)
• légèreté (ils n’alourdissent pas votre navigateur puisqu’ils n’y sont même pas installés …)
• sauvegarde facile (je les synchronise comme tous mes bookmarks avec l’extension Mozilla Weave pour Firefox)

Ainsi, voici ma sélection de bookmarklets que j’utilise fréquemment :

Firebug Lite

Firebug Lite reprend l’apparence de l’extension pour Firefox, mais comme son nom l’indique, il s’agit d’une version allégée. La fonctionnalité qui lui fait le plus défaut est celle de la modification du contenu à la volée. En dehors de ça, l’inspecteur DOM et la navigation dans le source HTML sont de précieux outils.

Design

Le bookmarklet Design est plutôt réservé aux intégrateurs et aux graphistes. Il permet d’afficher des grilles, de mesure ou d’afficher une mire par dessus le contenu de la page. Ainsi, il devient plus facile de repérer et corriger les divs mal alignés.

ReCSS

ReCSS est un bookmarklet permettant de recharger uniquement les feuilles de styles du document en cours. Ca peut paraitre à première vue, mais lorsque vous êtes dans une série de formulaire et que vous êtes obligés de reprendre tout votre cheminement pour visualiser les modifications apportées. A ce moment là (le gars) on apprécie d’avoir un simple bouton qui recharge tout le style ^^
J’utilise ReCSS sous Firefox également, en complément des fonctionnalités d’édition de Firebug.

SpriteMe

Etant un peu accro aux performances et temps de chargements, j’aime traquer les millisecondes (qui additionnées font vite des secondes). Il est quelques des éléments de plus en plus présents que l’ont peut regrouper : les background-images.
Ces images composent la majorités des templates et thèmes de sites. SpriteMe est un bookmarklet qui va vous proposer une disposition et une feuille de style pour regrouper ces images en une seule (dans l’idéal). Ainsi au lieu de prendre 20*10ms, votre thème prendra uniquement 1*100ms pour charger ses images…
J’utilise SpriteMe sous Firefox pour m’aider à repérer les images que je peux regrouper.

mURL

mURL est mon réducteur d’URL, je l’ai doté également de bookmarklets pour pouvoir garder et transmettre facilement un lien vers une documentation, une librairie ou vers n’importe quoi d’autre.

Maintenant que vous êtes équipés pour bosser efficacement sous Internet Explorer, au boulot !

Article inspiré par InspectElement.com

Donc, IE7 (bouh !) est très utilisé. J’ai été contacté par un client la semaine dernière qui avait un bug avec une carte Google Maps qu’il avait intégré dans de nombreuses pages de son site : Sa carte ne s’affichait pas correctement sous IE7 (bouh !), en effet, celle-ci présentait un affreux carré gris sur toute la moitié droite.

J’ai d’abord pensé à un problème de HTML mal formé (pas standard…), mais même en le rendant plus propre ça ne changeait rien…

Ensuite, j’ai pensé à un problème de gestion des ressources mémoires par IE7, mais même pas. La mémoire était bien libérée à chaque fermeture/changement de page.

Puis, en fouillant sur le net, je suis tombé sur THE SOLUTION ! En fait, lorsque vous souhaitez afficher une carte Google Maps, vous définissez un cadre (<div …>) auquel vous donnez une taille (en css : height et width …) Ensuite, vous “lancez” l’affichage de la carte en créant un nouvel objet (GMaps() auquel vous précisez le cadre à utiliser) . Ça marche, pour quasi-tous les navigateurs.

Malheureusement, IE7 n’est pas très fort (les standards, toussa …), et n’est même pas capable d’aller relire les dimensions du cadre pour y coller la carte… Donc, il faut “forcer” cette taille lors de la création de l’objet GMaps en lui donnant un paramètre supplémentaire qui est un objet de type GSize()….

Voici donc la syntaxe finale, c’est cadeau, ça me fait plaisir :

var maCarte = new GMaps(“#monDiv”,new GSize(800,600));