Le TwiBlog

Il y a deux ans et demi j'avais déjà soulevé un problème lors de la création d'éléments de formulaire en javascript sous internet explorer.

Je viens aujourd'hui d'en trouver un autre, auquel j'ai trouvé une solution, en anglais, que je précise ici (je ne précise que la solution qui marche partout)

Le problème est le suivant : quand on créé un bouton radio dans internet explorer, en javascript, via document.createElement('input')........ le bouton est bien créé mais on ne peut le cocher.

La solution, la seule, l'unique, est... de ne pas utiliser le dom pour cela, malheureusement. Il faut le créer en html :

<input type="radio" name="truc" id="bidule" value="chose" />

La solution qui semble le mieux fonctionner dans les différents navigateurs est, sans faire de test de navigateur :

elementParent.innerHTML += '<input type="radio" name="truc" id="bidule" value="chose" />'

C'est moche, mais c'est tout ce qui marche.

Autre point, il ne faut pas, pour IE, spécifier ici l'état "checked" car si un radio du même groupe (même attribut "name") est déjà coché, on se retrouvera avec deux boutons radio cochés...

Il faut, une fois nos inserts terminés, faire par exemple :

document.getElementById(input_id).checked = true

A chaque svn status il n'est pas rare de voir un certains nombres de fichiers "temporaires" qui ne nous intéressent pas, et que nous aimerions bien voir disparaître définitivement.

Alors il existe bien sur la commande svn propset svn:ignore "*.pyc" le_rep mais il faut non seulement le faire pour chaque projet, mais en plus pour chaque répertoire.

Une solution plus simple, et globale, consiste à dire à svn de toujours ignorer les fichiers qui ne nous intéressent pas, ce dans notre fichier de configuration $HOME/.subversion/config (dans la section miscellany) :

global-ignores = *.pyc .*.swp

Voilà pourquoi j'adore (qui a dit que j'étais ironique ?) le php.

Voici trois fonctions pour connaître l'état d'une variable :

• is_null (bon là, ok)
• isset (absence d'underscore)
• empty (sur ce coup là on a même pas le is)

Sans cohérence. Euh je voulais dire : Sans commentaire.

Pendant longtemps AllHTML était, comme pour beaucoup, ma référence de l'html. J'y ai appris tout ce qu'il y avait à savoir sur les balises.

Mais c'était il y a longtemps, un autre temps.

Alors que le net évoluait, que les techniques des webmasters changeaient radicalement, AllHTML s'était lentement transformé en boite à pub. De la pub partout, et même leur rares mailings, c'était de la pub.

Mais aujourd'hui un réveil semble avoir eu lieu, AllHTML passe aux standards !

Site entièrement refait en xhtml strict, au design, formes et couleurs à la mode, bref, le résultat est très prometteur.

Pourquoi je me contente d'un "prometteur" ? Car le contenu n'est pas encore au rendez-vous (beaucoup de vieux articles, pour certains largement dépassés), et le site sans adblock est une catastrophe : trois pubs en flash.... en haut, à droite, à gauche... STOOOPPPPPPP laissez respirez ce nouveau site, donnez-lui toutes ses chances !

Mais ne leur jetons pas la pierre trop tot, attendons de voir, le travail déjà effectué vaut le coup ;))

Bon courage à toute l'équipe.

Source : AllHTML passe aux Standards ! - Blog Alsacréations : XHTML, CSS et Standards web

Quelque soit votre niveau en javascript, il y a des fois ou vous avez juste besoin d'une bonne documentation, de qualité. Malheureusement, la plupart de ce que l'on peut trouver à ce sujet sur le net est souvent incomplet, en fouilli, inexact, et j'en passe. Bref, de quoi ne pas s'y retrouver.

Heureusement, notre espoir vient sous la forme d'une petite série de pages sur javascriptKit.com. Elles référencent les différents éléments, attributs et style que vous pouvez utiliser en javascript, le tout réparti en quelques simples catégories :

• Window
• Objet Document
• Objet Element
• Objet Event
• Style

Certains éléments incluent également du code HTML/Javascript en guise d'exemple d'utilisation. De plus la page de l'objet Event inclue des colonnes IE/NS afin d'aider le développeur cross-browser.

La page tant attendue : http://www.javascriptkit.com/domref/

Il n'est pas rare lors du traitement d'un formulaire de vouloir renseigner par script les champs qui le composent.

Un exemple typique : l'ouverture d'ue calendrier en popup qui, lors de la sélection d'une date, remplira les champs de la fenêtre appelante.

Un truc à savoir c'est que quand on modifie un champ en script, l'évenement onchange du champ n'est pas appelé !

Par exemple, si sur votre champ date vous avez un onchange qui vérifie que la date n'est pas dans le passé, et bien via le calendrier vous pourrez quand même choisir une telle date.

Ce qu'il faut faire, c'est, lors de la modification du champs, appeler juste après la methode onchange du champs

Exemple :

 monchamps.value = mavaleur;
 if (monchamps.onchange) { monchamps.onchange(); }

Ainsi, l'évènement sera appelé s'il existe.

PS : la bonne façon d'accéder à un champs est

 document.forms['name_du_formulaire'].elements['name_du_champ']

et non pas

 documents.name_du_formulaire.name_du_champs

J'ai découvert un petit bug dans IE6 (celui qui dit "un de plus"... ben il le dit... ).

Sur un site développé pour un client (celui dont je parlais il y a peu), j'ai une partie en javascript. On peut, en cliquant sur un bouton, ajouter des lignes de formulaire.

Voici une partie du code :

var input_mail = document.createElement('input');
input_mail.setAttribute('name', 'mail2');
input_mail.setAttribute('id', 'step3_mail2');
input_mail.className = 'step3_mail_input';
...
a_div_in_the_form.appendChild(input_mail);

Donc ajout classique d'un élément via le DOM.

Plus tard, j'ai un onsubmit sur le formulaire dans lequel j'effectue une validation.

Je veux donc pouvoir accéder au nouveau champs pour tester son contenu

Je fais donc, très logiquement

var input = documents.forms['the_form'].elements['mail2'];

Et bien pour IE6, impossible, l'élément n'existe pas. Pourtant quand on parcoure le tableau avec des index numériques, on trouve bien l'élément avec name = 'mail2'. J'ai aussi essayé avec l'id plutôt que le name, mais rien à faire. La création de l'élément n'a pas correctement mis à jour le tableau elements.

Pour éviter de refaire tout mon code, j'ai créé une petite fonction qui renvoie une table de hashage qui, pour chaque nom du tableau, me donne son index.

function el_id_by_name(el) {
	var els = new Array();
	for (i=0;i<el.length;i++) {
		if (el[i].name) {
			els[el[i].name] = i;
		}
	}
	return els;
}

Et mon code précédent devient

var els = el_id_by_name(document.forms['the_form'].elements);
var input = document.forms['the_form'].elements[els['mail2']];

Notez le remplacement de elements['mail2'] par elements[els['mail2']]

Voilà

J'ai développé pour un client un site multi-langues. La bonne façon de faire est bien sûr d'utiliser gettext. Or, sans parler du fait que c'était pour moi la première fois que je touchais à cet utilitaire, j'ai du batailler pour arriver à un résultat correct avec PHP.

Donc au final j'ai noté deux points importants pour le bon fonctionnement de gettext+php

• il faut que les locales de chaque langue utilisée soient installées (par exemple sous debian via dpkg-reconfigure locales
• il faut redémarrer apache après chaque génération du fichier .mo

Ca n'a peut-être l'air de rien comme çà, mais j'ai passé des heures à comprendre pourquoi ça ne marchait pas...

Lien : un article facile d'accès (mais en anglais) pour commencer avec gettext et php

Vous connaissez tous l'extension "Web Developer" de firefox, indispensable pour tout développeur web...

Et bien Microsoft a sorti la sienne pour IE et je vous propose de l'installer pour votre IE sous Wine

Pour l'installer, c'est simple.

Vous téléchargez le .msi sur la page pré-citée (je n'ai pas réussi avec ie sous wine, j'ai donc utilisé fx)

Vous installez, si ce n'est déjà fait MS Installer :

• Téléchargez-le
• Installez-le : wine InstMsiA.exe
• Dans votre fichier de config (~/.wine/config si vous avez suivi ma deuxième procédure pour avoir IE sous Wine), ajoutez, dans les "DllOverrides" :

"msi" = "native, builtin"
"msiexec.exe" = "native, builtin"

Une fois MS Installer installé, utilisez la ligne de commande suivante pour installer votre barre d'outil au format .msi :

wine msiexec /i msifile.msi

Les connaisseurs sauront combien peuvent être utiles les deux fonctions que sont

• getElementById : récupérer un élément du DOM par son ID
• get ElementsByTagName : récupérer un tableau d'éléments définis par un tag

Et bien voici quelques chose de très utile : récupérer un tableau d'éléments par un sélecteur CSS !

Deux scripts pour ça :

• "cssQuery", développé par Dean Edwards, auteur de "IE7" dont j'ai déjà parlé dans un précédent billet : http://dean.edwards.name/my/cssQuery/
• "getElementsBySelector", la même chose mais en plus ancien (2003) et qui gère moins de types de sélecteurs mais restera largement suffisant pour la plupart des besoins : http://simon.incutio.com/archive/2003/03/25/getElementsBySelector

Je n'évoquerai pas les nombreuses possibilités offertes par ces scripts, mais néanmoins sachez que des outils tel que "csshover.htc" sont développés dans le même esprit (csshover.htc possède d'ailleurs une fonction GetElementsBySelect)

Il devient facile avec ce genre d'outil de développer ses propres htc ou équivalent, qui répondront à un besoin précis, plutôt que charger à chaque fois les htc qui peuvent ralentir le chargement de la page en l'analysant au démarrage.

Même si mon titre n'est pas forcément très clair, c'est un outil fabuleux que je viens de découvrir : Behaviour : Using CSS selectors to apply Javascript behaviours

Cet outil permet, en utilisant des sélecteurs css comme descripteur, d'ajouter des évènements javascript à tout objet contenu dans une page, sans avoir à modifier le code xhtml de la page.

Le plus simple est de voir l'exemple exposé sur le site de l'auteur : http://bennolan.com/behaviour/

En complément de l'article précédent, voici un autre behavior pour qu'internet explorer gère correctement les canneaux alph des images png.

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Pour l'utilisation, même principe, rajouter le sélecteur

img { behavior: url("pngbehavior.htc"); }

Par contre ne pas oublier de télécharger également l'image blank.gif. Plus d'explications sur le site de l'auteur.

Dans le design web, quelque chose qui manque vraiment à internet explorer, c'est la gestion des "hover" sur autre chose que des liens.

"hover", c'est une pseudo-class qui s'utilise de la façon suivante :

#mon_element:hover { monc_code_css }

Le css indiqué sera alors appliqué à l'élément au survol de ce dernier.

L'absence de cette fonctionnalité dans internet explorer frustre notre créativité.

Or il existe une solution. Un fichier "htc", qui modifie le comportement d'internet explorer. On connaissait déjà le magnifique mais lourd "ie7" (qui n'a rien a voir avec internet explorer 7, mais l'auteur a du utiliser ce nom dans l'idée de proposer tout ce qu'il aimerait voir dans internet explorer 7) que l'on trouvera ici : http://dean.edwards.name/IE7/.

Mais là point besoin de charger tout ça, nous utiliseront le "csshover.htc" que nous propose le cite http://www.xs4all.nl/~peterned/csshover.html

Comment l'utiliser ? Très simplement... Il suffit de rajouter dans sa css

body { behavior: url(csshover.htc); }

(en n'oubliant pas de placer le htc dans le même répertoire que le css

Seul défaut de ce procédé, la feuille de style ne validera plus, il peut être alors pertinent de placer cette déclaration dans un css à part, importé grace à @import.